Livvy’s Mini Project3

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.