# Chapter 1: Shapes¶

## Section 1: Riley Quilt¶

We saw the Riley Quilt program in class. You can run it here It generates random slanted tiles, like this:

The program that generates this looks like this:

### Explaining the Snap program¶

The Snap program uses two variables x1 and y1 that will represent the position on the screen of each tile, at the lower left hand position.

The main body of the program is the repeat 8 loop (which generates the 8 rows of tiles) and the repeat 9 loop (which generates the 9 tiles within each row). You may wonder why this is using variables for positions and go to x: y: blocks. We know that we can move the sprite easily with turn and move blocks. Chloe did it this way to make it look a lot like the Processing version.

Within the two loops are the blocks which draw the tiles. First, a random pen hue is selected. The pen goes to the x1 and y1 position. The pen is moved to draw the four sides of the tile with go to x: y: blocks. The little bit at the bottom fills the tile with color. The bottom of the first loop is where we add 40 to y1 to go to the next tile in the row. The set x1 at the bottom of the second loop starts the next row.

The very bottom repeat 8 loop draws the little triangles at the bottom of each row. You can pull it off and re-run the program to see what happens when that extra bit is gone. It still works, but not all the tiles are there.

### The Processing Version¶

The Processing version uses P5.js which is a JavaScript library for running Processing code. Click the Render button below to see the code run. Each time you click Render, you’ll get a different drawing.

Try answering these questions about the code above.

## Section 2: Piet Mondrian¶

Piet Mondrian was a Dutch artist known for his abstract art with simple geometric shapes in primary colors.

Here is a Snap program that generates random art like that of Piet Mondrian. You can find the project here so you can play with it yourself, or download the picture of the code and drag that into your Snap project.

This program generates images like this:

### Explaining the Snap program¶

This Snap program uses three variables: x1, y1, and x2. These are used to position the rectangles in the random Piet Mondrian (like) drawing. The first parts of the script set the pen to black and a fairly thick (5 pixels) width.

The block square is a custom block that draws a square.

The four rectangle methods draw four different shapes at different positions within the drawing.

The very bottom of the Snap program adds blocks of yellow, blue, or red with the fill method.

Try the project to get a feel for how it works.

### The Processing Version¶

The Processing version uses P5.js which is a JavaScript library for running Processing code. Click the Render button below to see the code run. Each time you click Render, you’ll get a different drawing.

The below is an HTML file. P5.js runs inside of an HTML file. The beginning of it sets up an HTML page and references the P5.js script. What’s inside of <script> and <script>’ is the actual Processing code. It starts with a `function setup(){’. This is a piece of code that runs once when Processing is being “set up.” We only want to generate one Mondrian drawing, so we’ll just do all of the drawing inside of that function. There is an optional `function draw(){ which can be used to create animations.

Try answering these questions about the code above.

## Section 3: Corse Gray Lines¶

This is the simplest of the three examples. It simply draws lines of gray. You can see the Snap project here. The output looks like this.

This program looks like this:

### Explaining the Snap program¶

This program is creating 13 tracks. The bit of code that says i mod 2 = 1 is basically testing if it’s an even or odd track. Each line is drawn using go to x: y: blocks, and filled.

You might wonder what that “36.9230792” magic number is about. Chloe, who wrote this program, explains it like this: The Snap stage has the dimensions 480x360 – 480 pixels across and 360 pixels up and down. In order to fit 13 rectangles into this space, I determined 480/13 = 36.92307692 for the width dimension of each rectangle.

### The Processing Version¶

The Processing version uses P5.js which is a JavaScript library for running Processing code. Click the Render button below to see the code run. Each time you click Render, you’ll get a different drawing.

The below is an HTML file. P5.js runs inside of an HTML file. The beginning of it sets up an HTML page and references the P5.js script. What’s inside of <script> and <script>’ is the actual Processing code. It starts with a `function setup(){’. This is a piece of code that runs once when Processing is being “set up.” We only want to generate one Mondrian drawing, so we’ll just do all of the drawing inside of that function. There is an optional `function draw(){ which can be used to create animations.

Try answering these questions about the code above.

You have attempted of activities on this page