Category: Project-03-Dynamic-Drawing

Jacky Tian’s Project 03

sketch

//Jacky Tian
//Section D
//yinjiet@andrew.cmu.edu
//Assignment-03-A

var unit = 50
var angle = 0
function setup() {
    createCanvas(640, 480);
    
}


function draw() {
    background(mouseX * 0.5, 70, 120);

    var len = 480 - mouseX
    var sta = 640 - mouseY 
    
    strokeWeight(4)
    stroke(170, mouseX * 0.1, 50);
    line(unit, sta * 0.1, unit, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.2, 50);
    line(unit * 2, sta * 0.2, unit * 2, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.3, 50);
    line(unit * 3, sta * 0.3, unit * 3, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.4, 50);
    line(unit * 4, sta * 0.4, unit * 4, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.5, 50);
    line(unit * 5, sta * 0.5, unit * 5, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.6, 50);
    line(unit * 6, sta * 0.6, unit * 6, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.7, 50);
    line(unit * 7, sta * 0.7, unit * 7, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.8, 50);
    line(unit * 8, sta * 0.8, unit * 8, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.9, 50);
    line(unit * 9, sta * 0.9, unit * 9, len);

    strokeWeight(4)
    stroke(170, mouseX, 50);
    line(unit * 10, sta, unit * 10, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.1, 50);
    line(unit * 11, sta * 1.1, unit * 11, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.2, 50);
    line(unit * 12, sta * 1.2, unit * 12, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.3, 50);
    line(unit * 13, sta * 1.3, unit * 13, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.1, mouseY* 0.1);
    line(unit + 25, sta * 0.1, unit, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.2, mouseY* 0.15);
    line(unit * 2 + 25, sta * 0.2, unit * 2, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.3, mouseY* 0.2);
    line(unit * 3 + 25, sta * 0.3, unit * 3, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.4, mouseY* 0.25);
    line(unit * 4 + 25, sta * 0.4, unit * 4, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.5, mouseY* 0.3);
    line(unit * 5 + 25, sta * 0.5, unit * 5, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.6, mouseY* 0.35);
    line(unit * 6 + 25, sta * 0.6, unit * 6, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.7, mouseY* 0.4);
    line(unit * 7 + 25, sta * 0.7, unit * 7, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.8, mouseY* 0.45);
    line(unit * 8 + 25, sta * 0.8, unit * 8, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.9, mouseY* 0.5);
    line(unit * 9 + 25, sta * 0.9, unit * 9, len);

    strokeWeight(2)
    stroke(70, mouseX, mouseY* 0.55);
    line(unit * 10 + 25, sta, unit * 10, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.1, mouseY* 0.6);
    line(unit * 11 + 25, sta * 1.1, unit * 11, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.2, mouseY* 0.65);
    line(unit * 12 + 25, sta * 1.2, unit * 12, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.3, mouseY* 0.7);
    line(unit * 13 + 25, sta * 1.3, unit * 13, len);

    fill(120, 80, mouseX * 0.5); // control rect color explicitly
    stroke(0);
    push();
    translate(mouseX, mouseY);
    rotate(radians(angle));
    rectMode(CENTER); // center rect around 0,0
    rect(0, 0, 50, 50);
    pop();
    angle = angle + mouseX * 0.05;


}

In this project, I explored the movement of a series of paired lines and as the mouse move across the screen, these vertex of the two paired lines move from the top of the screen to the bottom of the screen. The color of the components change from cold to warm as the mouth move from left to right as well. Moreover, there is a spinning square at the position of the mouse and the speed of the spinning varies as the mouse moves.

Shariq M. Shah – Dynamic Drawing – Project 03

shariqs_project-03

// Shariq M. Shah
// Section C
// shariqs@andrew.cmu.edu
// {Project - 03



var posC = 0;
var angle = 0;
var t = 'polar'

var midX = 320
var midY = 240



function setup() {
    createCanvas(640, 480);
    background(0);

}

function draw() {

//Rotating ellipses creating void in the center

    push();
    translate(320, 240);
    rotate(radians(angle));
    noFill()
    stroke(250, mouseX, mouseY)

    ellipse(0, 0, 100, posC + 250);

    pop();

    angle = angle + mouseY * 0.1
    posC = posC + 0.5


//Text that changes color acccording to rest of the graphic

  textSize(10);
  rectMode(CENTER)
  text('polar', midX - 10, midY);
  fill(250, mouseX, mouseY);


//If mouse is moved to center, lines become black creating vortex

  if ((mouseX > midX - 20 & mouseX < midX + 20) && (mouseY > midY - 20 & mouseY < midY + 20)) {

    push();
    translate(midX, midY);
    rotate(radians(angle));
    noFill()
    stroke(0)

    ellipse(0, 0, 100, posC + 250);

    pop();

    angle = angle - mouseY * 0.5
    posC = posC + 0.5
  }


}

In this project, I explored geometries and mathematical aggregation of an ellipse to create highly articulated and complex patterns. Using a limited amount of code, the program is able to use the user’s input to create a variety of vibrant mandala like patterns. The geometry is calibrated to leave a perfect circle in the center of the canvas, where the text changes color according to the the lines that are being drawn.

Aaron Lee- Project-03- Dynamic Drawing

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-03-Dynamic Drawing
*/

//variables

   var x = 0;
   var y = 100;

function setup() {
createCanvas(480, 640);
}


function draw() {
 
   background(0);
   stroke(0);
   fill(255, 204, 0);
   
   if (mouseY < (height / 2)) {
         fill(0);  
      }
   rect(10, 10, 30, 30);
   textSize(30);
   text('touch!', 40, 40);//if mouse is located on bottom portion of canvas, the text lights 

    fill(0);
   if (mouseY < (height / 2)) {
         fill(255, 204, 0);
      }
   rect(440, 600, 30, 30);
   textSize(30);
   text('touch!', 350, 630);//if mouse is located on top portion of canvas, the text lights

   push();

   translate(mouseX, mouseY);
   scale(mouseX/100, mouseY/100); 
   noFill();
   stroke(255);
   rotate(radians(x));
   rect(-50, -50, y, y);//scale of the rectangle changes following the movement of mouse

   x = x + mouseX/25;

   pop(); 

   stroke(255);

   //lines from top
   line(0, 0, mouseX, mouseY);
   line(40, 0, mouseX, mouseY);
   line(80, 0, mouseX, mouseY);
   line(120, 0, mouseX, mouseY);
   line(160, 0, mouseX, mouseY);
   line(200, 0, mouseX, mouseY);
   line(240, 0, mouseX, mouseY);
   line(280, 0, mouseX, mouseY);
   line(320, 0, mouseX, mouseY);
   line(360, 0, mouseX, mouseY);
   line(400, 0, mouseX, mouseY);
   line(440, 0, mouseX, mouseY);
   line(480, 0, mouseX, mouseY);
     //lines from right
   line(width, 40, mouseX, mouseY);
   line(width, 80, mouseX, mouseY);
   line(width, 120, mouseX, mouseY);
   line(width, 160, mouseX, mouseY);
   line(width, 200, mouseX, mouseY);
   line(width, 240, mouseX, mouseY);
   line(width, 280, mouseX, mouseY);
   line(width, 320, mouseX, mouseY);
   line(width, 360, mouseX, mouseY);
   line(width, 400, mouseX, mouseY);
   line(width, 440, mouseX, mouseY);
   line(width, 480, mouseX, mouseY);
   line(width, 520, mouseX, mouseY);
   line(width, 560, mouseX, mouseY);
   line(width, 600, mouseX, mouseY);
   line(width, 640, mouseX, mouseY);
        //lines from left
   line(0, 40, mouseX, mouseY);
   line(0, 80, mouseX, mouseY);
   line(0, 120, mouseX, mouseY);
   line(0, 160, mouseX, mouseY);
   line(0, 200, mouseX, mouseY);
   line(0, 240, mouseX, mouseY);
   line(0, 280, mouseX, mouseY);
   line(0, 320, mouseX, mouseY);
   line(0, 360, mouseX, mouseY);
   line(0, 400, mouseX, mouseY);
   line(0, 440, mouseX, mouseY);
   line(0, 480, mouseX, mouseY);
   line(0, 520, mouseX, mouseY);
   line(0, 560, mouseX, mouseY);
   line(0, 600, mouseX, mouseY);
   line(0, 640, mouseX, mouseY);
      //lines from bottom
   line(0, height, mouseX, mouseY);
   line(40, height, mouseX, mouseY);
   line(80, height, mouseX, mouseY);
   line(120, height, mouseX, mouseY);
   line(160, height, mouseX, mouseY);
   line(200, height, mouseX, mouseY);
   line(240, height, mouseX, mouseY);
   line(280, height, mouseX, mouseY);
   line(320, height, mouseX, mouseY);
   line(360, height, mouseX, mouseY);
   line(400, height, mouseX, mouseY);
   line(440, height, mouseX, mouseY);
   line(480, height, mouseX, mouseY);
}

I tried to make more user interactive animation with textual instruction.

Crystal-Xue-Project-03

sketch-194.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-03

var lengthInner = 130; //distance of p5js logo center to the outter edge
var edgeFlat = 50; //length of the outter edge of the p5js logo
var p5jsR = 237;
var p5jsG = 34;
var p5jsB = 93;
var backgroundR = 0;
var backgroundG = 0;
var backgroundB = 0;
var spin = 0;
var unit = 80;


function setup() {
    createCanvas(480, 640);
    angleMode(DEGREES);
}

function draw() {
	background(backgroundR, backgroundG, backgroundB);
    backgroundR = 255 - mouseY / 4 - 50;
    backgroundG = 170;
    backgroundB = 200;

    //dynamic circle background
    radius1 = dist(mouseX, mouseY, 0, 0); 
    radius2 = dist(mouseX, mouseY, 0, unit);
    radius3 = dist(mouseX, mouseY, 0, unit * 2);
    radius4 = dist(mouseX, mouseY, 0, unit * 3);
    radius5 = dist(mouseX, mouseY, 0, unit * 4);
    radius6 = dist(mouseX, mouseY, 0, unit * 5);
    radius7 = dist(mouseX, mouseY, 0, unit * 6);
    radius8 = dist(mouseX, mouseY, 0, unit * 7);
    radius9 = dist(mouseX, mouseY, 0, unit * 8);
    radius10 = dist(mouseX, mouseY, unit , 0);
    radius11 = dist(mouseX, mouseY, unit , unit);
    radius12 = dist(mouseX, mouseY, unit, unit * 2);
    radius13 = dist(mouseX, mouseY, unit, unit * 3);
    radius14 = dist(mouseX, mouseY, unit, unit * 4);
    radius15 = dist(mouseX, mouseY, unit, unit * 5);
    radius16 = dist(mouseX, mouseY, unit, unit * 6);
    radius17 = dist(mouseX, mouseY, unit, unit * 7);
    radius18 = dist(mouseX, mouseY, unit, unit * 8);
    radius19 = dist(mouseX, mouseY, unit * 2, 0);
    radius20 = dist(mouseX, mouseY, unit * 2, unit);
    radius21 = dist(mouseX, mouseY, unit * 2, unit * 2);
    radius22 = dist(mouseX, mouseY, unit * 2, unit * 3);
    radius23 = dist(mouseX, mouseY, unit * 2, unit * 4);
    radius24 = dist(mouseX, mouseY, unit * 2, unit * 5);
    radius25 = dist(mouseX, mouseY, unit * 2, unit * 6);
    radius26 = dist(mouseX, mouseY, unit * 2, unit * 7);
    radius27 = dist(mouseX, mouseY, unit * 2, unit * 8);
    radius28 = dist(mouseX, mouseY, unit * 3, 0);
    radius29 = dist(mouseX, mouseY, unit * 3, unit);
    radius30 = dist(mouseX, mouseY, unit * 3, unit * 2);
    radius31 = dist(mouseX, mouseY, unit * 3, unit * 3);
    radius32 = dist(mouseX, mouseY, unit * 3, unit * 4);
    radius33 = dist(mouseX, mouseY, unit * 3, unit * 5);
    radius34 = dist(mouseX, mouseY, unit * 3, unit * 6);
    radius35 = dist(mouseX, mouseY, unit * 3, unit * 7);
    radius36 = dist(mouseX, mouseY, unit * 3, unit * 8);
    radius37 = dist(mouseX, mouseY, unit * 4, 0);
    radius38 = dist(mouseX, mouseY, unit * 4, unit);
    radius39 = dist(mouseX, mouseY, unit * 4, unit * 2);
    radius40 = dist(mouseX, mouseY, unit * 4, unit * 3);
    radius41 = dist(mouseX, mouseY, unit * 4, unit * 4);
    radius42 = dist(mouseX, mouseY, unit * 4, unit * 5);
    radius43 = dist(mouseX, mouseY, unit * 4, unit * 6);
    radius44 = dist(mouseX, mouseY, unit * 4, unit * 7);
    radius45 = dist(mouseX, mouseY, unit * 4, unit * 8);
    radius46 = dist(mouseX, mouseY, unit * 5, 0);
    radius47 = dist(mouseX, mouseY, unit * 5, unit);
    radius48 = dist(mouseX, mouseY, unit * 5, unit * 2);
    radius49 = dist(mouseX, mouseY, unit * 5, unit * 3);
    radius50 = dist(mouseX, mouseY, unit * 5, unit * 4);
    radius51 = dist(mouseX, mouseY, unit * 5, unit * 5);
    radius52 = dist(mouseX, mouseY, unit * 5, unit * 6);
    radius53 = dist(mouseX, mouseY, unit * 5, unit * 7);
    radius54 = dist(mouseX, mouseY, unit * 5, unit * 8);
    radius55 = dist(mouseX, mouseY, unit * 6, 0);
    radius56 = dist(mouseX, mouseY, unit * 6, unit);
    radius57 = dist(mouseX, mouseY, unit * 6, unit * 2);
    radius58 = dist(mouseX, mouseY, unit * 6, unit * 3);
    radius59 = dist(mouseX, mouseY, unit * 6, unit * 4);
    radius60 = dist(mouseX, mouseY, unit * 6, unit * 5);
    radius61 = dist(mouseX, mouseY, unit * 6, unit * 6);
    radius62 = dist(mouseX, mouseY, unit * 6, unit * 7);
    radius63 = dist(mouseX, mouseY, unit * 6, unit * 8);

    fill(255);
    ellipse(0, 0, pow(radius1, 3/4), pow(radius1, 3/4));
    ellipse(0, unit, pow(radius2, 3/4), pow(radius2, 3/4));
    ellipse(0, unit * 2, pow(radius3, 3/4), pow(radius3, 3/4));
    ellipse(0, unit * 3, pow(radius4, 3/4), pow(radius4, 3/4));
    ellipse(0, unit * 4, pow(radius5, 3/4), pow(radius5, 3/4));
    ellipse(0, unit * 5, pow(radius6, 3/4), pow(radius6, 3/4));
    ellipse(0, unit * 6, pow(radius7, 3/4), pow(radius7, 3/4));
    ellipse(0, unit * 7, pow(radius8, 3/4), pow(radius8, 3/4));
    ellipse(0, unit * 8, pow(radius9, 3/4), pow(radius9, 3/4));
    ellipse(unit, 0, pow(radius10, 3/4), pow(radius10, 3/4));
    ellipse(unit, unit, pow(radius11, 3/4), pow(radius11, 3/4));
    ellipse(unit, unit * 2, pow(radius12, 3/4), pow(radius12, 3/4));
    ellipse(unit, unit * 3, pow(radius13, 3/4), pow(radius13, 3/4));
    ellipse(unit, unit * 4, pow(radius14, 3/4), pow(radius14, 3/4));
    ellipse(unit, unit * 5, pow(radius15, 3/4), pow(radius15, 3/4));
    ellipse(unit, unit * 6, pow(radius16, 3/4), pow(radius16, 3/4));
    ellipse(unit, unit * 7, pow(radius17, 3/4), pow(radius17, 3/4));
    ellipse(unit, unit * 8, pow(radius18, 3/4), pow(radius18, 3/4));
    ellipse(unit * 2, 0, pow(radius19, 3/4), pow(radius19, 3/4));
    ellipse(unit * 2, unit, pow(radius20, 3/4), pow(radius20, 3/4));
    ellipse(unit * 2, unit * 2, pow(radius21, 3/4), pow(radius21, 3/4));
    ellipse(unit * 2, unit * 3, pow(radius22, 3/4), pow(radius22, 3/4));
    ellipse(unit * 2, unit * 4, pow(radius23, 3/4), pow(radius23, 3/4));
    ellipse(unit * 2, unit * 5, pow(radius24, 3/4), pow(radius24, 3/4));
    ellipse(unit * 2, unit * 6, pow(radius25, 3/4), pow(radius25, 3/4));
    ellipse(unit * 2, unit * 7, pow(radius26, 3/4), pow(radius26, 3/4));
    ellipse(unit * 2, unit * 8, pow(radius27, 3/4), pow(radius27, 3/4));
    ellipse(unit * 3, 0, pow(radius28, 3/4), pow(radius28, 3/4));
    ellipse(unit * 3, unit, pow(radius29, 3/4), pow(radius29, 3/4));
    ellipse(unit * 3, unit * 2, pow(radius30, 3/4), pow(radius30, 3/4));
    ellipse(unit * 3, unit * 3, pow(radius31, 3/4), pow(radius31, 3/4));
    ellipse(unit * 3, unit * 4, pow(radius32, 3/4), pow(radius32, 3/4));
    ellipse(unit * 3, unit * 5, pow(radius33, 3/4), pow(radius33, 3/4));
    ellipse(unit * 3, unit * 6, pow(radius34, 3/4), pow(radius34, 3/4));
    ellipse(unit * 3, unit * 7, pow(radius35, 3/4), pow(radius35, 3/4));
    ellipse(unit * 3, unit * 8, pow(radius36, 3/4), pow(radius36, 3/4));
    ellipse(unit * 4, 0, pow(radius37, 3/4), pow(radius37, 3/4));
    ellipse(unit * 4, unit, pow(radius38, 3/4), pow(radius38, 3/4));
    ellipse(unit * 4, unit * 2, pow(radius39, 3/4), pow(radius39, 3/4));
    ellipse(unit * 4, unit * 3, pow(radius40, 3/4), pow(radius40, 3/4));
    ellipse(unit * 4, unit * 4, pow(radius41, 3/4), pow(radius41, 3/4));
    ellipse(unit * 4, unit * 5, pow(radius42, 3/4), pow(radius42, 3/4));
    ellipse(unit * 4, unit * 6, pow(radius43, 3/4), pow(radius43, 3/4));
    ellipse(unit * 4, unit * 7, pow(radius44, 3/4), pow(radius44, 3/4));
    ellipse(unit * 4, unit * 8, pow(radius45, 3/4), pow(radius45, 3/4));
    ellipse(unit * 5, 0, pow(radius46, 3/4), pow(radius46, 3/4));
    ellipse(unit * 5, unit, pow(radius47, 3/4), pow(radius47, 3/4));
    ellipse(unit * 5, unit * 2, pow(radius48, 3/4), pow(radius48, 3/4));
    ellipse(unit * 5, unit * 3, pow(radius49, 3/4), pow(radius49, 3/4));
    ellipse(unit * 5, unit * 4, pow(radius50, 3/4), pow(radius50, 3/4));
    ellipse(unit * 5, unit * 5, pow(radius51, 3/4), pow(radius51, 3/4));
    ellipse(unit * 5, unit * 6, pow(radius52, 3/4), pow(radius52, 3/4));
    ellipse(unit * 5, unit * 7, pow(radius53, 3/4), pow(radius53, 3/4));
    ellipse(unit * 5, unit * 8, pow(radius54, 3/4), pow(radius54, 3/4));
    ellipse(unit * 6, 0, pow(radius55, 3/4), pow(radius55, 3/4));
    ellipse(unit * 6, unit, pow(radius56, 3/4), pow(radius56, 3/4));
    ellipse(unit * 6, unit * 2, pow(radius57, 3/4), pow(radius57, 3/4));
    ellipse(unit * 6, unit * 3, pow(radius58, 3/4), pow(radius58, 3/4));
    ellipse(unit * 6, unit * 4, pow(radius59, 3/4), pow(radius59, 3/4));
    ellipse(unit * 6, unit * 5, pow(radius60, 3/4), pow(radius60, 3/4));
    ellipse(unit * 6, unit * 6, pow(radius61, 3/4), pow(radius61, 3/4));
    ellipse(unit * 6, unit * 7, pow(radius62, 3/4), pow(radius62, 3/4));
    ellipse(unit * 6, unit * 8, pow(radius63, 3/4), pow(radius63, 3/4));


    //p5js logo

    //color changes
    p5jsR = 220;
    p5jsG = mouseY / 4 + 10; 
    p5jsB = mouseY / 4 + 40;
    
    translate(mouseX, mouseY);

    //size of the logo changes
    lengthInner = dist(mouseX, mouseY, width / 2, height / 2);
    edgeFlat = dist(mouseX, mouseY, width / 2, height / 2) / 2;

    //logo spins
    spin = pow(mouseY, 1.05);

    //drawing the logo
    //top part
    noStroke();
    rotate(spin);
    fill(p5jsR, p5jsG, p5jsB);
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);

    //upper right part
    rotate(72);
    noStroke();
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);

    //lower right part
     rotate(72);
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);

    //lower left part
    rotate(72);
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);
    
    //upper left part
    rotate(72);
    rect(- edgeFlat / 2, 0, edgeFlat, lengthInner);

 }

I created this dynamic drawing inspired by the geometry of p5js logo. Not only the geometry is responsive to the position of the mouse, but the circle background. I also tried to create a color contrast between the main logo and the background.

Nadia Susanto – Project 03 – Dynamic Drawing

sketch

/* Nadia Susanto
   Section B
   nsusanto@andrew.cmu.edu
   Project-03-Dynamic Drawing */

var angle = 0;

function setup() {
    createCanvas(640, 480);

}

function draw() {
    background("black");

    //background color changes dependent on mouseX
    if (mouseX > width/2) {
      background(0, 0, 88);
    }

    noStroke();
    //sun
    fill(255, 216, 0);
    ellipse(320, 240, 150, 150);
    //mercury (in solar system is fastest to orbit sun)
    fill(223, 126, 83);
    push();
    translate(320, 240);
    rotate(radians(angle*2.5));
    ellipse(50, 50, 50, 50);
    pop();
    //venus (in solar system is 2nd fastest to orbit sun)
    //rotates counter-clockwise
    fill(222, 184, 135);
    push();
    translate(320, 240);
    rotate(radians(-angle*1.5));
    ellipse(75, 100, 75, 75);
    pop();
    //earth (in solar system is 3rd fastest to orbit sun)
    fill(57, 118, 40); //green circle
    push();
    translate(320, 240);
    rotate(radians(angle));
    ellipse(150, 100, 100, 100);
    pop();
    //mars (in solar system is 4th fastest to orbit sun)
    fill(165, 42, 42);
    push();
    translate(320, 240);
    rotate(radians(angle*0.5));
    ellipse(200, 100, 85, 85);
    pop();
    angle = angle + 1

    //new planet size dependent on mouseX and mouseY
    // supposed to resemble neptune, uranus, or pluto (very slow to orbit)
    if (mouseX > 395 || mouseY > 315) {
    fill(30, 144, 255);
    push();
    translate(320, 240);
    rotate(radians(angle/4));
    circle(width-mouseX, height-mouseY, height - mouseY, 150);
    }

    //comet can move in regards to mouse movement
    if (mouseX < 250 & mouseY < 300) {
      fill(255, 100, 0);
      triangle(mouseX, mouseY, mouseX, mouseY*2, mouseX*4, mouseY*4);
      fill(119,136,153);
      ellipse(mouseX*4, mouseY*4, mouseX, mouseY);
    }

    //blackhole spins when pressed
    if (mouseIsPressed) {
      fill("black");
      push();
      translate(320, 240);
      rotate(-angle);
      ellipseMode(CENTER);
      ellipse(150, 100, 640, 480);
      pop();
      angle = angle + 5
    }

}

I was inspired by the solar system, so I tried having multiple planets shown with its orbit around the sun and made each speed correspond to how fast or slow they actually orbit the sun in real life. There is a comet shown with certain mouse directions and I tried to make it move with the mouse. If clicked on, I also incorporated a spinning black hole to “terrorize” the universe. Overall, the process was tough as I was not used to the push pop rules and rotation and translation, but I am happy with the finished product.

Katrina Hu – Project 03 – Dynamic Drawing

sketch_project3

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project-03-Dynamic Drawing*/

var sunW = 50
var sunH = 50

function setup() {
    createCanvas(640, 480);
}

function draw() {
    //change background color
    background (191 - mouseY, 228 - mouseY, 255 - mouseY);
    noStroke();
    //change sun size
    if (mouseY < height / 2.5) {
        sunW = height / 3 - mouseY;
        sunH = height / 3 - mouseY;
    } 
    else {
        sunW = 10
        sunH = 10;
    }
    //draw sun
    //sun moves by mouseY
    fill (255, 247, 158);
    ellipse (300 - mouseY, 200 - mouseY, sunW, sunH);
    //draw houses
    //color of house lightens by mouseY/3
    //shape of house changes 
    fill(79 + mouseY / 3, 68 + mouseY / 3, 61 + mouseY / 3);
    rect(50, 380, 100 + mouseY / 25, 100);
    rect(200, 380, 100 + mouseY / 25, 100);
    rect(350, 380, 100 + mouseY / 25, 100);
    rect(500, 380, 100 + mouseY / 25, 100);
    triangle(100, 330, 30, 380, 170, 380);
    triangle(250, 330, 180, 380, 320, 380);
    triangle(400, 330, 330, 380, 470, 380);
    triangle(550, 330, 480, 380, 620, 380);

}

This project changes four different aspects of image elements – size, shape, position, and color. It was a fun project to do, as it was interesting to experiment with how mouse position would affect these elements.

Cathy Dong-Project-03-Dynamic Drawing

sketch

/* Cathy Dong
   Section D
   yinhuid
   Project 3-Dynamic Drawing
*/


var skyR = 139;
var skyG = 212;
var skyB = 229;
var moonCut = 0;
var sunDia = 100;
var starAngle = 0;
var starR = 249;
var starG = 215;
var starB = 81;
var starW = 10;
var starH = 12;

function setup() {
	createCanvas(640, 480);
	
}

function draw() {
	background(skyR, skyG, skyB);
	var winR = 254;
	var winG = 221;
	var winB = 2;


	//stars
	noStroke();
	fill(starR,starG,starB);
	//star 1
	push();
	translate(640 - mouseX, 100);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 2
	push();
	translate(800 - mouseX, 150);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 3
	push();
	translate(760 - mouseX, 120);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 4
	push();
	translate(900 - mouseX, 20);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 5
	push();
	translate(500 -mouseX, 50);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 6
	push();
	translate(760 - mouseX, 80);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 7
	push();
	translate(1000 - mouseX, 60);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 8
	push();
	translate(1500 - mouseX, 50);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 9
	push();
	translate(1200 - mouseX, 30);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 10
	push();
	translate(320 - mouseX, 100);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 11
	push();
	translate(200 - mouseX, 130);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();


	//trinkle stars
	starAngle += mouseX;


	//night
	if (mouseX > width / 2) {
		//star size
		starW = 10;
		starH = 12;
		//show star
		starR = 249;
		starG = 215;
		starB = 81;
		//sky color
		skyR = 61;
		skyG = 80;
		skyB = 92;
		//moon
		noStroke();
		fill(255, 216, 0);
		ellipse(mouseX, mouseX - 200, 200,200);
		//moon change
		noStroke();
		fill(skyR, skyG, skyB);
		moonCut = map(mouseX, 240, 640, 0, 400);
		ellipse(mouseX - 75, mouseX - 200, moonCut, moonCut);
	}

	//morning
	else if (mouseX <= width / 2) {
		//hide star
		starR = 255;
		starG = 240;
		starB = 154;
		//star size
		starW = 42 - mouseX / 10;
		starH = 42 - mouseX / 10 + 2;
		//sky color
		skyR = 156;
		skyG = 215;
		skyB = 255;
		//window color
		winR = 255;
		winG = 240;
		winB = 154;
		//sun
		noStroke();
		fill(255, 240, 154);
		sunDia = map(mouseX, 0, 320, 30, 200);
		ellipse(mouseX, height - mouseX - 40, sunDia, sunDia);

	}



	//haunted house black
	noStroke();
	fill(0);
	beginShape();
	vertex(270, 416);
	vertex(253, 323);
	vertex(242, 323);
	vertex(269, 270);
	vertex(245, 257);
	vertex(235, 206);
	vertex(251, 206);
	vertex(254, 253);
	vertex(273, 264);
	vertex(284, 236);
	vertex(325, 273);
	vertex(324, 160);
	vertex(315, 159);
	vertex(333, 132);
	vertex(350, 93);
	vertex(354, 138);
	vertex(367, 166);
	vertex(358, 164);
	vertex(370, 238);
	vertex(375, 234); 
	vertex(384, 278); 
	vertex(353, 351);
	vertex(324, 415);
	endShape(CLOSE);



	//haunted house color left chimney
	noStroke();
	fill(10, 24, 25);
	beginShape();
	vertex(251, 206);
	vertex(254, 253);
	vertex(273, 264);
	vertex(275, 260);
	vertex(262, 250);
	vertex(266, 218);
	endShape(CLOSE);

	//haunted house color left roof side
	noStroke();
	fill(20, 53, 60);
	beginShape();
	vertex(335, 310);
	vertex(398, 343);
	vertex(389, 344);
	vertex(320, 314);
	endShape(CLOSE);

	//haunted house color left wall
	noStroke();
	fill(39, 83, 94);
	beginShape();
	vertex(320, 314);
	vertex(389, 344);
	vertex(377, 420);
	vertex(325, 415);
	endShape(CLOSE);

	//haunted house upper color roof
	noStroke();
	fill(10, 24, 25);
	beginShape();
	vertex(350, 93);
	vertex(354, 138);
	vertex(367, 166);
	vertex(389, 176);
	vertex(372, 129);
	endShape(CLOSE);

	//haunted house color upper roof side
	noStroke();
	fill(20, 53, 60);
	beginShape();
	vertex(367, 166);
	vertex(389, 176);
	vertex(379, 177);
	vertex (357, 164);
	endShape(CLOSE);

	//haunted house color upper roof wall
	noStroke();
	fill(39, 83, 94);
	beginShape();
	vertex(370, 238);
	vertex(353, 252);
	vertex(358, 164);
	vertex(378, 176);
	endShape(CLOSE);

	//haunted house color right roof
	noStroke();
	fill(10, 24, 25);
	beginShape();
	vertex(375, 234);
	vertex(384, 278);
	vertex(412, 306);
	vertex(401, 273);
	endShape(CLOSE);

	//haunted house color right roof side
	noStroke();
	fill(20, 53, 60);
	beginShape();
	vertex(384, 278);
	vertex(412, 306);
	vertex(407, 308);
	vertex(378, 278);
	endShape(CLOSE);

	//haunted house color right wall
	noStroke();
	fill(39, 83, 94);
	beginShape();
	vertex(407, 308);
	vertex(378, 278);
	vertex(366, 312);
	vertex(390, 337);
	endShape(CLOSE);


	//haunted house color left roof
	noStroke();
	fill(10, 24, 25);
	beginShape();
	vertex(284, 236);
	vertex(325, 273);
	vertex(398, 343);
	vertex(335, 310);
	endShape(CLOSE);

	//front ground
	noStroke();
	fill(0);
	beginShape();
	curveVertex(0, 640);
	curveVertex(0, 360);
	curveVertex(0, 360);
	curveVertex(68, 400);
	curveVertex(137, 412);
	curveVertex(183, 423);
	curveVertex(225, 413);
	curveVertex(295, 410);
	curveVertex(254, 413);
	curveVertex(320, 410);
	curveVertex(409, 423);
	curveVertex(477, 403);
	curveVertex(550, 400);
	curveVertex(640, 425);
	curveVertex(640, 480);
	endShape(CLOSE);

	//windows lights
	noStroke();
	fill(winR, winG, winB);
	//left long
	beginShape();
	vertex(279, 329);
	vertex(283, 364);
	vertex(298, 362);
	vertex(293, 331);
	vertex(288, 324);
	vertex(283, 324);
	endShape(CLOSE);
	//left ellipse
	ellipse(289, 286, 18, 22);
	//upper short
	beginShape();
	vertex(353, 272);
	vertex(368, 277);
	vertex(362, 293);
	vertex(351, 286);
	endShape(CLOSE);
	//upper long
	beginShape();
	vertex(331, 205);
	vertex(347, 207);
	vertex(347, 172);
	curveVertex(340, 166);
	curveVertex(333, 171);
	endShape(CLOSE);


	//window frame
	noFill();
	stroke(0);
	strokeWeight(1);
	//upper long
	line(333, 177, 348, 180);
	line(331, 186, 348, 188);
	line(332, 194, 349, 197);
	line(339, 166, 339, 206);
	//left long
	line(279, 335, 294, 332);
	line(281, 344, 296, 342);
	line(280, 354, 296, 351);
	line(284, 322, 292, 364);


	//window no lights
	noStroke();
	fill(0);
	//window 1
	beginShape(); 
	vertex(330, 323);
	vertex(330, 340);
	vertex(347, 348);
	vertex(348, 334);
	endShape(CLOSE);
	//window 2
	beginShape(); 
	vertex(329, 362);
	vertex(331, 376);
	vertex(348, 382);
	vertex(348, 368);
	endShape(CLOSE);
	//window 3
	beginShape();
	vertex(383, 293);
	vertex(378, 305);
	vertex(391, 317);
	vertex(398, 308);
	endShape(CLOSE);
	//window 4
	beginShape();
	vertex(364, 172);
	vertex(362, 205);
	vertex(370, 207);
	vertex(373, 182);
	endShape(CLOSE);
	//door outline
	beginShape();
	vertex(360, 370);
	vertex(357, 450);
	vertex(368, 450);
	vertex(376, 377);
	endShape(CLOSE);

	//door window light
	noStroke();
	fill(winR, winG, winB);
	beginShape();
	vertex(363, 375);
	vertex(363, 388);
	vertex(371, 391);
	vertex(371, 380);
	endShape(CLOSE);

	//upper chimney
	noStroke();
	fill(0);
	beginShape();
	vertex(356, 123);
	vertex(365, 114);
	vertex(368, 100);
	vertex(365, 98);
	vertex(376, 77);
	vertex(380, 102);
	vertex(376, 102);
	vertex(373, 119);
	vertex(363, 127);
	endShape(CLOSE);
}

In this Dynamic Drawing project, I made a haunted house. I used color shades to add a 3D effect. By moving mouse left and right, the scene changes from night to morning. The moon and sun changes shape, location, and dimension, whereas the stars at night changes rotation speed and direction. The haunted house itself changes light color.

Xiaoyu Kang – Project 03 – Dynamic Drawing


sketch

//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-03

var cir = 20;
var angle = 0;

function setup() {
    createCanvas(480, 640);
}

function draw() {
//background color change as mouse moves down
background(400-mouseY,245,255);
//sun
    //sun shows when the mouse moves to the top of the canvas
     fill("yellow");
    if (mouseY<=200) {
        fill(255,242,122);
        ellipse(50,20,200,200); 
        triangle(10,100,50,100,30,200);
        triangle(40,60,100,30,150,200);
        triangle(60,70,30,0,230,60);
        triangle(50,20,0,0,200,0);
    }
    //sun disappears
    if (mouseY>200) {
        fill(400-mouseY,245,255); 
    }
//bubbles
    fill("white");
    //bubble gets bigger as they move up
    ellipse(50,640-mouseY-30,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(100,640-mouseY+230,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(150,640-mouseY+70,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(270,640-mouseY+150,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(360,640-mouseY,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(300,640-mouseY+370,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(470,640-mouseY+270,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(160,640-mouseY+490,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(530,640-mouseY+520,cir+0.1*mouseY,cir+0.1*mouseY);
//jelly fish body
    noStroke();
    //color change on body
    fill(190,900-mouseY,900-mouseY);
    //moves vertically
    ellipse(240,mouseY,180,140);
    ellipse(180,mouseY+60,70,50);
    ellipse(240,mouseY+70,70,50);
    ellipse(300,mouseY+60,70,50);
//jelly fiish eyes
    noStroke();
    fill("white");
    ellipse(190,mouseY,30,30);
    ellipse(290,mouseY,30,30);
    fill("grey");
    ellipse(190,mouseY,20,20);
    ellipse(290,mouseY,20,20);
//jelly fish blush
    fill(224,196,218);
    ellipse(190,mouseY+25,40,10);
    ellipse(290,mouseY+25,40,10);
    
}

da

For this project, I was inspired by how the color of sea water changes from light to dark as it gets deeper. So I tried to create an image of a sea creature swimming in the ocean following the movement of the mouse. When the mouse moves down, the background color gets darker and some bubbles appears. When the mouse moves up the sun appears.

Lauren Park- Project-03- Dynamic Drawing

sketch

function setup() {
  createCanvas(640, 480);
  noStroke();
   
}
 
function draw() {
  background(random(mouseX, mouseY));
  fill(random(355,300,150));
  
  var colorR = (mouseX, mouseY);
  var colorB =  (mouseX, mouseY);
  var colorG = (random, mouseY);
  
  //background color changes as mouse moves right
   if (mouseX < 0){
    background(0);
        }
   if (mouseX > 0){
    background(0);
        }
   if (mouseX > 100){
    background(colorG, 270, 37);
        }
   if (mouseX > 300){
    background(250, 150, colorB);
        }
     
    var moveX = random(0, mouseX/5);
    var moveY = random(0, mouseY/5);
    var shakeX = (0, mouseX/7);
  
   //vibrates from 0 to 530 and above when mouse moves right
   if (mouseX > 0){
      var moveX=0;
        }
   if (mouseX > 0){
      var moveY=0
        }
   if (mouseX > 0){
    var shakeX = 0
        }
   if (mouseX > 15){
       var shakeX = (0, mouseX/100);
        }
   if (mouseX > 70){
       var moveX = random(0, mouseX/30);
        }
   if (mouseX > 250){
       var moveX = random(0, mouseX/15);
        }
   if (mouseX > 400){
       var moveX = random(0, mouseX/5);
        }
   if (mouseX > 530){
       var moveX = random(0, mouseX/2);
        }
  
  
   //increases and shakes bubbles when mouse move right
   fill(211, 242, 255);
   if (mouseX > 300)   
   ellipse(10+ moveX, 150 + moveY, 110 + moveX, 110 +          moveY); //light blue
   fill(281, colorG, 255);
   if (mouseX > 200)
   ellipse (80 + moveX, 235 + moveY, 130 + moveX, 130 + moveY);
   fill(129, 255, 104);
   if (mouseX > 350)
   ellipse(270 + moveX, 320 + moveY, 90 + moveX, 90 + moveY);         //green
   fill(57, 189, 232);
   if (mouseX > 300)
   ellipse(380 + moveX, 250 + moveY, 65 + moveX, 65 +   moveY); //blue
   fill(57, 232, 179);
   if (mouseX > 350)
   ellipse( 420 + moveX, 70 + moveY, 150 + moveX, 150 + moveY); //dark green
   fill(255, 142, 210);
   if (mouseX > 450)
   ellipse( 475 + moveX, 320 + moveY, 100 + moveX, 100 + moveY); //pink
  
  
   fill(81, 238, 255);
   if (mouseX > 450)
   ellipse(65 + moveX, 75 + moveY, 150 + moveX, 150 + moveY);
   fill(255, 251, 98);
   if (mouseX > 550)
   ellipse( 530 + moveX, 180 + moveY, 130 + moveX, 130 + moveY);
  
    
   //duck facial features shake when mouse moves right
    stroke(0);
    strokeWeight(2);   
    fill(255);
    // hair
    ellipse(305 + shakeX, 355 + moveY, 12 + moveX, 25 + moveY) 
    fill(255);
    ellipse(295 + shakeX, 355 + moveY, 12 + moveX, 30 + moveY)
    //face
    fill(255);
    ellipse(300 + shakeX, 460 + moveY, 270 + moveY, 190 + moveX);
    // beak
    fill(255, 184, 56);
    ellipse(297 + shakeX, 460 + moveY, 90 + moveX, 30 + moveY);
    // eyes
    fill(0);
    ellipse(350 + shakeX, 435 + moveY, 20 + moveX, 18 + moveY);
    fill(0);
    ellipse(240 + shakeX, 435 + moveY, 20 + moveX, 18 + moveY);
    //pupils
    fill(255);
    ellipse(350 + shakeX, 434 + moveY, 15 + moveX, 13 + moveY) 
    ellipse(240 + shakeX, 434 + moveY, 15 + moveX, 13 + moveY); 
    //mouth line
    stroke(0);
    strokeWeight(2);
    line(320 + shakeX, 460 + moveY, 253 + moveX, 460 + moveY);
   
  
    
    //number of text increases and shakes when mouse moves     right
    fill('red');
    stroke(237,206,229);
    strokeWeight(2);
  
    if (mouseX > 50) {
    textFont('Helvetica');
    textSize(47);
    text('HUNGRY?', 100 + moveX, 150 + moveY);
    if (mouseX > 100) 
    text('HUNGRY?', 360 + moveX, 100 + moveY); //dark green
    if (mouseX > 200) 
    text('HUNGRY?', 190 + moveX, 325 + moveY);
    if (mouseX > 300) 
    text('HUNGRY?', 400 + moveX, 340 + moveY); 
    if (mouseX > 300) 
    text('HUNGRY?', 20 + moveX, 250 + moveY); //light pink
    if (mouseX > 400) 
    text('HUNGRY?', 310 + moveX, 250 + moveY);
    if (mouseX > 500) 
  
    text('HUNGRY?', 10 + moveX, 80 + moveY);
    
  }
  
  


   
      
}

This project was very interesting in ways where I was able to create more of a story by having objects change and be put into motion by moving the mouse. I wanted to express a feeling of hunger through the image. It was a difficult and challenging process to have the image move back and forth with the mouse, but also to have them vibrate to express hunger and more of an emotion.

William Su – Project 03 – Dynamic Drawing

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project-03

x = 100;
y = 100;
angle1 = 0;
segLength = 30;

function setup() {
  createCanvas(640, 480);
  strokeWeight(10);
  stroke(0);
}

function draw() {
  r = 640 - mouseX; // Used for color and shape length
  g = 480 - mouseY; // color
  b = (mouseX + mouseY)/4; // messing with more color

  background(0);

  //Calculating angles for rotation based on mouseX and mouseY
  dx = mouseX - x;
  dy = mouseY - y;
  angle1 = atan2(dy, dx);
  x = mouseX - cos(angle1) * segLength;
  y = mouseY - sin(angle1) * segLength;

  //Line Color and Line Weight
  stroke(r + 100, g + 100, b + 100); // Changes color based on mouse movement.
  strokeWeight(10 + (mouseX / 100)); // Gets thicker as you move mouse right.

// segLength and r changes length of line and also center of rotation.

// Top left
  push();
  translate(width/4, height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Bottom right
  push();
  translate(3 * width/4, 3 * height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Top Right
  push();
  translate(3 * width/4, height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Bottom Left
  push();
  translate(width/4, 3 * height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();
}

In this project, I tried making a isometric, rotating prism. I wasn’t able to work out the faces but I think the gist of it is shown with the 4 segments shown. The segments change size (thickness and length), color, and orientation depending on where your mouse is in the window.