Month: September 2017

lrospigl_project3

var r;
var t;
var a = 100;
var headx;
var discox;
var p;

function setup() {
  createCanvas(640, 480)

}

function draw() {
  var x = mouseX + (width / 2);
  var y = mouseY;

  background(230, x, y);

  strokeWeight(0);
  fill(a, 200, 200);
  ellipse(r, t, 20, 20);
  ellipse(r * 2, t, 20, 20);
  ellipse(r / 2, -t, 20, 20);
  ellipse(r, t / 2, 20, 20);

  if (mouseIsPressed) {
    ellipse(r, t, 50, 50);
    r = random(20, 500);
    t = random(20, 460);
    a = random(1, 250);
  }

  //disco man
    //shirt
  fill(255);
  rect (headx - 15, 360, 130, 100, 20);
  
  //hair
  fill(40);
  arc(headx + 50, 250, 200, 200, PI-QUARTER_PI, TWO_PI+QUARTER_PI, CHORD);
  //neck
  fill(254, 213, 192);
  rect(headx + 35, 300, 30, 80, 20);
  //face
  fill(254, 213, 192)
  rect(headx, 250, 100, 100, 20);
  //glasses
  fill(0)
  arc(headx + 30, 290, 30, 30, TWO_PI, PI, CHORD);
  arc(headx + 70, 290, 30, 30, TWO_PI, PI, CHORD);
  rect (headx + 30, 290, 40, 5);


  fill(0, 102, 153, 51);
  text("click and drag mouse accross canvas", 5, 480);
  
  if (100 < mouseX & mouseX < (width - 100)) {
    headx = mouseX - 50;
  }
  strokeWeight (0.5)
  fill (255, mouseX)
  ellipse (p, 50, discox, discox)
  
  if (100 < mouseX & mouseX < (width/2)) {
    p = mouseX;
    discox = mouseX/3
  }
    if ((width/2) < mouseX & mouseX < (width - 100)) {
    p = mouseX;
    discox = (width - mouseX)/3
  }
}

sketch

//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Project-03-Dynamic-Drawing.



//PARAMETERS THAT I AM CHANGING
//Color
//Ball Size
//Ball angle: rotation of the spiral
//Spacing between balls
//Size of spiral

    var angle;
    var positionX;
    var positionY;
    var ballWidth;
    var ballHeight;
    var isDrawing;
    var r;
    var g;
    var b;

//setup with default values for rgb color values
function setup(/*red = 213, green = 23, blue = 23*/) {
    createCanvas(640, 480);
    background(0);

    //rotate circles based on mouse position
    //#gotta love trig 
    angle = (atan((mouseY - 240) / (mouseX - 320)) / 500);
    
    positionX = 0;
    positionY = 0;
    ballWidth = 5;
    ballHeight = 5;

   //as you increment i, draw a circle
    for (var i = 0; i < 600; i++) {

        fill(r, g, b); 
        stroke(255);

        //As i increases, we draw a ball with increasing width
        //untill we reach maximum growth
        ballWidth += (30/600) * ((480 - mouseY) / 480);
        ballHeight += (30/600) * ((480 - mouseY) / 480);

        //start point
        push();
        translate(width/2, height/2); 
        rotate(degrees(angle));
        ellipse(positionX, positionY, ballWidth, ballHeight);
        pop();
    
    
        drawOut();

    }
    

}

function draw() {

    changeColor();

}


function changeColor() {

    //if mouse is on right side of canvas, red
    if (mouseX > width/2) {

         r = map(mouseX, 0, width/2, 500, 213);
         g = map(mouseX, 0, width, 100, 32);
         b = map(mouseX, 0, width, 135, 255);

}
    //if mouse is on left side of canvas, blue                              
    if (mouseX < width/2) {
        
         r = map(mouseX, 0, width/2, 200, 100);
         g = map(mouseX, 0, width, 0, 32);
         b = map(mouseX, 0, width, 0, 255);

    }

    //have to call setup again if you want movement
    setup(r, g, b);

}


function drawOut() {
   //circles drawn outward

    positionX = positionX  + .5;
    positionY = positionY + .5;

    //controls the spacing between the balls 
    angle = angle + (mouseX/ 100000);


}

For this project, I wanted to expand on the spiral drawing exercise we did in lab because I found it a fun shape to play with and thought it would create a cool optical illusion. Although subtle, I am changing several parameters such as color, ball size, ball position and angle as well as the space in between the balls. One surprising result is how much had to tap into old trig knowledge in order to calculate how to rotate the spiral just right.