Jenny Hu — Dynamic Drawing

jenny’s dynamic drawing

//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 03 — Dynamic Drawing


var x1 = 320; //center of first ellipse
var y1 = 240;

var x2 = 50; 
var y2 = 240;

var x3 = 590; 
var y3 = 240;

var maxEllipse = 50;

var startD = 10; // starting diameter 
var R = 255; 
var G = 0; 
var B = 110; 

var bR = 0;
var bB = 0;

var rippleHappening = false;
var whereIsRipple = 0;//this is the number that controls where 
//the ripple is relative to the center
function setup() {
    createCanvas(640, 480);
    ellipseMode(CENTER); 
}


function draw() {
    //making background color variable
    bR = mouseX;
    bB = mouseY;
    background(bR,bB,100); 

    //Draw the ellipses
    for ( var i=0; i<maxEllipse; i++){
      noFill();

      //ellipse positions
      var x2 = mouseY - 10;
      var x3 = (width/2) - (x2-(width/2)); //make x3 move opposite of x2
      var y2 = mouseX + 10;
      var y3 = (height/2) - (y2-(height/2)); //mover y3 opposite of y2
      
      //making a ripple
      if(rippleHappening){
        //print("in the for loop?");
        if(i == int(whereIsRipple)){
          strokeWeight(6);
        }else{
          strokeWeight(2.25);
        }
      }else{
        strokeWeight(2.25);
      }


      var scale1 = (width/2-mouseX)/10; //all scale variables are to scale the space between ellipses
      var scale2 = (width/2-mouseX)/10;
      var scale3 = (width/2-mouseX)/10;

      R = mouseX;
      G = mouseX - (mouseX/2);
      B = mouseY - (mouseX/2);

      stroke(R, G, B);

      ellipse(x1,y1, startD+(i*scale1), startD+(i*scale1)); //center ellipse 
      ellipse(x2,y2, startD+(i*scale2), startD+(i*scale2)); //starting left ellipse
      ellipse(x3,y3, startD+(i*scale3), startD+(i*scale3)); //starting right ellipse

    }
    //whereIsRipple determines the ripple ellipse per set of rings 
    //if we mod the ripple, we limit it to how far the ripple goes
    whereIsRipple = (whereIsRipple+0.5)%maxEllipse;
    if(int(whereIsRipple) == (maxEllipse)){
      print("is rippleHappening turned false?");
      //turn boolean to false 
      rippleHappening = false;
    }

}
function mousePressed(){
  rippleHappening = !rippleHappening;
  whereIsRipple = 0; //start ripple at 0

}

I started this project with the intention to play with moire patterns, which is essentially patterns that come about when you overlap striped elements on top of one another (made by the gaps between the stripes). I think this was the most fun project so far because I was generated outputs I couldn’t have made without a lot more effort in other programs. It was a result that was more easily achievable via programming.

Originally, I planned the ellipsis in sketch, just to see the starting pattern, but everything else resulted from playing with the program.

You can click anywhere on the canvas to cause a continuous ripple across the ellipsis. I imagine that this can go with music one day to make a great audio visualizer! (perhaps my final project?)

special thanks to Marisa Lu, and Gautam Bose for the help.