Category: SectionD

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Dynamic Drawing

var a = 251; //background color
var b = 224; //background color
var c = 233; //background color
var angle = 0;

function setup() {
    createCanvas(640, 480);
}
function draw() {
    a, b, c = mouseX/4; 
    // background color change when mouse is moved 
    background(a, b, c);
    noStroke();
    push();
    translate(mouseY + 75, width/2)
    rotate(radians(angle));
    ellipseMode(CENTER);
    fill(130, 175, 255);
    stroke(217, 255, 147);
    strokeWeight(20);
    ellipse(0, 0, 200, 500);
    pop();
    angle = angle + 5
    // rotating oval position change; left when mouse moves up right whien mouse moves down
    let circlex = width - mouseX;
    let circley = height - mouseY;
    fill(230, 111, 183);
    ellipse(circlex, height/2, circley, circley); 
    // pink circle size and position change; left when mouse moves right, right when mouse moves left, big when mouse moves up, small when mouse moves down
    let cirx = height - mouseY;
    let ciry = width - mouseX;
    fill(185, 111, 230);
    ellipse(mouseX, height/2, mouseY, mouseY); 
    // purple circle size and position change; moves along the mouse, big when mouse moves down, small when mouse moves up
    fill(111, 208, 230);
    ellipse(cirx, height/2, ciry, ciry); 
    // blue circle size and position change; left when mouse moves down, right when mouse moves up, big when mouse moves left, small when mouse moves right 
    translate (mouseX + 10, height/2);
    ellipseMode(CENTER);
    fill(255, 147, 147);
    stroke(213, 68, 98);
    strokeWeight(15);
    ellipse(mouseX - 150, mouseY - 200, mouseX/2, mouseY/2); 
    // pink orange oval shape position change; long when mouse moves down and left, wide when mouse moves up and right,
}

For this project, I studied the various possibilities in the change of the shape, ellipse. Ellipse is one of my favorite shape to study because although it is a simple, single lined structure, there are so many varieties of different ellipse we can create. I tried to incorporate as many different aspects of image elements possible, like the changes in sizes, angles, colors, and position as I move the cursor around different places within the canvas. 

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);
}

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.