Category: Project-03-Dynamic-Drawing

Jamie Park – Project – 03

sketch

//Jamie Park           jiminp@andrew.cmu.edu
//15-104        Section E        Project #3

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

//angle variable for the rotating square
var angle = 0;

function draw(){
    background (0);
    noStroke();
    rectMode(CENTER);

    //rectangle on the right top corner that changes colors
    fill(100, mouseX, 200);
    rect(540, height / 6, 200, 160, 30, 0, 15, 20);

    //square on the left bottom that rotates when the mouse is moved
    push();
    translate(80, 390);
    rotate(180 + mouseX / 50, 300 + mouseY / 50);
    fill(mouseX, mouseX, mouseY);
    ellipse(30, 30, 70, 70);
    pop();
    angle = angle + 2;

    //bottom right square that changes size and color when the mouse is moved
    fill(mouseX, mouseY, 245);
    rect(width * 0.7, height * 0.7, mouseY, mouseY, 20);

    //ellipse on top of a rectangle that changes size and color
    fill(mouseX, mouseY, mouseY);
    ellipse(width * 0.7, height* 0.7, mouseX / 2, mouseX / 2);

    //the rectangles that shift y axis when the mouse is moved
    fill(255, 110, 163);
    rect(mouseX + 50, height / 3, 70, 300, 10);
    fill(194, 252, 3);
    rect(mouseX, height / 3, 100, 220, 10);
    fill(82, 217, 255);
    rect(mouseX + 150, height / 7, 60, 40, 10);
}

I had a lot of fun manipulating the colors, size, position and angle of various elements using x and y coordinates of the mouse. It’s interesting to see the various things one can do through using mouse coordinate!

Lanna Lang – Project 03 – Dynamic Drawing

lanna_project3_sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 03 Dyanamic Drawing

var circW;
var angle1 = 0;
var angle2 = 0;

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

function draw() {
    background(0);
   
//rotating white rectangle
    push();
    translate(200, 200);
    rotate(radians(angle2));
    noStroke();
    fill(255);
    rectMode(CENTER);
    //the size will increase/decrease as the mouse moves
    rect(0, 0, mouseX + 200, mouseY + 150);
    pop();
    //rotating counter clockwise
    angle2 = angle2 - 5;
  
//rotating colorful rectangle
    push();
    translate(200, 200);
    rotate(radians(angle1));
    noStroke();
    //as the mouse moves around, the color of the rect changes
    fill(170, mouseX, mouseY);
    rectMode(CENTER);
    //the size of the rect will increase/decrease as the mouse moves
    rect(0, 0, mouseX, mouseY + 50);
    pop();
    //rotating clockwise
    angle1 = angle1 + 5;

//as the mouse goes right, the size of the circle increases  
    if (mouseX > width/2) {
      circW = (width/2 + 50);
    } else {
      circW = (mouseX);
    }
 
//as the mouse moves around, the color of the circles change 
    stroke(0);
    fill(mouseX, 170, mouseY);
    circle(mouseX, mouseY, circW);
    
}

I really wanted to play around with gradient colors and seeing the after-effects of each shape’s fast movements. At first, I wanted to experiment with having my background(…); line of code in my function setup() and how that would change my drawing, but it wouldn’t work with my rotating rectangles, so maybe I’ll experiment in a future project.

Siwei Xie-Project 03-Dynamic Drawing

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//Project-03

var angle = 0;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
	// change background color when mouse moves
    background(205, mouseX/3, mouseY/6);
    noStroke();

    // 3 black objects in background follow mouse's movements,
    // creating a dynamic triangle with changing colors
    fill("black");
    triangle(0, 0, mouseX, mouseY, 0, 480);
    triangle(mouseX, mouseY, 640, 0, 640, 480);
    rect(0,0,640,mouseY);

    // enlarge mouth when mouse moves right
    // mouth position follows mouse
    fill("pink");
    circle(mouseX,mouseY+180,mouseX/2);

    // left rotating eye
    // eye position follows mouse
    fill("white");
    push();
    translate(mouseX-80, mouseY);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 60, 60);
    pop();
    angle = angle + 3;

    // right rotating eye
    push();
    translate(mouseX+80, mouseY);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0 , 60, 60);
    pop();
    angle = angle + 3;

    // text enlarges when mouse moves right,
    // and follows mouse's verticle position
    textSize(mouseX/8);
    textFont("old english");
    text("Monster is roaring",0,mouseY/2);
 

}

I drew a monster which follows the mouse’s movements. The monster would roar if mouse moves right, and would “stay calm” if mouse moves left.

Paul Greenway – Project – 03

pgreenwa_dynamic_drawing

/* Paul Greenway
Section A
pgreenwa@andrew.cmu.edu
Project-03
*/


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

function draw() {
  
  background(170, 190, mouseY);
  noStroke();
  
  
  let maxX = constrain(mouseX, 0, width-mouseX);
  
  // left circles 
  

  fill(170, 190, mouseY);
  //rotate(radians(angle));
  square(maxX, 0, mouseX/2, mouseY/5);
  
  fill(mouseY, 190, 200);
  //rotate(radians(angle));
  square(maxX, 50, mouseX/2, mouseY/5);
  
  fill(170, 190, mouseY);
  //rotate(radians(angle));
  square(maxX, 100, mouseX/2, mouseY/5);
  
  fill(mouseY, 190, 200);
  //rotate(radians(angle));
  square(maxX, 150, mouseX/2, mouseY/5);
  
  fill(170, 190, mouseY);
  //rotate(radians(angle));
  square(maxX, 200, mouseX/2, mouseY/5);
  
  fill(mouseY, 190, 200);
  //rotate(radians(angle));
  square(maxX, 250, mouseX/2, mouseY/5);
  
  fill(170, 190, mouseY);
  //rotate(radians(angle));
  square(maxX, 300, mouseX/2, mouseY/5);
  
  fill(mouseY, 190, 200);
  //rotate(radians(angle));
  square(maxX, 350, mouseX/2, mouseY/5);
  
  fill(170, 190, mouseY);
  //rotate(radians(angle));
  square(maxX, 400, mouseX/2, mouseY/5);
  
  fill(mouseY, 190, 200);
  //rotate(radians(angle));
  square(maxX, 450, mouseX/2, mouseY/5);
  
}

For this project I wanted to create a series of objects with different elements that could all be controlled by the mouse and would change simultaneously. I decided to use circles that would shift into rectangular lines as the mouse is moved.

Sewon Park – PO – 03

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project-03



var angle = 10 // used for rotation of squares later
function setup () {
createCanvas(640,480)

}

function draw () {
background(dist(320,240,mouseX,mouseY)); //background color dependent on mouse location from center



//Ellipse that moves with center at mouse location (Main Ellipse)
fill(mouseX,0,mouseY); // color dependent on mouse movement
stroke(0);
ellipse(mouseX,mouseY,mouseX/2,mouseY/2) // position and size dependent on mouse movement

 //Ellipse2 moves diagnally from main ellipse with mouse movement away from center. 
var x = width - mouseX
var y = height - mouseY 
fill(mouseX,0,mouseY) // color dependent on mouse movement
stroke(0);
ellipse(x,y,mouseX/2,mouseY/2)
x = x - 3
y = y - 3  

//Ellipse3 moves vertically from main ellipse from mouse movement away from center.
var x2 = 0 + mouseX
var y2 = height - mouseY
fill(0,mouseX,0) // color dependent on mouse movement
stroke(0);
ellipse(x2,y2,mouseX/2,mouseY/2)
x2 = x2 - 3
y2 = y2 + 3

//Ellipse4 moves horizontally from main ellipse from mouse movement away from center.
var x3 = width - mouseX
var y3 = 0 + mouseY
fill(0,mouseX,0) // color dependent on mouse movement
stroke(0);
ellipse(x3,y3,mouseX/2,mouseY/2)
x3 = x3 - 3
y3 = y3 + 3

//Square1 spins with its corner respect to main ellipse's center
fill(0,mouseY,mouseX); //color dependent on mouse movement
stroke(0);
push();
translate(mouseX, mouseY);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

//Square2 spins with its corner respect to ellipse 2's center
fill(0,mouseY,mouseX);  //color dependent on mouse movement
stroke(0);
push();
translate(x, y);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

//Square3 spins with its corner respect to ellipse 3's center
fill(0,mouseY,mouseX);  //color dependent on mouse movement
stroke(0);
push();
translate(x2, y2);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

//Square4 spins with its corner respect to ellipse 4's center
fill(0,mouseY,mouseX);  //color dependent on mouse movement
stroke(0);
push();
translate(x3, y3);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

}

This project was probably the toughest yet as coordinating movements to your mouse movements is no easy task. I tried to incorporate two different types of movements through altering position and rotation in respect to change in cursor position.

Steven Fei – Project – 03


Steven Fei dynamic Drawing


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

var size = 8; //hexagon size that can change according to the mouse movement
let color = 0; //hexagon color that can change according to the mouse movement
var colorDir = 2; //the degree of change for the color change
let angle = 0; //the initial rotation angle for the hexagon
var dir = 1; // the growing direction of the hexagon, either positive or negative
var speed = 2; //the growing speed of the hexagon

function mouseMoved(){
    color = color +colorDir;
    if (color<0){
        colorDir = 2;
    } else if (color>255){
        colorDir = -2;
    }
    angle +=0.6;
    size += dir * speed;
    if(size<0){
        dir = 1;
        size = 0;
    }else if (size>60){
        dir = -1;
        size = 60;
    }
}

var diffx = 0;
var diffy = 0;
var circlex = 300;
var circley = 300;

function draw() {
    background(0);
//    locate the mouse position
    diffx = mouseX - circlex;
    diffy = mouseY - circley;
    circlex = circlex + 0.1*diffx;
    circley = circley + 0.1*diffy;
    fill("white");
    circle(circlex,circley,20);
    
    fill(color,37,213);
    var x = max(min(mouseX,300),5); // decide the starting point of the hexagon, when the mouse is far on the left the canvas, the hexagons may shrink together and when the mouse is far on the right of the canvas, the hexagons may move away from each other
    translate(300,240); //move to the center of the canvas
//    draw the basic shape for 1st Hexagon  
    beginShape();
    rotate(radians(angle));
    vertex(x/2,0);
    vertex(x/2+size*cos(radians(60)),0-size*sin(radians(60)));
    vertex(x/2+size+size*cos(radians(60)),0-size*sin(radians(60)));
    vertex(x/2+size+2*size*cos(radians(60)),0);
    vertex(x/2+size+size*cos(radians(60)),size*sin(radians(60)));
    vertex(x/2+size*cos(radians(60)),size*sin(radians(60)));
    endShape();
    // draw the basic shape for 2nd Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+1.3,0);
    vertex(x/2+1.3+1.3*size*cos(radians(60)),0-1.3*size*sin(radians(60)));
    vertex(x/2+1.3+1.3*size+1.3*size*cos(radians(60)),0-1.3*size*sin(radians(60)));
    vertex(x/2+1.3+1.3*size+2*1.3*size*cos(radians(60)),0);
    vertex(x/2+1.3+1.3*size+1.3*size*cos(radians(60)),1.3*size*sin(radians(60)));
    vertex(x/2+1.3+1.3*size*cos(radians(60)),1.3*size*sin(radians(60)));
    endShape();
//    draw the basic shape for 3rd Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+1.5,0);
    vertex(x/2+1.5+1.5*size*cos(radians(60)),0-1.5*size*sin(radians(60)));
    vertex(x/2+1.5+1.5*size+1.5*size*cos(radians(60)),0-1.5*size*sin(radians(60)));
    vertex(x/2+1.5+1.5*size+2*1.5*size*cos(radians(60)),0);
    vertex(x/2+1.5+1.5*size+1.5*size*cos(radians(60)),1.5*size*sin(radians(60)));
    vertex(x/2+1.5+1.5*size*cos(radians(60)),1.5*size*sin(radians(60)));
    endShape();
//  draw the basic shape for 4th Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+1.7,0);
    vertex(x/2+1.7+1.7*size*cos(radians(60)),0-1.7*size*sin(radians(60)));
    vertex(x/2+1.7+1.7*size+1.7*size*cos(radians(60)),0-1.7*size*sin(radians(60)));
    vertex(x/2+1.7+1.7*size+2*1.7*size*cos(radians(60)),0);
    vertex(x/2+1.7+1.7*size+1.7*size*cos(radians(60)),1.7*size*sin(radians(60)));
    vertex(x/2+1.7+1.7*size*cos(radians(60)),1.7*size*sin(radians(60)));
    endShape();
//    draw the basic shape for 5th Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+1.9,0);
    vertex(x/2+1.9+1.9*size*cos(radians(60)),0-1.9*size*sin(radians(60)));
    vertex(x/2+1.9+1.9*size+1.9*size*cos(radians(60)),0-1.9*size*sin(radians(60)));
    vertex(x/2+1.9+1.9*size+2*1.9*size*cos(radians(60)),0);
    vertex(x/2+1.9+1.9*size+1.9*size*cos(radians(60)),1.9*size*sin(radians(60)));
    vertex(x/2+1.9+1.9*size*cos(radians(60)),1.9*size*sin(radians(60)));
    endShape();
//    draw the basic shape for 6th Hexagon
    rotate(radians(60));
    beginShape();
    vertex(x/2+2.1,0);
    vertex(x/2+2.1+2.1*size*cos(radians(60)),0-2.1*size*sin(radians(60)));
    vertex(x/2+2.1+2.1*size+1.9*size*cos(radians(60)),0-2.1*size*sin(radians(60)));
    vertex(x/2+2.1+2.1*size+2*2.1*size*cos(radians(60)),0);
    vertex(x/2+2.1+2.1*size+1.9*size*cos(radians(60)),2.1*size*sin(radians(60)));
    vertex(x/2+2.1+2.1*size*cos(radians(60)),2.1*size*sin(radians(60)));
    endShape();
    
    
}

Chelsea Fan-Project-03-Dynamic Drawing

DynamicDrawing

/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-03
*/

//Changes in size, position, shape, and distance
function setup() {
    createCanvas(640, 480);
    noStroke();
}

function draw() {
    background(173, 216, 230);
    fill(255,255,0);
    //MouseX can move from 50 to 450
    var mouse = max(min(mouseX, 450), 50);
    var size = mouse * 400.0 / 640.0;
//Rabbit 1
    //Body
    fill(250, 250 , 250);
    ellipse(10+mouse*350/640, 225, size, size+50);
    //Tummy
    fill(255, 228, 225);
    ellipse(10+mouse*350/640, 235, size/1.5, size+20);
    //Head
    fill(250, 250, 250);
    ellipse(10+mouse*350/640, 180, size, size);
    //Ear
    ellipse(3+mouse*350/640, 160, size/8, size);
    ellipse(15+mouse*350/640, 160, size/8, size);
    //Eyes
    fill(211, 211, 211);
    ellipse(mouse*350/640-3, 180, size/4, size/4);
    ellipse(15+mouse*350/640, 180, size/4, size/4);
    fill(0)
    ellipse(mouse*350/640-3, 180, size/8, size/8);
    ellipse(15+mouse*350/640, 180, size/8, size/8);

//Purple square
    fill(216, 191, 216);
    size = 300-size;
    rect(width-mouse*350/640-140, 230, size, size);
    rectMode(CENTER); // center rect around 0,0
}

I used my last Project’s bunny drawing as a template for this new and improved dynamic bunny. I enjoyed learning how to incorporate the mouse location into the dynamic drawing.

Danny Cho – Project 3 _ Dynamic Drawing

DannyCho_DyDraw

var orbitX = 0;
var orbitY = 0;
var speed = 10;
var ellipseX = 0;
var ellipseY = 0;
var width = 640;
var height = 480;
var bgColor = 255;
var strkColor = 0;

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



function draw(){
	background(bgColor);
  stroke(strkColor);
  //the lines from top and bottom follow the mouse
  for (var i = 0; i * 10 <= width; i++) {
    line(10 * i, -100, mouseX + orbitX, mouseY + orbitY);
    line(10 * i, 580, mouseX + orbitY, mouseY + orbitX);
    i++;

  }
  //the ellipses follow the mouse
  push();
  translate(mouseX, mouseY);
  ellipse(0, 0, 3 * orbitX, 3 * orbitY);
  ellipse(0, 0, 3 * orbitY, 3 * orbitX);
  pop();

  orbitX = 20 * sin(-speed);
  orbitY = 20 * cos(speed);
  speed = speed + 0.0002 * mouseX;
  push();
  translate(mouseX, mouseY);
  //mouseX controls the number of the ellipses
  for (var i = 0; i + floor(mouseX/60) <= 10; i++) {
  
  rotate(radians(speed * 10));
  noFill();
  ellipseMode(CENTER);
  //mouseY controls the size of the ellipses
  ellipse(ellipseX + 5 * i, ellipseY + 5 * i, mouseY / 2, mouseY / 2);
  ellipseX = 100 * sin(speed) + mouseX / 10;
  }
  //depending on the mouse position, the color scheme changes
  if (mouseX - mouseY <= 0) {
    bgColor = 0;
    strkColor = 255;
  }
  else {
    bgColor = 255;
    strkColor = 0;
  }

}

I got interested in radians and trigonometry during this course and wanted to explore it with interactiveness that was a requirement for this project. The position of the mouse controls 4 variables: number of circles orbiting, scale of the circles, speed of their movement, and black and white color scheme.

Joseph Zhang –– Project –– 03 


Throughout the process of making this piece of interactive art, I was really focused on the relationship between the mouse and the shapes and how to change the temporal speed of movement. Often times, I would divide mouseX or mouseY by a number to have a slower animation than the actual speed of the mouse.

sketch

// Joseph Zhang
// Section E
// haozhez@andrew.cmue.edu
// Project-03: Dynamic Drawing

function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    //Changes color depending on mouseX and mouseY position
    background(mouseY, mouseX, 200);
    noStroke();

    // resizing rectangle (left) - width increases by a factor of -mouseX / 2
    rect(480, 500, (-mouseX / 2), 60);

    // right resizing rectangle (right) - width increases by a factor of mouseX / 2
    rect(0, 100, (mouseX / 2), 60);

    // Rotating + Resizing Purple-to-Pink Rectangle
    push();
        rectMode(CENTER);
        // Trailing mouse parallax
        translate(180 + mouseX / 10, 430 + mouseY / 10);
        //Rotates rectangle depending on mouseX position
        rotate(radians(-mouseX / 3));
        //Changes color depending on mouseX position
        fill(170 + mouseX,180,210);
        //Drawing rectangle –　width increases by a factor of mouseX / 4
        rect(0, 0, 160 + mouseX / 4, 160);
    pop();

    // Rotating Purple Squares
    push();
        rectMode(CENTER);
        translate(200,450);
        fill(170,160,210);
        //Rotates Rectangle depending on – mouseX position divided by 10
        rotate(radians(mouseX/10));
        //Drawing rectangle
        rect(0, 0, 130, 130);
    pop();

    // Resizing Black-to-White Ellipse
    push();
        // Trailing mouse parallax – position moves at a speed of mouseX divided by 10
        translate(200 + mouseX / 10, 200 + mouseY / 10);
        //Changes color depending on mouseX position
        fill(255 - mouseX)
        //Drawing ellipse
        ellipse(0, 0, -40 + (mouseY + mouseX) / 3, -40 + (mouseY + mouseX) / 3);
    pop();
}

Ellan Suder Project-03: Dynamic Drawing

I first began with a really simple script that made the circle 50px wide on the right of the screen and 10px otherwise. Then I used the += to gradually add to the width, which made the circle have a more interesting transition as it crossed the x-axis.

dynamic drawing

/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-03
*/

var angle;
var circleWidth;
var circleHeight;

function setup() {
    createCanvas(600, 400);
    var angle = 0;
}

function draw() {
    background(255, 90);
    fill(150);
    noStroke();
  
//if mouse crosses to right side, 
//circle adds value of mouseX to diameter
//gets bigger as it gets further from middle x axis
    if (mouseX > width/2) {
      circleWidth = 50 + (width/2 - mouseX);
    } else {
      circleWidth = 50 + (width/2 - mouseX);
  }
  
//if mouse goes to bottom half, 
//circle becomes black
    if (mouseY > height/2) {
      fill(0);
    } else {
      fill(200);
  }
  
//circle
    ellipse( 
      mouseX, 
      mouseY, 
      circleWidth,
      circleHeight);

// rectangle that changes angle according to mouseX
// rectangle moves further out as mouseY becomes bigger
    push();
    rotate(radians(angle));
    rect(5,mouseY, 50, 50);
    pop();
    angle = mouseX + 5;
}