Category: SectionB

For this project I wanted to experiment with rotation and changes in color. I tried to create contrasting changes such as the sun color changing as its size decreases and the buildings rising and becoming brighter as the sky gets darker. The most challenging part was getting the rotation of the sun rays.

sketch

// Ankitha Vasudev
// Section B, 10:30 - 11:50
// ankithav@andrew.cmu.edu
// Assignment-03-b

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

function draw() {
	// Changes background color based on mouse position 
	background(0, 200 - mouseX, 500 - mouseY);
	noStroke();

    //Local variables
    var x = 700; //triangle x coordinate
    var y = 700; //triangle y coordinate 
    var circleW = 30; //sun width
    var circleH = 30; //sun height
    var bwidth = 50; //building width

    //rotating sun rays (triangles)
	push();
	translate(mouseX, mouseY);
	fill(255, 225, 0);
	rotate(mouseY);
	triangle(0, 0, -x/2, y, -x, y+200);
	triangle(0, 0, x/2, -y, x, -y-200);
	triangle(0, 0, x+50, y, y, x+50);
	triangle(0, 0, -x-50, -y, -y, -x-50);
    pop();

    //sun - circle changes size based on mouse position 
    if (mouseX < width/2) {
    circleW = width/2 - mouseX;
    circleH = width/2 - mouseX;
    } else { 
    circleH = 5
    circleW = 5;
    }
    
    //changes sun color and size
    fill(255, 225, mouseX);
    ellipse(mouseX, mouseY, circleW, circleH);

    //building heights based on mouse position 
    fill(mouseX);
    rect(200, 530, bwidth+10, (-mouseY/ 5));
    fill(220);
    rect(160, 570, bwidth-10, (-mouseY / 5));
    fill(150);
    rect(70, 600, bwidth, (-mouseY/5));
    fill(mouseX);
    rect(380, 620, bwidth, (-mouseY/5));
    fill(180);
    rect(355, 550, bwidth/2, (-mouseY/5));
    fill(mouseX);
    rect(20, 660, bwidth/3, (-mouseY/5));

    //green ground - stationary
    fill(0, 220, 70);
    ellipse(width/2, 870, 700, 700);
}

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.

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.

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.