Project 3 – Dynamic Drawing

For this dynamic drawing, drag your mouse across the screen. The more left you drag the mouse, the color diagrams will expand inwards. Dragging your mouse downwards will expand the circles vertically, creating an overlap of both colors and alpha values. This will mean when you drag your mouse to the bottom right corner, there will be a large pink-white shape taking up most of the screen.

csavitzv_03
//Cole Savitz-Vogel
//csavitzv
//Section A


    function setup() {
     createCanvas(600, 600);
     pixelDensity(2);
     rectMode(RADIUS);
     var morph = (dist(mouseX, mouseX, width / 2, 0))
     var span = (dist(mouseY, mouseY, height / 2, 0))
}

    function draw() {
     background(0);
     strokeWeight(3);
     stroke(255, 255, 255, 25);
     strokeJoin(ROUND);
     noSmooth();
     if (mouseIsPressed){
     push();
     blendMode(ADD);
     fill(150, 20, 110, 50);
     ellipse(300 + (morph, span, 100, 300), 75, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 100, 300), 100, (5 * mouseX), mouseY);
     fill(150, 20, 30, 50);
     ellipse(300 + (morph, span, 150, 300), 125, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 150, 300), 150, (5 * mouseX), mouseY);
     fill(100, 50, 10, 50);
     ellipse(300 + (morph, span, 200, 300), 175, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 200, 300), 200, (5 * mouseX), mouseY);
     fill(100, 100, 0, 50);
     ellipse(300 + (morph, span, 250, 300), 225, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 250, 300), 250, (5 * mouseX), mouseY);
     fill(50, 150, 50, 50);
     ellipse(300 + (morph, span, 300, 300), 275, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 300, 300), 300, (5 * mouseX), mouseY);
     fill(20, 100, 150, 50);
     ellipse(300 + (morph, span, 250, 300), 325, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 250, 300), 350, (5 * mouseX), mouseY);
     fill(70, 50, 150, 50);
     ellipse(300 + (morph, span, 200, 300), 375, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 200, 300), 400, (5 * mouseX), mouseY);
     fill(110, 20, 150, 50);
     ellipse(300 + (morph, span, 150, 300), 425, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 150, 300), 450, (5 * mouseX), mouseY);
     fill(150, 20, 110, 50);
     ellipse(300 + (morph, span, 100, 300), 475, (5 * mouseX), mouseY);
     ellipse(300 - (morph, span, 100, 300), 500, (5 * mouseX), mouseY);
     pop();
  }
}

Leave a Reply