# Rainbow Spring — Learn Processing with me pt.3

In this week’s processing, we’ll go from making the elements move to expanding on the entire screen using the sin wave function. I used “sin” last time too, but it’ll be more fun this time. Sin is a trigonometry math function used to change the value of angles. Similar we can use cos(),tan(),degree(),radian() etc. We also used colorMode() to use HSB instead of RGB or Hex value.

Before we make our rainbow spring, let's see how to code rainbow lines.

`void setup() { size(800, 800); colorMode(HSB, 360, 100, 100); println( sin(3*PI/2.0)); noFill();}void draw() { background(0, 0, 0);  float sinvalue = sin((float)frameCount/150); //using the sin function println(frameCount + “ “ + sinvalue); //it prints the lines  int linespacing = 10; //the line spacing  for( int i=0; i < width/linespacing ; i++) { stroke(i* 5 * abs(sinvalue), 100, 100);  float linewidth = map( i, 0, width/linespacing, 0, linespacing); strokeWeight(linewidth* abs(sinvalue)); float x1 = linespacing * (i); int y1 = 0; float x2 = x1; int y2 = height; line(x1,y1,x2,y2); }}`

Using the same principle, lets create ellipse rings that looks like a flower.

`int numpetals = 6;  ellipseMode(CORNER); //angling them to center  for(int i=0; i < numpetals; i++) {    stroke(i* 50 * abs(sinvalue), 100, 100); //color that changes    push(); //current drawing setting    translate(width/2, height/2);    rotate(TWO_PI/numpetals*i);    ellipse(0, -25, 200, 50); //our petals    pop(); //resets drawing settings  }}`

Now lets expand it. Increase the number of ellipses and add radian function to create the expanding movement.

`void setup() { size(800, 800); colorMode(HSB, 360, 100, 100); println( sin(3*PI/2.0)); noFill();}void draw() //rings{ background(0, 0, 0); float sinvalue = sin((float)frameCount/150); println(frameCount + “ “ + sinvalue);  int numpetals = 200; //no of rings ellipseMode(CORNER); for (float i=0; i < numpetals; i++) { float wave = sin(radians(frameCount)); //creating moving function stroke(i* 5 * abs(sinvalue), 100, 100); push(); translate(width/2, height/2); rotate(TWO_PI/numpetals * I); //this rotates the ellipses ellipse(0 + wave * 100, -25 + wave *200, 300, 50); pop();}}`

This was fun to make.

--

--

## More from Celestine Design Journal

On Design, Technology, Design Books, and Casestudies.

## Avitha Celestine

65 Followers

Experience Designer • Artist • Writer