Project Title: Explore Motion
Link:
Sketch1: https://editor.p5js.org/wl3223/sketches/8EsQPIfhK
Sketch2: https://editor.p5js.org/wl3223/sketches/BAiVPwbic
Sketch3: https://editor.p5js.org/wl3223/sketches/-NhxWBCV3
Sketch1:
Sketch 1 includes randomly motivated circles with changing colors. What’s more, a big circle in the center changes its diameter with frameCount and displays the color of the small one.
Sketch2:
In Sketch 2, three circles are doing Angular Motion, while their colors change with their position. There is another circle doing linear motion and bouncing around the sketch.
Sketch3:
Sketch 3 shows a model similar to the double helix structure of DNA. I use the Oscillation Motion of sin() and cos() to let it run. There are lines that connect different circles together to make the sketch more vivid. In addition, Angular Motion is used to enrich the background.
Coding
frameRate(20) sx=random(-10,10) sy=random(-30,30) noStroke(); let c = map(y, 0, height, 0,100); console.log(c); //color, saturation, brightness fill(c,100,100); circle(x,y,40) x=x+sx y=y+sy
Here is a snippet of code in Sketch 1. I used colorMode(HSB) to control the color of the sketch more easily and employed “map” code to let the color change evenly from top to bottom. Professor Marcela patiently explained this knowledge to me during office hour.
let x1=map(sin(frameCount*0.08),-1,1,100,300) fill(random(100,255),100,150,100) stroke(250) strokeWeight(1) circle(x1,y1,30) y1=y1+3 let x2=map(cos(frameCount*0.08),-1,1,100,300) fill(100,150,random(150,255),100) circle(x2,y2,30) y2=y2+3
The snippet of code above is the Oscillation Motion in Sketch 3. I used both sin and cos codes. The initial ordinate of one side was changed to present the DNA double helix structure model.
Lessons Learned And Conclusion
Through this weeks lessons, I learned how to employ different types of motions and frameCount, which can make the sketch animiated.
Hi Livvy,
I don’t have access to what you have embedded from google drive.
Could you please review the sharing settings?
I have updated the access. Could you please check it again? Thanks!
it works now!