Category: Project-03-Dynamic-Drawing

Project 3 – Alison Hoffman

sketch

//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project 3

//*This Program is a dynamic drawing that responds to the mouseX and mouseY position
function setup() {
    createCanvas(640,480);
}

function draw() {
    background("lavender");
    noStroke();
    rectMode(CENTER);

    var boxColor = map(mouseX,0,width,0,180);
    var boxTrans = map(mouseX,0,width,100,255);
    //top row 
    fill(boxColor);
    push();
    translate(width*.15,100);
    rotate(radians(mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.38,100);
    rotate(radians(-mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.62,100);
    rotate(radians(mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.85,100);
    rotate(radians(-mouseX));
    rect(0,0,50,50);
    pop();

    //middle row 
    fill(255,255,255,boxTrans);
    push();
    translate(width*.12,height/2);
    scale(1 + mouseY/80);
    rect(0,0,25,25);
    pop();
    push();
    translate(width*.30,height/2);
    scale(1 - mouseY/80);
    rect(0,0,25,25);
    pop();
    push();
    translate(width*.50,height/2);
    scale(1 + mouseY/80);
    rect(0,0,25,25);
    pop();
    push();
    translate(width*.70,height/2);
    scale(1 - mouseY/80);
    rect(0,0,25,25);
    pop();
    push();
    translate(width*.88,height/2);
    scale(1 + mouseY/80);
    rect(0,0,25,25);
    pop();
    //rect(width*.25,height/2,25,25);
    //rect(width*.47,height/2,25,25);
    //rect(width*.69,height/2,25,25);
    //rect(width*.86,height/2,25,25);



    //bottom row
    fill(boxColor);
    push();
    translate(width*.15,380);
    rotate(radians(mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.38,380);
    rotate(radians(-mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.62,380);
    rotate(radians(mouseX));
    rect(0,0,50,50);
    pop();
    push();
    translate(width*.85,380);
    rotate(radians(-mouseX));
    rect(0,0,50,50);
    pop();

}

For this project I focused on making the mouseX & mouseY interaction feel intuitive. As you move mouseX left to right, the boxes in the first and third row rotate alternatively based on the mouseX position. The shade of the boxes also get lighter as you increase mouseX. The transparency of the the smaller white boxes in the middle row also decrease as mouseX decreases. MouseY controls the scale of the middle boxes as well.

dynamicdrawing

/*
*Sadie Johnson
*15-104 Section C
*sajohnso@andrew.cmu.edu
*Project-03-Dynamic-Drawing
* This program creates an image based off mouse position

*/

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

function draw() {
    background(0);
    fill(mouseX/2,mouseY,mouseX/2);
//connecting lines t0 cursor
    stroke(mouseX/2);
    line(0, 0, mouseX, mouseY); // top left
    line(width, 0, mouseX, mouseY); //top right
    line(0, height, mouseX, mouseY); // bottom left
    line(width, height, mouseX, mouseY); // top left

//circle that follows cursor
    ellipse(mouseX, mouseY, 55, 55);

    fill(height-mouseY/2,width-mouseX,height-mouseY/2);
    ellipse(0,0,mouseX/2,mouseX/2); //top left
    ellipse(0,height,mouseX/2,mouseX/2); //bottom left
    ellipse(width,0,mouseX/2,mouseX/2); //top right
    ellipse(width,height,mouseX/2,mouseX/2); //bottom right

//rotating lines
    if (dist(width/2, height/2, mouseX, mouseY) > height/10) {
        stroke(225);
        strokeWeight(12);
        push();
        translate(mouseX, mouseY);
        rotate(millis()/mouseX/2);
        line(0,0,height,width);
        pop();  
        push();
        translate(mouseX, mouseY);
        rotate(millis()/mouseX/2);
        line(width,0,0,height);
        pop(); 
    }
}

The hardest part of this assignment for me was keeping track of which variables controlled which reactions, and fixing them accordingly when they didn’t work the way I wanted them to.

Isabella Hong- Project – 03 – Dynamic- Drawing

The most difficult aspect of this week’s project was making sure that all the elements I used were placed correctly. This would ensure that once the user starts moving the cursor, the elements would follow the path of the mouse properly.

ijhong-project-03

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-01

//cube dimensions 
var sx = 200;
var sy = 200;
var sz = 200;

//mini cube dimensions 
var mx = 50; 
var my = 50; 
var mz = 50; 

//direction of growth 
var dir = 1; 
var speed = 2; 

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

function draw() {
	//background color changing
	//range for background colors  
	var colorR = map(mouseY, 0, height, 250, 215);
	var colorG = map(mouseY, 0, height, 235, 230);
	var colorB = map(mouseY, 0, height, 215, 250);
	background(colorR, colorG, colorB);	

	//middle cube 
	rotateX(mouseX * 0.01); 
	rotateY(mouseY * 0.01); 
	ambientLight(0);
	ambientMaterial(50); 
	//grow 
	speed = mouseX / 10;
	box(sx + speed * dir, sy + speed * dir, sz + speed * dir);

	//small cube 1 
	translate(-width / 2, -height / 2); 
	push();
	rotateX(mouseX * 0.03); 
	rotateY(mouseY * 0.03); 
	ambientLight(250);
	ambientMaterial(255);
	box(sx / 2, sy / 2, sz / 2);
	pop();

	//small cube 2
	translate(620, 460);
	push();
	rotateX(mouseX * 0.04); 
	rotateY(mouseY * 0.04); 
	ambientLight(50);
	ambientMaterial(250); 
	box(sx / 2, sy / 2, sz / 2);
	pop();

	//mini cubes rotating 
	translate(300 , 460);
	push(); 
	rotateX(frameCount * 0.03); 
	rotateY(frameCount * 0.03); 
	ambientLight(50); 
	ambientMaterial(50);
	box(mx ,my, mz); 
	translate(width - 300, height -460);
	box(mx, my, mz); 
	pop();

}

Hannah K-Project-03

sketch-178.js

// Creates an interactive dynamic drawing that changes when 
// mouseX is moved
// Composed of right / isosceles trapezoids and triangles

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

function draw() {
// 1st shape out of 8 total
    if(mouseX > 0 & mouseX < 80){
        // Horizontal changes on this dynamic drawing are always 80 units
        noStroke();
        fill(255,130,171);
        // 1st of the 8 quadrilaterals that will get smaller from L to R
        quad(0,80,80,130,80,480,0,480);
    }
    else{ 
        noStroke();
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);
        quad(0,80,80,130,80,430,0,480);
        // 1st of the 8 quadrilaterals that will get larger from L to R
        // In this case, this shape is actually a triangle, but referred to
        // as a quadrilateral for consistency in my code
        fill(255,62,150);
        quad(0,480,80,430,80,480,0,480);
    }

// 2nd shape out of 8 total
    if(mouseX > 80 & mouseX < 160) {
        noStroke();
        fill(218,112,214);
         // 2nd of the 8 quadrilaterals that will get smaller from L to R
        quad(80,130,160,180,160,480,80,480);
    }
    else{
        noStroke();
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);
        quad(80,130,160,180,160,380,80,430); 
        // 2/8 of the quadrilaterals that will get larger from L to R
        fill(139,71,137);
        quad(80,430,160,380,160,480,80,480)
    }

// 3rd shape out of 8 total
    if(mouseX > 160 & mouseX < 240) {
        noStroke();
        fill(75,0,130); 
        // 3rd of the 8 quadrilaterals that will get smaller from L to R
        quad(160,180,240,230,240,480,160,480); 
    } 
    else {
        noStroke();
        // Regular trapezoid whose color is the same as the background 
        fill(0,255,255);
        quad(160,180,240,230,240,330,160,380);
        // 3rd of the 8 quadrilaterals that will get larger from L to R
        fill(72,118,255);
        quad(160,380,240,330,240,480,160,480);        
    }

// 4th shape out of 8 total
    if(mouseX > 240 & mouseX < 320) {
        noStroke();
        fill(135,206,250); 
        // 4th of the 8 quadrilaterals that will get smaller from L to R
        // In this case, this shape is actually a triangle, but referred to
        // as a quadrilateral for consistency in my code
        quad(240,230,320,280,320,480,240,480);
    }
    else {
        noStroke();
        // Regular trapezoid whose color is the same as the background 
        fill(0,255,255);
        quad(240,230,320,280,320,280,240,330);
        // 4rd of the 8 quadrilaterals that will get larger from L to R
        fill(51,100,201);
        quad(240,330,320,280,320,480,240,480) 
    }

// 5th shape out of 8 total
    if(mouseX > 320 & mouseX < 400) {
        noStroke();
        // 5th of the 8 quadrilaterals that will get smaller from L to R
        fill(0,134,139);
        quad(320,280,400,330,400,480,320,480);
        // Triangle which is same color as the background
        // Referred to as a quadrilateral for consistency in my code
        fill(0,255,255);
        quad(320,280,400,230,400,330,320,280);
    }
    else{
        noStroke();
        // 5th of the 8 quadrilaterals that will get larger from L to R
        fill(255,20,147); 
        quad(320,280,400,230,400,480,320,480); 
    }

// 6th shape out of 8 total
    if(mouseX > 400 & mouseX < 480) {
        noStroke();
        // 6th of the 8 quadrilaterals that will get smaller from L to R
        fill(60,0,200); 
        quad(400,330,480,380,480,480,400,480);
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);
        quad(400,230,480,180,480,380,400,330);
    }
    else {
        noStroke();
        // 6th of the 8 quadrilaterals that will get larger from L to R
        fill(255,255,255);
        quad(400,230,480,180,480,480,400,480);
    }

// 7th shape out of 8 total
    if(mouseX > 480 & mouseX < 560) {
        noStroke();
        // 7th of the 8 quadrilaterals that will get smaller from L to R
        fill(25,60,100);
        quad(480,380,560,430,560,480,480,480);
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);
        quad(480,180,560,130,560,430,480,380);
    }
    else {
        noStroke();
        // 7th of the 8 quadrilaterals that will get larger from L to R
        fill(155,20,100);
        quad(480,180,560,130,560,480,480,480) 
    }
    
// 8th shape out of 8 total
    if(mouseX > 560 & mouseX < width) {
        noStroke();
        // 8th of the 8 quadrilaterals that will get smaller from L to R
        // Actual shape is a triangle
        fill(142,56,142);        
        quad(560,130,640,80,640,480,560,480) 
        // Regular trapezoid whose color is the same as the background
        fill(0,255,255);        
        quad(560,130,640,80,640,480,560,430);
    }
    else {
        noStroke();
        // 8th of the 8 quadrilaterals that will get larger from L to R
        fill(132,112,255);
        quad(560,130,640,80,640,480,560,480); 
    }
}

When I began thinking of what I wanted to do for this project, I thought it would be interesting to do something using triangles. Initially, I thought of the drawing as having 8 different parts because I created 8 sections and thought I would need 2 shapes per section. But I ended up using 3 per section, and figuring out the coordinates of the shapes took a little bit longer than expected. Overall, I quite enjoyed creating this!

(Comment: For whatever reason, the very right part of my project is getting cut off on the website, even though the canvas width is set correctly.)

20160917_232203-1

Jinhee Lee; Project-03

jinheel1_project-03

var sqCenterX = 240; //dimensions of yellowing square
var sqCenterY = 240;
var sqW = 0;
var sqH = 0;
var sqMin = 0; //sets min and max size of square
var sqMax = 200;

var ellCenterX = 240; //dimensions of doorknob within square
var ellCenterY = 240;
var ellPlace = 0; //placeholder variable for placing doorknob after translate()
var ellW = 0;
var ellH = 0;
var ellMin = 0; //min size of doorknob set at 0
var ellXMax = 80; //max horizontal size of doorknob
var ellYMax = 150; //max vertical size of doorknob
var ellAngle = 0; //initiates doorknob angle
var ellAngleMin = 0;
var ellAngleMax = 360;

var lnTopX = 440; //dimensions of purple borderlines
var lnTopY = 40;
var lnTopX2 = 440;

var lnLeftX = 40;
var lnLeftY = 40;
var lnLeftY2 = 40;

var lnBottomX = 40;
var lnBottomY = 440;
var lnBottomX2 = 40;

var lnRightX = 440;
var lnRightY = 440;
var lnRightY2 = 440;

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

function draw() {
    background(0);
    rectMode(CENTER);
    
    var masterHand = map(mouseX, 0, width, 0, 1); //used in lerp functions to change picture
    var fromCol = color(255); //white when square is smallest
    var toCol = color(255,255,0); //yellow when square is largest
    var col = lerpColor(fromCol, toCol, masterHand); //changes color with mouseX position

    strokeWeight(0);
    fill(col); //color for square
    rect(sqCenterX, sqCenterY, sqW, sqH); //square gets yellower with size

    fill("red"); //color for rotating "doorknob"
    push();
    translate(ellCenterX,ellCenterY); //"translates" origin, doorknob rotates on center
    rotate(radians(ellAngle)); //rotates the doorknob
    ellipse(ellPlace, ellPlace, ellW, ellH); //changes size and angle with mouseX position
    pop();

    stroke(255,0,255); //purple color for lines
    strokeWeight(5); //below are the purple lines that grow
    line(lnTopX, lnTopY, lnTopX2, lnTopY);
    line(lnLeftX, lnLeftY, lnLeftX, lnLeftY2);
    line(lnBottomX, lnBottomY, lnBottomX2, lnBottomY);
    line(lnRightX, lnRightY, lnRightX, lnRightY2);

    if (mouseX <= width & mouseY <= height) { //changes only when mouse is in canvas
        sqW = lerp(sqMin, sqMax, masterHand); //changes square width
        sqH = lerp(sqMin, sqMax, masterHand); //changes square height

        ellW = lerp(ellMin, ellXMax, masterHand); //changes doorknob width
        ellH = lerp(ellMin, ellYMax, masterHand); //changes doorknob height
        ellAngle = lerp(ellAngleMin, ellAngleMax, masterHand); //changes doorknob angle

        lnTopX2 = lerp(lnTopX, height - lnTopX, masterHand); //changes the purple line length
        lnLeftY2 = lerp(lnLeftY, height - lnLeftY, masterHand);
        lnBottomX2 = lerp(lnBottomX, height - lnBottomX, masterHand);
        lnRightY2 = lerp(lnRightY, height - lnRightY, masterHand);
    }
}

For this project, it seemed more important than ever to build a rough template (the shapes, colors, lines, etc.) and expand upon it later (making global/local variables to avoid magic numbers, creating several of the same type of object with slight differences, etc.).

I was afraid I wouldn’t be able to get the rotate() functions to do what I wanted; thank goodness I attended lecture when they mentioned push(), pop(), and translate().

P.S., regarding the visual not “completing” when the mouse is put all the way to the right, I believe it’s simply a limitation of the site. Even when I put data-width=1000 during embedding, the actual amount of canvas shown doesn’t change. Also, when opened using the html file, the visual does complete when the mouse is dragged all the way to the right.

Project-03-Dynamic Drawing

sketch

//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//Dynamic Drawing

//creates variable for diameter
var  dia = 10
//creates variabe for grayscale color
var C = 255

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

function draw() {
    background(255,100,125);
    //creates ellipse
    fill(C);
    ellipse(width/2,height/2,dia,dia);
    //ellipse gets larger/smaller and turns black
    if (mouseX > width/2) {
        C = C-10;
        dia = dia + 5;
    }
    //ellipse gets smaller/larger and turns white
    if (mouseX < width/2) {
    	C = C + 10;
    	dia = dia - 5;
    }
    //creates variables for colors
    var R = 100;
    var G = 0;
    var B = 255;

    //creates variable for rectangle side
    var s = 5;
    //variable for rectangle location
    var x = 320;
    var y = 240;
    
    //Rectangle changes
    if (mouseY < height/2) {
    //decreases red color component
        R -= 10;
    //increases green color component   
        G += 50;
    //decreases blue color component   
        B -=  10;
    //increases area
        s += 100;
    //moves rectangle up
        y += 20;
    //moves rectangle to the left
        x -= 20;
    }
    //Rectangle changes
    if (mouseY > height/2) {
    //increases red color component
        R += 50;
    //decreases green color component   
        G -= 10;
    //increases blue color component   
        B += 50;
    //decreases area
        s -= 50;
    //moves rectangle down
        y -= 20;
    //moves rectangle to the right
        x += 20;
    }
    //creates rectangle
    fill(R,G,B);
    rectMode(CENTER);
    rect(x,y,s,s);

}

I found this project to be rather difficult, however I really enjoyed experimenting with the different effects the movement of the mouse could have on the picture.

Shannon Case – Project-02 – Dynamic Drawing

sketch



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

function draw() {
    background(0);
    fill(255);

    var m = max(min(mouseX, 640), 0); //mouse X min/max
    var l = max(min(mouseY, 480),0); //mouse Y min/max
    var sizeX = m * 350 / 400; //size of ellipses
    var sizeY = l * 350 / 400; // size of ellipses
    var colA = random(0,255);
    var colB = random(0,255);
    var colC = random(0,255); // all these create flashing black and white colors
    var colD = random(0,255); //strobe light effect
    var colE = random(0,255);
    var colF = random(0,255);

    //creates groups of flashing ellipses that strech and shrink with movements of the mouse
    fill(colA); 
    ellipse(10+m*190/300, 300, sizeX, sizeX);
    ellipse(30+m*80/460, 80+l*400 / 400, sizeX,sizeY); 

    fill(colB);
    ellipse(200+m*50/200, 250,sizeX,sizeY);
    ellipse(26+m*300/600, 70+l*400 / 500,sizeX,sizeX);

    fill(colC);
    ellipse(20+m*90 / 400, 280,sizeY,sizeX);
    ellipse(30+m*40 / 400, 85+l*450 / 40,sizeX,sizeY);

    fill(colE);
    ellipse(200+m*90 / 400, 200, sizeX, sizeY);
    ellipse(30+m*40 / 430, 80+l*45 / 400,sizeY,sizeX);
    ellipse(30+m*40 / 400, 85+l*450 / 40,sizeX,sizeX);


    fill(colE);
    ellipse(100+m*75 / 400, 50, sizeY,sizeY);
    ellipse(50+m*20 / 460, 550, sizeX,sizeY);
    ellipse(30+m*40 / 400, 600, sizeY,sizeX);

    fill(colF);
    ellipse(20+m*90 / 400, 100,sizeY,sizeY);
    ellipse(30+m*407 / 440, 65+l*350 / 400,sizeX,sizeY);

}

For this project I decided to make a dynamic drawing that stretches and shrinks a series of ellipses when the mouse is moved around the canvas. I was listening to music while I was coding it and it made me think that the shapes were almost dancing around on the screen 🙂

owen fox project 3

int

var rY = 500;
var rX = 300;
var rW = 50;
var u = 200;
var u1 = 400;
var mod = 100;

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

function draw() {
  background((rX+mod)/3,(rY+mod)/3,(rX+rY+mod)/3);
  rectMode(CENTER);
  noStroke();
  fill("white");
  rect(rX,rY,rW,rW);
  if (keyIsPressed) {
      if (key == 'w') {
      rY = rY - 3;
      }
      if (key == 'a') {
      rX = rX - 3;
      }
      if (key == 's') {
      rY = rY + 3;
      }
      if (key == 'd') {
      rX = rX + 3;
      }
  }
}

WASD to move

Mreyes-Project-03-Dynamic-Drawing

project-03

//Mercedes Reys

//Section C 

//mreyes@andrew.cmu.edu

//Project-03

var x = 3;
var y = 3;

var dir = 1;

var speed = 7;
var speed2 = 7;

var radius = 4;
var circW = 10;

var x2 = x - 5
var y2 = y - 5
var x3 = x2 - 5
var y3 = y2 - 5

var dragging = false;

function setup() {
    createCanvas(400, 400);
    fill(255);
}

function draw() {
    var R = map(mouseY, 0, height, 0, 0);
    var G = map(mouseY, 0, height, 23, 0);
    var B = map(mouseY, 0, height, 54, 0);
    background(R,G,B);
   
    noStroke

    y += dir * speed;
    x += dir * speed;

    y2 += dir * speed2;
    x2 += dir * speed2;

    y3 += dir * speed2;
    x3 += dir * speed2;

  
    if (dragging) {
        x = mouseX;
        y = mouseY;
        
    }
  

    ellipse(x,y,circW,circW);
    ellipse(x2,y2,circW,circW);
    ellipse(x3,y3,circW,circW)

    if (x > width + radius){
    x = -radius
    y = -radius
    x2 = (-radius) - 5
    y2 = (-radius) -5
    x3 = (-radius) - 10 
    y3 = (-radius) - 10

  }
}

function mousePressed() {
    if (dist(x, y, mouseX, mouseY) < circW/2) {
        dragging = true;
        fill(14,216,227)
    }
}

function mouseReleased() {
    dragging = false;
    fill(255)
}

Try to catch a star!

The pong assignment was really challenging, but I used a lot of the concepts from that (such as if statements, boundary points, and animation) in this program. I attempted to simulate a shooting star while also making it a kind of game.

Project-03

sketch


//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-03

var x1 = 140;
var y1 = 160;
var r1 = 30;

var x2 = 550;
var y2 = 300;
var r2 = 100;

var R = 150;
var G = 35;
var B = 75;

var num = 5;


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

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

fill("MediumSpringGreen");
 ellipse(110,210,90,90);      //background pokadots

 ellipse(310,110,70,70);

 ellipse(600,40,10,10);

 ellipse(350,390,20,20);

 ellipse(50,50,60,60);

 ellipse(210,420,50,50);

 ellipse(250,240,80,80);

 ellipse(620,460,25,25);

 ellipse(500,190,45,45);

 ellipse(30,460,8,8);

 ellipse(450,100,35,35);

 ellipse(90,350,55,55);

 ellipse(640,380,100,100);

 ellipse(400,290,25,25);

  fill(R,G,B);

  ellipse(x1,y1,r1,r1);         //draws left side ellipse

  for (var i = 0; i<num;i++) {      //makes the motion effect

  ellipse(x2-(10*i),y2,r2,r2);       //draws right side ellipse
  

  }


  if ((mouseX >= x1-r1) & (mouseX<=x1+r1) && (mouseY<=y1+r1) && (mouseY>=y1-r1) && (num>1)){

   x1 = x1+1;
   y1 = y1+1;
   r1 = r1+1;
                             //right side ellipse
   x2 = x2-1;
   y2 = y2-1;
   r2 = r2-1;

   num = num-1;


  }

   if ((mouseX >= x2-r2) & (mouseX<=x2+r2)){
   

   x2 = x2+0.5;
   y2 = y2+0.75;
   r2 = r2+0.1;
                         //left side ellipse
   x1 = x1-0.8;
   y1 = y1-0.4;
   r1 = r1-0.2;
   
   num =num+1;

  }

}

This was a challenge for me because I had a lot of trouble getting my if statements to work.  Luckily after many hours of perseverance it came together!