Creating oscillations with trigonometry

[oldoc63]

https://www.evernote.com/shard/s468/sh/7c528547-ecba-aa51-79cb-6e19f9dd8856/1ec8e82726bd3575aefef87433b9ed01

[oldoc63]

• What most people remember from their trigonometry class is solving for unknown sides in a triangle. But this is seldom how trig functions are used in reality. The more common uses of trig functions such as sine and cosine are for oscillating motion, like water, light, and sound waves:

  def f(x):
  return sin(x)

• You’ll use sine, cosine, and tangent to simulate oscillating motion in real time and also to make transforming, rotating, and oscillating shapes much easier than before.

[oldoc63]

• The wave takes just over six units to make a complete wave, or one wavelength, which we also call the period of the function. The period of the sine function is 2π, or 6.28 radians in Processing and Python.

[oldoc63]

Using trigonometry for oscillations and rotations

• To rotate a point, we’re going to keep the radius of the circle constant and simply vary theta, the angle.
• The computer is going to do the hard part of recalculating all the positions of the point by multiplying the radius r by the cosine or sine of the angle theta!

[oldoc63]

Writing functions to draw polygons

• Recall that a polygon is a many-sided figure; a regular polygon is made by connecting a certain number of points equally spaced around a circle.
• The Processing functions beginShape() and endShape() define any shape we want by using the vertex() function to say where the points of the shape should be. This lets us create as many vertices as we want.

def setup():
    size(600,600)
def draw():
    beginShape()
    vertex(100,100)
    vertex(100,200)
    vertex(200,200)
    vertex(200,100)
    vertex(150,50)
endShape(CLOSE)

[oldoc63]

Drawing an hexagon with loops

def setup():
    size(600,600)
def draw():
    translate(width/2,height/2)
    beginShape()
    for i in range(6):
        vertex(100*cos(radians(60*i)),
100*sin(radians(60*i)))
    endShape(CLOSE)

[oldoc63]

Drawing an Equilateral Triangle

• We create a polygon() function that draws a polygon given the number of sides ( sides ) and the size of the polygon ( sz ).

def setup():
    size(600,600)

def draw():
    translate(width/2,height/2)
    polygon(3,100) #3 sides, vertices 100 units from the center

def polygon(sides,sz):
    '''draws a polygon given the number of sides and length from the center'''
    beginShape()
    for i in range(sides):
        step = radians(360/sides)
        vertex(sz*cos(i * step), sz*sin(i * step))
    endShape(CLOSE)

[oldoc63]

Making Sine Waves

r1 = 100 #radius of big circle
r2 = 10 #radius of small circle
t = 0 #time variable

def setup():
    size(600,600)

def draw():
    global t
    background(200)
    #move to left-center of screen
    translate(width/4,height/2)
    noFill() #don't color in the circle
    stroke(0) #black outline
    ellipse(0,0,2*r1,2*r1)
    
    #circling ellipse:
    fill(255,0,0) #red
    y = r1*sin(t)
    x = r1*cos(t)
    ellipse(x,y,r2,r2)
    stroke(0,255,0) #green for the line
    line(x,y,200,y)
    fill(0,255,0) #green for the ellipse
    ellipse(200,y,10,10)
    t += 0.05

[oldoc63]

Leaving a Trail

• We want the green ellipse to leave a trail to show its height over time.
• Leaving a trail really means that we save all the heights and display them—every loop.
• To save a bunch of things, like numbers, letters, words, points, and so on, we need a list.

#CircleSineWave.pyde
r1 = 100 #radius of big circle
r2 = 10  #radius of small circle
t = 0 #time variable
circleList = []

def setup():
    size(600,600)

def draw():
    global t, circleList
    background(200)
    #move to left-center of screen
    translate(width/4,height/2)
    noFill() #don't color in the circle
    stroke(0) #black outline
    ellipse(0,0,2*r1,2*r1)

    #circling ellipse:
    fill(255,0,0) #red
    y = r1*sin(t)
    x = r1*cos(t)
    #add point to list:
    circleList.insert(0,y)
    ellipse(x,y,r2,r2)
    stroke(0,255,0) #green for the line
    line(x,y,200,y)
    fill(0,255,0) #green for the ellipse
    ellipse(200,y,10,10)

    if len(circleList)>300:
        circleList.remove(circleList[-1])

    #loop over circleList to leave a trail:
    for i,c in enumerate(circleList):
        #small circle for trail:
        ellipse(200+i,c,5,5)

    t += 0.05

[oldoc63]

Creating a spirograph program

• We can make Spirograph-type designs using a computer and the sine and cosine code.

r1 = 300.0 #radius of big circle
r2 = 175.0 #radius of circle 2
r3 = 5.0 #radius of drawing "dot"

#location of big circle:
x1 = 0
y1 = 0

t = 0 #time variable

points = [] #empty list to put points in

def setup():
    size(600,600)

def draw():
    global r1,r2,x1,y1,t
    translate(width/2,height/2)
    background(255)
    noFill()
    #big circle
    stroke(0)
    ellipse(x1,y1,2*r1,2*r1)

    #circle 2
    x2 = (r1 - r2)*cos(t)
    y2 = (r1 - r2)*sin(t)
    ellipse(x2,y2,2*r2,2*r2)
    t += 0.05

[oldoc63]

• But how about that hole on the gear where the pen sits and draws the trail? We’ll create a third ellipse to represent that point. Its location will be the second circle’s center plus the difference of the radii.

#from __future__ import division

#spirograph.pyde

r1 = 300.0 #radius of big circle
r2 = 105.0 #radius of circle 2
r3 = 5.0   #radius of drawing “dot”
#location of big circle:
x1 = 0
y1 = 0
t = 0 #time variable
points = [] #empty list to put points in
prop = 0.8

def setup():
    size(600,600)

def draw():
    global r1,r2,x1,y1,t,prop,points
    translate(width/2,height/2)
    background(255)
    noFill()
    #big circle
    stroke(0)
    ellipse(x1,y1,2*r1,2*r1)
    #circle 2
    x2 = (r1 - r2)*cos(t)
    y2 = (r1 - r2)*sin(t)

    ellipse(x2,y2,2*r2,2*r2)

    #drawing dot
    x3 = x2+prop*(r2 - r3)*cos(-((r1-r2)/r2)*t)
    y3 = y2+prop*(r2 - r3)*sin(-((r1-r2)/r2)*t)

    fill(255,0,0)
    ellipse(x3,y3,2*r3,2*r3)
    points.append([x3,y3])
    if len(points) > 2000: #if the list gets too long
        points.pop() #remove the first point
    for i,p in enumerate(points): #go through the points list
        if i < len(points)-1: #up to the next to last point
            stroke(255,0,0)# draw red lines between the points
            line(p[0],p[1],points[i+1][0],points[i+1][1])

    t += 0.05