Category: Project-03-Dynamic-Drawing

Rachel Shin – Project 03

For this project, I decided to start with the rotating squares that I learned in recitation. From there, I layered shapes with differing positions, sizes, angles, and a change in background color to create a cohesive art piece. I thought it was fun to experiment with stroke, stroke colors, shapes, layering, rotating, and mouseX/mouseY positions to create a moving art piece.

reshin-03-project-dynamic

//Rachel Shin
//reshin@andrew.cmu.edu
//15-104
//Section B
//Project 03- Dynamic Drawing

    var angle = 0;
    var angle2 = 0;

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

function draw() {
    
    //background: color change based on mousex
    background(109, 140, 148);

    if (mouseX > width/2) {
        background(202, 220, 224);
    }

    //circle1: size change, position same
    noFill();
    strokeWeight(10);
    stroke(230, 197, 211);
    ellipse(50, 50, mouseX, mouseX);

    //circle2: size change, position same
    noFill();
    strokeWeight(20);
    stroke(194, 79, 83);
    ellipse(430, 430, -mouseX, -mouseX);

    //circle3: size change, position same
    noFill();
    strokeWeight(30);
    stroke(79, 121, 194);
    ellipse(430, 50, mouseX, mouseX);

    //circle4: size change, position same
    noFill();
    strokeWeight(40);
    stroke(139, 194, 79);
    ellipse(50, 430, -mouseX, -mouseX);

    //rect 1: size change, position same
    noStroke();
    fill(139, 173, 137);
    rect(20, 50, (-mouseX/3), (mouseY/2));

    //rect2: size change, position same
    noStroke();
    fill(246, 250, 190);
    rect(20, 460, mouseX/5, mouseY/8);

    //circle3: size same, position change
    fill(173, 146, 108);
    ellipse(mouseX/2, mouseY/3, 100, 200);



    //spinning squares
    noStroke();
    fill('white');
    push();
    rotate(degrees(angle));
    rect(mouseX, 5, 50, 50);
    pop();
    angle = angle + 2;

    
    push();
    translate(195,195);
    rotate(degrees(angle2));
    rect(mouseX-100, 5, 50, 50);
    pop();
    angle2 = angle2 - 2;

    //baymax
    if (mouseY > height/2) {
        //if vertical position is at 240 or more, draw baymax
        noStroke();
        fill('white');
        ellipse (200, 300, 100, 70);

        noStroke();
        fill('black');
        ellipse (175, 300, 15, 15);

        noStroke();
        fill('black');
        ellipse (225, 300, 15, 15);

        noStroke();
        fill('black');
        rect (175, 300, 50, 5);

        text("HI, I'M BAYMAX, YOUR PERSONAL HEALTH CARE COMPANION", 50, 400, 400, 50);
    }


}

Sarah Kang – Project 03- Dynamic Drawing

dydraw

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-03-dynamic-drawing

var angle = 0; //angle for rectangle rotation
var ogX = 0;
var ogY = 0;

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

function draw() {
    background(0);
    strokeWeight(1.5);
    stroke(255, 255, 255);

    //top row small rectangles

    fill(mouseY, 102, mouseX);
    push();
    translate(70, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(170, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(270, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(370, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(470, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(570, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();

    // middle medium rectangles, rotating in opposite direction

    fill(mouseX, 166, mouseY);
    push();
    translate(600, 230);
    rotate(radians(angle));
    rect(ogX, ogY, mouseX / 4, mouseY / 4);
    pop();
    push();
    translate(450, 230);
    rotate(radians(angle));
    rect(ogX, ogY, mouseX / 4, mouseY / 4);
    pop();
    push();
    translate(300, 230);
    rotate(radians(angle));
    rect(ogX, ogY, mouseX / 4, mouseY / 4);
    pop();
    push();
    translate(150, 230);
    rotate(radians(angle));
    rect(ogX, ogY, mouseX / 4, mouseY / 4);
    pop();
    push();
    translate(0, 230);
    rotate(radians(angle));
    rect(ogX, ogY, mouseX / 4, mouseY / 4);
    pop();

    //bottom big rectangles

    fill(mouseX, 255, mouseY);
    push();
    translate(100, 420);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 2, mouseY / 2);
    pop();
    push();
    translate(320, 420);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 2, mouseY / 2);
    pop();
    push();
    translate(540, 420);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 2, mouseY / 2);
    pop();

    angle = angle + 5; // rotation speed and direction

    //changing rotation speed, controlled by mouseX

    if(mouseX >= 320){
      angle = angle + 10;
    }
}

For this assignment, I was inspired by the parametric graphic references provided in the guidelines and wanted to emulate it through my drawing.

SooA Kim: Project-03-Dynamic-Drawing


sketch_1

The assignment was pretty challenging for me this week. I wish that I had more time to understand and be comfortable using min()/max ()and constraint(). I mainly focused on understanding how each shape is made by different application of motion functions.

/* 
   SooA Kim
   Section D
   sookim
   Project 3 - Dynamic Drawing 
*/

var c1 = 100;
var c2 = 120;
var c3 = 210;
var angle = 0;

function setup() {
    createCanvas(640, 460);
    rectMode(CENTER);
}

function draw() {
    background(c1, c2, c3);
    noStroke();

    //background color
    if (mouseX > width/3) {
        background(0);
    }
    
    //pink circles and rectangles with symmetry
    fill(255, 100, 100);
    var m = max(min(mouseX, 640),0);
    var size = m * 320.0 / 640.0;
    rect(10 + m * 100.0 / 640.0, 230, size, size);
    rect(width - m * 100.0 / 640.0, 230, size, size);
    ellipse(10 + m * 320.0 / 640.0, 100, size + 50, size);
    ellipse(width - m * 320.0 / 640.0, 100, size + 50, size);

    //blue rectangle with rotation in the middle
    fill(0, 0, 255);
    var x1 = max(min(mouseX, 100), 0);
    push();
    translate (340, 230);
    rotate(radians(angle));
    rect(x1, m , 100, 100);
    pop();
    angle = angle + 1

    //circle green
    fill(100, 255, c3);
    var y = min(100, mouseY); 
    ellipse (mouseX, y + 100, 50, 200);
}

Hyejo Seo – Project-03: Dynamic Art


sketch

/* 
Hyejo Seo
Section A
hyejos@andrew.cmu.edu
Project-03- Dynamic Art
*/ 

var circleY = 250;  
var cSpeed = 1; 
var sunDia = 350;

function setup() {
  createCanvas(450,500);
}

function draw() {
    background(180, mouseY + 70, mouseY + 100);
//sun
fill(255, 100, 147);
noStroke();

if(mouseY >= 150){
  sunDia = 350; 
} else {
  sunDia = mouseY /2;
}
circle(225, 290, sunDia); 
  
//smoke 
    circleY = circleY - cSpeed; 
    fill(198, 207, 220);
    noStroke();
    circle(220, circleY, 100);
    if(circleY >= height){
      circleY = -cSpeed;
     } 
    circle(250, circleY, 90);
    if(circleY > height){  
      cSpeed = cSpeed;
     }
    circle(200, circleY + 70, 80);
    if(circleY + 70 > height){    
      cSpeed = cSpeed;
    }
    circle(250, circleY + 60, 100);
    if(circleY + 50 > height){    
      cSpeed = cSpeed;
    }
    circle(210, circleY - 50, 90);
    circle(260, circleY - 50, 100);
    if(circleY - 50 > height){
      cSpeed = cSpeed;
    } 
    circle(210, circleY - 100, 80);
    circle(250, circleY - 100, 90);
    if(circleY - 100 > height){
      cSpeed = cSpeed;
    } 
    circle(210, circleY - 80, 100);
    if(circleY - 50 > height){
      cSpeed = cSpeed;
    } 

    if(circleY <= -100){
      circleY = height;
    }
//Volcano
fill(234, 51, 28);
if(mouseY <= 150){
  beginShape();
  curveVertex(170, 500);
  curveVertex(170, 500);
  curveVertex(170, 280);
  curveVertex(90, 150);
  curveVertex(130, 150);
  curveVertex(150, 120);
  curveVertex(180, 145);
  curveVertex(220, 80);
  curveVertex(250, 150);
  curveVertex(280, 130);
  curveVertex(280, 170);
  curveVertex(290, 165);
  curveVertex(320, 150);
  curveVertex(380, 145);
  curveVertex(310, 250);
  curveVertex(330, 500);
  curveVertex(330, 500);
  endShape();
} else {
  endShape();
    beginShape();
    curveVertex(170, 500);
    curveVertex(170, 500);
    curveVertex(170, 280);
    curveVertex(310, 280);
    curveVertex(200, 500);
    curveVertex(200, 500);
    endShape();
}
// mountain
    fill (170, 140, 99);
    noStroke();
    quad(0, 500, 450, 500, 350, 350, 100, 350); 
    
// mountain peak
    fill(170, 140, 99);
    beginShape();
    curveVertex(100, 350);
    curveVertex(100, 350);
    curveVertex(140, 280);
    curveVertex(170, 250);
    curveVertex(210, 270);
    curveVertex(240, 260);
    curveVertex(270, 290);
    curveVertex(310, 250);
    curveVertex(350, 350);
    curveVertex(350, 350);
    endShape();

// mountain body detail 
    stroke(67,42, 29);
    strokeWeight(3);
    line(50, 500, 150, 300);
    line(140, 450, 190, 310);
    line(200, 490, 230, 300);
    line(250, 450, 245, 300);
    line(300, 500, 280, 320);
    line(350, 500, 300, 300);
}

For this project, I have created an interactive piece of a volcano explosion – from the moment of the lava boiling, which was depicted by the smoke to the explosion. I had fun and learned a lot experimenting with interactive/conditional functions. 

Claire Yoon – Project 03 – Dynamic Drawing

sketch

/*Claire Yoon
  Section E
  claireyo@andrew.cmu.edu
  Assignment-03
  */

function setup() {
    createCanvas(480, 640);
}
function draw() {
    // sky from night to day
    background (138 - mouseY, 225 - mouseY, 255 - mouseY)

// pulling up blinds
    push();
    noStroke ();
    fill(237,236, 230);
    rect(0, 60 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 120 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 180 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 240 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 300 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 360 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 420 - mouseY, 480, 50 + mouseY / 50);
    rect(0, 480 - mouseY, 480, 50 + mouseY / 50);
    fill(216,213, 195);
    rect(0, 0, 480, 55);
// counter
    fill(166,124,82);
    noStroke();
    rect(0,560,480,80);
    pop();
}

I really enjoyed playing around with all the different types of elements we learned so far such as position, translating, rotating, and use of color.

Mari Kubota- Project- 03- Dynamic-Drawing

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 3
*/
var x = 300;
var y = 300;
var diameter = 8;
var diffx = 0;
var diffy = 0;
var targetX = 300;
var targetY = 300;
var angle = 0;

function setup() {
    createCanvas(640, 480);
    
}
//following mouse
let value = 0;
function mouseMoved() {
    value = value + 5;
    if (value > 255) {
    value = 0;
}
}

function draw(){
    background (200-mouseY,220-mouseY,250);
//trees

    translate(100 - mouseX/2, 0);
    fill(0);
    rect (-100, 400,1050,80);

    rect (30,200,20,200);
    triangle (40,150,80,350,0,350);

    rect (180,200,20,200);
    triangle (190,150,100,350,280,350);

    rect (330,200,20,200);
    triangle (340,150,380,350,300,350);

    rect (530,200,20,200);
    triangle (530,100,640,350,440,350);

    rect (750,200,20,200);
    triangle (750,100,860,350,660,350);

//firefly
    fill(value-100, value, value-200);
    diffx = mouseX - x;
    diffy = mouseY - y;
    x = x + 0.1*diffx;
    y = y + 0.1*diffy;
    noStroke();
    ellipse(x, y, diameter, diameter);

}

In this project, I created a drawing of a firefly flying through the forest. The color of the sky, the movement of the trees, and the movement of the firefly are all controlled by the mouse.

Project 03 – Dynamic Drawing


sketch

// Deklin Versace Section E
var eyeX = 700;
var eyeY = 250;
var diameter = 75;
var r = 100;
var g = 50;
var b = 50;
var handY = 500;
var handX = 375;

function setup() {
    createCanvas(900, 900);
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
}

function draw() {
  background(r, g, b);
  noStroke();
  fill(r - 60, g - 60, b - 60);
  quad(width / 2 - 150, eyeY, width / 2 + 150, eyeY, 485, 900, 415, 900);
  fill(r - 60, g - 60 ,b - 60);
  ellipseMode(CENTER);
  ellipse(width / 2, eyeY, eyeX + abs(700 - eyeX), abs(450 - eyeX / 3));
  headH = abs(450 - eyeX / 3);
  headW = eyeX + abs(700 - eyeX);
  fill(240);
  ellipse(eyeX, eyeY, diameter, diameter);
  ellipse(width - eyeX, eyeY, diameter, diameter);
  if(mouseX > 650 || mouseX < 250 || (mouseX > 400 & mouseX < 500)){
    eyeX = eyeX;
  }   else{
      eyeX = mouseX;
  }

  fill(r - 100, g - 100, b - 100);
  bezier((width / 2) - (headW / 5), eyeY + 50, (width / 2) - (headW / 5), eyeY + (headH / 2) - 50, (width / 2) + (headW / 5), eyeY + (headH / 2) - 50, (width / 2) + (headW / 5), eyeY + 50);


  strokeWeight(60);
  stroke(r - 50, g - 50, b - 50);
  line(width / 2 - 100, 420, width / 2 - 250, 420 + ((handY - 420) / 2));
  line(width / 2 + 100, 420, width / 2 + 250, 420 + ((handY - 420) / 2));
  stroke(r - 40, g - 40, b - 40);
  line(width / 2 - 250, 420 + ((handY - 420) / 2), handX, handY);
  line(width / 2 + 250, 420 + ((handY - 420) / 2), 900 - handX, handY);
  if(mouseX > 100 & mouseX < 410)
  handX = mouseX;
  else{
  handX = handX;
  }
  if(mouseY < 700){
    handY = mouseY;
  } else{
  handY = 700;
}
}
function mousePressed() {
  r = random(0, 255);
  g = random(0, 255);
  b = random(0, 255);
}

Minjae Jeong – Project 03 – Dynamic Drawing

sketch

// Minjae Jeong
// Section B
// minjaej@andrew.cmu.edu
// Project -03

var angleX = 0;
var angleY = 0;

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

function draw() {
    background((mouseX - mouseY) / 2, mouseX - mouseY, mouseY + 17); // change colors
    r = mouseX - 300;
    g = mouseY - 200;
    b = mouseX - mouseY;

    fill(mouseX / 3, 163, 223);
    push();
    translate(mouseX / 3, mouseY / 2);
    rotate(radians(angleX));
    rect(130, 30, mouseX / 3, 50);
    angleX = angleX + 1;
    pop();

    fill(r, g, b);
    push();
    translate(mouseX / 3, mouseY / 2);
    rect(140, 50, mouseX - 200, mouseY / 3);
    pop();

    fill(81, mouseX / 2, 223);
    push();
    translate(mouseX, mouseY);
    rotate(radians(angleY));
    ellipse(300, 250, 50, mouseY / 2);
    angleY = angleY - 1;
    pop();

    fill(81, mouseX / 2, 223);
    push();
    translate(mouseX / 6, mouseY / 4);
    ellipse(300, 250, 50, mouseY);
    pop();
}

This project, I wanted to create what randomness in order would look like. It started from a thought that what if what we see everyday that seems random is actually not random?

CJ Walsh – Project 3 – Dynamic Drawing

sketch

var radLarge = 37.797;
var radSmall = 20.643;

function setup() {
	createCanvas(640, 480);
	noStroke();
	colorMode(HSB, 480);
}

function draw() {
	// color changes as mouse moves in vertical directions
	background(mouseY);
	//controls the reverse of my mouse movement
	var reverseX = width - mouseX

// background circles to create changing backdrop
	fill('#71BCFF');
	ellipse(320, 240, mouseX, mouseY);
	ellipse(480, 240, mouseX, mouseY);
	ellipse(150, 240, mouseX, mouseY);

// left larger circles
	fill('#E83F63');
	ellipse(mouseX, 33, radLarge, radLarge);
	ellipse(mouseX, 108, radLarge, radLarge);
	ellipse(mouseX, 184, radLarge, radLarge);
	ellipse(mouseX, 260, radLarge, radLarge);
	ellipse(mouseX, 335, radLarge, radLarge);
	ellipse(mouseX, 410, radLarge, radLarge);

// left small circles 
	fill('#6171E5');
	ellipse(mouseX, 449, radSmall, radSmall);
	ellipse(mouseX, 373, radSmall, radSmall);
	ellipse(mouseX, 298, radSmall, radSmall);
	ellipse(mouseX, 222, radSmall, radSmall);
	ellipse(mouseX, 146, radSmall, radSmall);
	ellipse(mouseX, 70, radSmall, radSmall);

// right large circles
	fill('#E83F63');
	ellipse(reverseX, 449, radLarge, radLarge);
	ellipse(reverseX, 373, radLarge, radLarge);
	ellipse(reverseX, 298, radLarge, radLarge);
	ellipse(reverseX, 222, radLarge, radLarge);
	ellipse(reverseX, 146, radLarge, radLarge);
	ellipse(reverseX, 70, radLarge, radLarge);

// right smaller circles 
	fill('#6171E5');
	ellipse(reverseX, 33, radSmall, radSmall);
	ellipse(reverseX, 108, radSmall, radSmall);
	ellipse(reverseX, 184, radSmall, radSmall);
	ellipse(reverseX, 260, radSmall, radSmall);
	ellipse(reverseX, 335, radSmall, radSmall);
	ellipse(reverseX, 410, radSmall, radSmall);

// far left larger 
	fill('#E83F63');
	ellipse(mouseX - 100, 33, radLarge, radLarge);
	ellipse(mouseX - 100, 108, radLarge, radLarge);
	ellipse(mouseX - 100, 184, radLarge, radLarge);
	ellipse(mouseX - 100, 260, radLarge, radLarge);
	ellipse(mouseX - 100, 335, radLarge, radLarge);
	ellipse(mouseX - 100, 410, radLarge, radLarge);

	ellipse(mouseX - 300, 33, radLarge, radLarge);
	ellipse(mouseX - 300, 108, radLarge, radLarge);
	ellipse(mouseX - 300, 184, radLarge, radLarge);
	ellipse(mouseX - 300, 260, radLarge, radLarge);
	ellipse(mouseX - 300, 335, radLarge, radLarge);
	ellipse(mouseX - 300, 410, radLarge, radLarge);

// far left smaller
	fill('#6171E5');
	ellipse(mouseX - 200, 449, radSmall, radSmall);
	ellipse(mouseX - 200, 373, radSmall, radSmall);
	ellipse(mouseX - 200, 298, radSmall, radSmall);
	ellipse(mouseX - 200, 222, radSmall, radSmall);
	ellipse(mouseX - 200, 146, radSmall, radSmall);
	ellipse(mouseX - 200, 70, radSmall, radSmall);

	ellipse(mouseX - 400, 449, radSmall, radSmall);
	ellipse(mouseX - 400, 373, radSmall, radSmall);
	ellipse(mouseX - 400, 298, radSmall, radSmall);
	ellipse(mouseX - 400, 222, radSmall, radSmall);
	ellipse(mouseX - 400, 146, radSmall, radSmall);
	ellipse(mouseX - 400, 70, radSmall, radSmall);

// far right larger 
	fill('#E83F63');
	ellipse(reverseX + 100, 449, radLarge, radLarge);
	ellipse(reverseX + 100, 373, radLarge, radLarge);
	ellipse(reverseX + 100, 298, radLarge, radLarge);
	ellipse(reverseX + 100, 222, radLarge, radLarge);
	ellipse(reverseX + 100, 146, radLarge, radLarge);
	ellipse(reverseX + 100, 70, radLarge, radLarge);

	ellipse(reverseX + 300, 449, radLarge, radLarge);
	ellipse(reverseX + 300, 373, radLarge, radLarge);
	ellipse(reverseX + 300, 298, radLarge, radLarge);
	ellipse(reverseX + 300, 222, radLarge, radLarge);
	ellipse(reverseX + 300, 146, radLarge, radLarge);
	ellipse(reverseX + 300, 70, radLarge, radLarge);

// far right smaller
	fill('#6171E5');
	ellipse(reverseX + 200, 33, radSmall, radSmall);
	ellipse(reverseX + 200, 108, radSmall, radSmall);
	ellipse(reverseX + 200, 184, radSmall, radSmall);
	ellipse(reverseX + 200, 260, radSmall, radSmall);
	ellipse(reverseX + 200, 335, radSmall, radSmall);
	ellipse(reverseX + 200, 410, radSmall, radSmall);

	ellipse(reverseX + 400, 33, radSmall, radSmall);
	ellipse(reverseX + 400, 108, radSmall, radSmall);
	ellipse(reverseX + 400, 184, radSmall, radSmall);
	ellipse(reverseX + 400, 260, radSmall, radSmall);
	ellipse(reverseX + 400, 335, radSmall, radSmall);
	ellipse(reverseX + 400, 410, radSmall, radSmall);

// more right large
	fill('#E83F63');
	ellipse(reverseX - 100, 449, radLarge, radLarge);
	ellipse(reverseX - 100, 373, radLarge, radLarge);
	ellipse(reverseX - 100, 298, radLarge, radLarge);
	ellipse(reverseX - 100, 222, radLarge, radLarge);
	ellipse(reverseX - 100, 146, radLarge, radLarge);
	ellipse(reverseX - 100, 70, radLarge, radLarge);

	ellipse(reverseX - 300, 449, radLarge, radLarge);
	ellipse(reverseX - 300, 373, radLarge, radLarge);
	ellipse(reverseX - 300, 298, radLarge, radLarge);
	ellipse(reverseX - 300, 222, radLarge, radLarge);
	ellipse(reverseX - 300, 146, radLarge, radLarge);
	ellipse(reverseX - 300, 70, radLarge, radLarge);

// more right small 
	fill('#6171E5');
	ellipse(reverseX - 200, 33, radSmall, radSmall);
	ellipse(reverseX - 200, 108, radSmall, radSmall);
	ellipse(reverseX - 200, 184, radSmall, radSmall);
	ellipse(reverseX - 200, 260, radSmall, radSmall);
	ellipse(reverseX - 200, 335, radSmall, radSmall);
	ellipse(reverseX - 200, 410, radSmall, radSmall);

	ellipse(reverseX - 400, 33, radSmall, radSmall);
	ellipse(reverseX - 400, 108, radSmall, radSmall);
	ellipse(reverseX - 400, 184, radSmall, radSmall);
	ellipse(reverseX - 400, 260, radSmall, radSmall);
	ellipse(reverseX - 400, 335, radSmall, radSmall);
	ellipse(reverseX - 400, 410, radSmall, radSmall);

// more left larger 
	fill('#E83F63');
	ellipse(mouseX + 100, 33, radLarge, radLarge);
	ellipse(mouseX + 100, 108, radLarge, radLarge);
	ellipse(mouseX + 100, 184, radLarge, radLarge);
	ellipse(mouseX + 100, 260, radLarge, radLarge);
	ellipse(mouseX + 100, 335, radLarge, radLarge);
	ellipse(mouseX + 100, 410, radLarge, radLarge);

	ellipse(mouseX + 300, 33, radLarge, radLarge);
	ellipse(mouseX + 300, 108, radLarge, radLarge);
	ellipse(mouseX + 300, 184, radLarge, radLarge);
	ellipse(mouseX + 300, 260, radLarge, radLarge);
	ellipse(mouseX + 300, 335, radLarge, radLarge);
	ellipse(mouseX + 300, 410, radLarge, radLarge);

// more left smaller
	fill('#6171E5'); 
	ellipse(mouseX + 200, 449, radSmall, radSmall);
	ellipse(mouseX + 200, 373, radSmall, radSmall);
	ellipse(mouseX + 200, 298, radSmall, radSmall);
	ellipse(mouseX + 200, 222, radSmall, radSmall);
	ellipse(mouseX + 200, 146, radSmall, radSmall);
	ellipse(mouseX + 200, 70, radSmall, radSmall);

	ellipse(mouseX + 400, 449, radSmall, radSmall);
	ellipse(mouseX + 400, 373, radSmall, radSmall);
	ellipse(mouseX + 400, 298, radSmall, radSmall);
	ellipse(mouseX + 400, 222, radSmall, radSmall);
	ellipse(mouseX + 400, 146, radSmall, radSmall);
	ellipse(mouseX + 400, 70, radSmall, radSmall);
}

For my dynamic drawing I wanted to play with the creation of patterns. As you move the mouse in the x plane you can create different textures by positioning the circles. Additionally, you can use both x and y mouse movements to change the background circles, which I though added a nice element to help create more combinations of the image. This assignment was a little difficult to figure out at first, and I definitely want to keep playing with my code on this image to see what else I could do.

Angela Lee – Project – 03

angela-dynamic-drawing

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Assignment-03
 */

// variables for x & y position of circle following cursor
var x = 300;
var y = 300;
var diffx = 0;
var diffy = 0;


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

function draw(){
    // defining variable for distance from mouse position to center
    mouseDist = dist(mouseX, mouseY, width/2, height/2);
    // width and height of the circles
    circle = 80 + mouseDist/6;
	background(0);
    noStroke();

    // small white circle following the mouse
    diffx = mouseX - x;
    diffy = mouseY - y;
    x = x + 0.2 * diffx;
    y = y + 0.2 * diffy;
    fill ("white");
    ellipse(x, y, 20, 20);

    // middle square
    push();
    translate(320, 240);
    rectMode (CENTER);
    rotate(radians(mouseDist));
    fill(mouseX, mouseY, 100);
    rect(0, 0, 15, 15);
    pop();

    // TOP CIRCLE
    // red, yellow values change based on mouse's x and y position
    fill(mouseX, mouseY, 150);
    // ellipse goes top based on mouse's distance from center
    ellipse(320, 114 - mouseDist/2, circle,
     circle);

    // RIGHT CIRCLE
    // green, blue values change based on mouse's x and y position
    fill(242, mouseX, mouseY);
    // ellipse goes right based on mouse's distance from center
    // ellipse gets bigger as mouseDist gets bigger
    ellipse(445 + mouseDist/2, 240, circle,
     circle);

    // LOWER CIRCLE
    // red, green values change based on mouse's x and y position
    fill(mouseX, mouseY, 40);
    // ellipse goes bottom based on mouse's distance from center
    // ellipse gets bigger as mouseDist gets bigger
    ellipse(320, 365 + mouseDist/2, circle,
     circle);

    // LEFT CIRCLE
    // red value changes based on mouse's x position
    fill(mouseX, 13, 174);
    // ellipse goes left based on mouse's distance from center
    // ellipse gets bigger as mouseDist gets bigger
    ellipse(195 - mouseDist/2, 240, circle,
     circle);

    // TOP RIGHT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(407.5 + mouseDist/5, 151 - mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(mouseDist));
    fill(23, 250, 255);
    rect(0, 0, 50, 50);
    pop();

    // BOTTOM RIGHT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(407.5 + mouseDist/5, 328.5 + mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(-mouseDist));
    fill(141, 29, 221);
    rect(0, 0, 50, 50);
    pop();

    // BOTTOM LEFT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(231 - mouseDist/5, 328.5 + mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(mouseDist));
    fill(255, 169, 210);
    rect(0, 0, 50, 50);
    pop();

    // TOP LEFT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(231 - mouseDist/5, 151 - mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(-mouseDist));
    fill(7, 57, 239);
    rect(0, 0, 50, 50);
    pop();
}

This project helped me really understand the mechanisms of push, pop, and translation in the context of rotation. I think it was tricky to figure out how to make things rotate a certain place (e.g. rotate on its center while the position of the object changed places depending on the user). I also think that proportion was especially important for me in this exercise. While most of my user interaction was based on how far the cursor was from the center of the canvas, determining how fast something was moving or big something got depended on a fraction of that distance.