Transforming shapes with geometry

[oldoc63]

Drawing a Circle

• In geometry everything you learn involves dimensions in space using shapes.
• Before we draw the shape, we first define the size of our sketchbook, known as the coordinate plane. We use the size() function to accomplish that.
• The we use the drawing function ellipse() to create a circle on this plane. The first two parameters, 200 (x-coordinate) and 100 (y-coordinate), show where the center of the circle is located.
• The last two parameters determine the width and height of the shape in pixels. Because the two parameters are the same, it means that the points on the circumference are equidistant from the center, forming a perfect round circle.
• Processing has a number of functions you can use to draw shapes.

[oldoc63]

Specifying location using coordinates

• In traditional math graphs, the origin (where x=0 and y=0) is at the center of the graph.
• In computer graphics, however, the coordinate system is a little different. Its origin is in the top-left corner of the screen so that x and y increase as you move right and down, respectively.
• Each coordinate on this plane represents a pixel on the screen. As you can see, this means you don't have to deal with negative coodinates. We'll use functions to transform and translate increasingly complex shapes around this coordinate system.

[oldoc63]

Transformation functions

• Geometric transformations like translation and rotation let you change where and how your objects appear without altering the objects themselves.
• Processing has a number of built-in transformation functions that make it easy to translate and rotate objects.

[oldoc63]

Translating objects with translate()

• To translate means to move a shape on a grid so that so that all points of the shape move in the same directions and the same distance.
• In processing, you translate an object by moving the grid itself.
• translate(50,80); should move the entire grid 50 pixels to the right and 80 pixels down.
• Very often it's useful to have the origin (0,0) in the center of the canvas. You can use translate() to easily move the origin to the center of your grid. You can also use it to change the width and height of your canvas if you want it bigger or smaller.

[oldoc63]

Rotate objects with rotate()

• The rotate() function in processing rotates the grid around the origin (0,0). If you think in degrees, you can use the radians() function to convert your degrees to radians.

[oldoc63]

Drawing a circle of circles

• We'll use a for i in range() loop to repeat the circles and make sure the circles are evenly spaced.

[oldoc63]

Drawing a circle of squares

• We just change ellipse in the existing code to rect to make the circles into squares

[oldoc63]

Animating Objects: Creating the t variable

• Processing is great for animating your objects to create dynamics graphics. Let' use the rotate() function. Normally, rotate happens instantly, so you don't get to see the action take place -only the result of the rotation. But this time , we'll use a time variable t, which allows us to see the rotation unfold in real time.
• To start, create the t variable and initialize it to 0 (t = 0) before the setup function.
• Add global t at the beginning of the draw() function.
• This code starts at 0, rotates the grid that number of degrees, increments t by 1, and then repeats.

[oldoc63]

Rotating the individual squares

• Translates the grid to where we want to place the square, rotates the grid so the squares rotates, and then draw the square using the rect() function.

[oldoc63]

Saving orientation with pushmatrix() and popmatrix()

• After translating to the location of the square, we need to rotate back to the center of the circle before translating to the next square.
• The pushMatrix() function saves the position of the coordinate system at the center of the circle of squares. Then we use popMatrix().

[oldoc63]

Rotating around the center

• Adding rectMode(CENTER) should make each square rotate around its center.

[oldoc63]

Creating an interactive rainbow grid

Drawing a grid of objects

• Many tasks involved in math and in creating games like Minesweeper require a grid. It's worth learning how to write code for making a grid that we can reuse.
• We'll make a 12 x 12 grid of squares, evenly sized and spaced, using a loop.
• We'll start off by writing our setup() and draw() functions.
• Next we'll create a nested loop, where two variables will both go from 0 to 19, for a total of 20 numbers, since we want 20 rows of 20 squares.

def setup():
    size(600,600)
def draw():
    #set background white
    background(255)
    for x in range(20):
        for y in range(20):
            rect(30*x,30*y,25,25)

[oldoc63]

Adding the rainbow color to objects

• RGB uses three numbers indicating amounts of red, green and blue.
• In HSB, the three numbers represent levels of hue, saturation and brightness. The only we need to change here is the first number, which represents the hue. The other two numbers can be the maximum value, 255.
• Processing has a dist() function that finds the distance between two points.

def setup():
    size(600,600)
    rectMode(CENTER)
    colorMode(HSB)
def draw():
    #set background black 
    background(0)
    translate(20,20)
    for x in range(30):
        for y in range(30):
            d = dist(30*x,30*y,mouseX,mouseY)
            fill(0.5*d,255,255)
            rect(30*x,30*y,25,25)

[oldoc63]

Drawing complex patterns using triangles

• Let's do 90 rotating equilateral triangles.
• To draw an equilateral triangle we use the triangle() function. An equilateral triangle has equal sides.
• We also need to find the center of the equilateral triangle to be able to rotate it about its center. To do this we need to find the location of the three vertices of the triangle.

def setup():
    size(600,600)
    rectMode(CENTER)
t = 0
def draw():
    global t
    translate(width/2,height/2)
    rotate(radians(t))
    tri(200) #draw the equilateral triangle
    t += 0.5
def tri(length):
    '''Draws an equilateral triangle
      around center of triangle'''
    triangle(0,-length,
-length*sqrt(3)/2, length/2,
length*sqrt(3)/2, length/2)

[oldoc63]

Drawing multiple rotating triangles

• We need to figure out how to arrange multiple equilateral triangles into a circle.

def setup():
    size(600,600)
    rectMode(CENTER)

t = 0

def draw():
    global t
    background(255)#white
    translate(width/2,height/2)
    for i in range(90):
        #space the triangles evenly
        #around the circle
        rotate(radians(360/90))
        pushMatrix() #save this orientation
        #go to circumference of circle
        translate(200,0)
        #spin each triangle
        rotate(radians(t))
        #draw the triangle
        tri(100)
        #return to saved orientation
        popMatrix()
    t += 0.5

def tri(length):
    noFill() #makes the triangle transparent
    triangle(0,-length,
-length*sqrt(3)/2, length/2,
length*sqrt(3)/2, length/2)

[oldoc63]

Phase-shifting the rotation

• We can change the pattern in which the triangles rotate with a phase shift, which makes each triangle lag a little bit behind its neighbor, giving the sketch a "wave" effect. Each triangle has been assigned a number in the loop, represented by i. We need to add i to t in the rotate(radiants(t)) function: rotate(radians(t+1*360/90)).

def setup():
    size(600,600)
    rectMode(CENTER)
    colorMode(HSB) #for the rainbow colors
    strokeWeight(2) #a little thicker line

t = 0

def draw():
    global t
    background(255)#white
    translate(width/2,height/2)
    for i in range(90):
        #space the triangles evenly
        #around the circle
        rotate(radians(360/90))
        pushMatrix() #save this orientation
        #go to circumference of circle
        translate(200,0)
        #add color to each triangle
        stroke(2*i,255,255)
        #spin each triangle
        rotate(radians(t+2*i*360/90))
        #draw the triangle
        tri(100)
        #return to saved orientation
        popMatrix()
    t += 0.5
def tri(length):
    noFill() #makes the triangle transparent
    triangle(0,-length,
             -length*sqrt(3)/2, length/2,
             length*sqrt(3)/2, length/2)