siteIcon

Tech Novice Tools

Python-Processing Demos

burgerIcon

Orbiting Breathing Circlecircles

"SohCahToa in Action"

Rotating Breathing Circle Challenge

Students were given a 'shell' of driver code and asked to develop the necessary code to get the animation shown in this movie.

A good time was had by all!

Here is the source code for the challenge:

Take a peak:
                            
'''
File: ourRotatingBreathingCircle_Challenge
Site: 
Path: 
Date: 10/03/19
Author: klp
Comments:
TODO:
'''

#no touch code
def sinusoid(x, minVal, maxVal, period, hShift):
    axis = (minVal + maxVal)/2
    amplitude = maxVal - axis
    b = 2*PI/period
    y = amplitude*sin(b*(x-hShift)) + axis
    return y
#end function sinusoid

#no touch code
def drawHorizLines(inc):
    #set line width and color
    stroke(0, 0, 50)
    strokeWeight(1)
    y = 0
    while(y < height):
        line(0, y, width, y)
        y += inc
    #end while loop
#end function drawHorizLines

#no touch code
def drawVertLines(inc):
    #set line width and color
    stroke(0, 0, 50)
    strokeWeight(1)
    x = 0
    while(x < width):
        line(x, 0, x, height)
        x += inc
    #end while loop
#end function drawVertLines

#no touch code
def drawAxes():
    stroke(black)
    strokeWeight(2)
    #x-axis
    line(0, height/2, width, height/2)
    #y-axis
    line(width/2, 0, width/2, height)
#end function drawAxes

#no touch code
def drawGraphGrid(numSquares):
    global inc
    inc = width/numSquares;
    drawHorizLines(inc)
    drawVertLines(inc)
    drawAxes()
#end function drawGraphGrid

#wide-scoped variables go here
#adjust your canvas size if desired, here
canvas_width = 600
canvas_height = 600

#adjust for background refresh and grid here
shouldRefreshBackground = True
shouldDrawGrid = True

t = 0 #time
theta = 0 #rotation of bigRadius; angle between bigRadius and x-axis

#no touch code
def setup():
    global shouldRefreshBackground, shouldDrawGrid, numSquares,
     bigRadius, deltaTheta, theta
    global white, my_red, my_blue, my_green, yellow, black, lightGray
    global purple
    global bgColr, myRate
    global tinc, h, k
    size(canvas_width, canvas_height)

    #color mode and basic colors
    colorMode(HSB, 360, 100, 100, 100) #hue, saturation, brightness, alpha
  
    white = color(0, 0, 100)
    #red, green and blue are reserved words in Processing
    my_red = color(0, 100, 100)
    my_blue = color(240, 80, 60)
    my_green = color(120, 60, 40)
    yellow = color(60, 100, 100)
    black = color(0, 0, 0)
    lightGray = color(0, 0, 95)
    purple = color(290, 100, 100)
  
    #sketch settings
    myRate = 30 # default is 60 frames/second
    bgColr = yellow
    frameRate(myRate)
    background(bgColr)
      
    #additional setup variables/functions here
    msg = "===Rotating Breathing Circle!==="
    print(msg)
    tinc = 1;
    
    noStroke()
    h = width/2
    k = height/2
    shouldDrawGrid = True
    
    numSquares = 12.0 #number of grid squares horizontally and vertically
    bigRadius = 200.0 #radius of large translucent yellow circle
    deltaTheta = 5 #increment that updates theta each frame
    
#end function setup

#look for 'TODO' to finish the animation
def draw():
    global t, h, k, theta
    #adjust background color if desired
    if shouldRefreshBackground:
        background(lightGray);
    
    t += tinc
    print("t = " , t)
    
    if shouldDrawGrid:
        drawGraphGrid(numSquares)
        
    noStroke()
    
    #create a base circle
    fill(yellow, 50)
    circle(h, k, bigRadius*2)
    
    #rotating breathing circle basic conditions: 
    #diamX, diamY, myHue, myAlpha, myColor
    #diamX, diamY, myAlpha depend on time
    #myAlpha depends on theta
    #diameters are in fractions of 'inc' which is the grid spacing distance
    #TODO: create reasonable sinusoid functions for diamX, diamY, myHue, myAlpha
    diamX = sinusoid(t, .5*inc, 2*inc, 200, 0)
    diamY = sinusoid(t, .8*inc, 1.5*inc, 200, 0)
    myHue = sinusoid(theta, 200, 360, 600, 0) #family of color: blue, green
    myAlpha = sinusoid(t, 50, 100, 200, 0) #alpha means transparency
    
    #TODO: create myColor based on myHue and set 
    #the fill to that color and myAlpha
    myColor = color(myHue, 100, 100)
    fill(myColor, myAlpha)
    
    #adjust coordinates to get orbit
    #rotating breathing circle
    theta += deltaTheta
    print("theta = ", theta)
    
    #TODO: use SohCahToa to calculate deltaX and deltaY
    #which are the distances from the origin to the 
    #center of the breathing circle
    #To get reasonable animations, use a 'B' of .01 in the trig equation
    deltaX = bigRadius * cos(.01*theta)
    deltaY = bigRadius * sin(.01*theta)
    
    #TODO: create an ellipse at the end of the 
    #bigRadius with the prescribed diameters
    ellipse(h + deltaX, k + deltaY, diamX, diamY)
    
    #TODO: create a bigRadius line in black and 2 yellow points marking
    #the center of the pale yellow circle 
    #and the center of the breathing circle
    #set sizes based on a fraction of 'inc'
    stroke(black)
    strokeWeight(2)
    line(h, k, h + deltaX, k + deltaY)
    fill(yellow)
    circle(h, k, .2*inc)
    circle(h + deltaX, k + deltaY, .2*inc)
    
#end function draw
                        

Last update: 10/10/19