nayeonk1-Project03-Dynamic Drawing

nayeon_DynamicDrawing

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-03 (Dynamic Drawing)


var angle = 0;
var dia = 0;


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

function draw() {

//background color changing with mouse
    var bgR = map(mouseY, 0, height, 50, 100);
    var bgG = map(mouseX, 0, height, 150, 250);
    var bgB = map(mouseY, 0, height, 100, 200);

    background(bgR, bgG, bgB);

//size changing rect
    noStroke();
    fill(bgR + 100, bgG + 100, bgB + 100);
    rect(0, 0, (mouseX / 2), (mouseY / 2));
    fill(bgR - 100, bgG - 100, bgB - 100);
    rect(100, 100, (mouseX / 2), (mouseY / 2));
    fill(bgR - 50, bgG, bgB + 100);
    rect(200, 200, (mouseX / 2), (mouseY / 2));
    fill(bgR, bgG + 100, bgB + 200);
    rect(300, 300, (mouseX / 2), (mouseY / 2));


//another bg frame
    var x = 50;
    var y = 100;
    var w = 380;
    var h = 440;

    noStroke();
    if ((mouseX > x) & (mouseX < x+w) && (mouseY > y) && (mouseY < y+h)) {
      fill(0, 250);
    } else {
      fill(255, 0);
    }
    rect(x, y, w, h);

//rotating rect
    if ((mouseX > x) & (mouseX < x+w) && (mouseY > y) && (mouseY < y+h)) {
      fill(bgR, bgG, bgB);
    } else {
      fill(255, 0);
    }
    push();
    translate((width / 2), (height / 2));
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (mouseX / 2), (mouseY / 2));
    pop();
    angle = angle + 20;

//lines
    var wL = 50;
    var wR = 430;
    var hU = 100;
    var hB = 540;

    var xc = constrain(mouseX, wL, wR);
    var yc = constrain(mouseY, hU, hB);

    if ((mouseX > x) & (mouseX < x+w) && (mouseY> y) && (mouseY < y+h)) {
      stroke(255);
    } else {
      stroke(0);
    }

    strokeWeight(8);
    line((width / 2), (height / 2), xc, yc);
    var max = map(mouseX, 0, xc, yc, 100);
    line((width/ 2), (height / 2), max, yc);
    var max = map((mouseX * 0.5), 0, xc, yc, 200);
    line((width/ 2), (height / 2), max, yc);
    var max = map((mouseX * 2), 0, xc, yc, 50);
    line((width/ 2), (height / 2), max, yc);

// cursur - spinning rect
    push();
    rectMode(CENTER);
    if ((mouseX > x) & (mouseX < x+w) && (mouseY> y) && (mouseY < y+h)) {
      fill(255);
    } else {
      fill(0);
    }
    noStroke();
    translate(mouseX, mouseY);
    rotate(radians(angle * 10));
    rect(0, 0, 30, 30);
    pop();

//increasing circle
    if ((mouseX > x) & (mouseX < x+w) && (mouseY > y) && (mouseY < y+h)) {
    } else {
      dia = 0;
    }
    push();
    noStroke();
    fill(255);
    ellipse((width / 2), (height / 2), dia, dia);
    dia = dia + 1;
    pop();

    fill(0);







}

I tried to implement codes I’ve learned this week. And I wanted to try something new, I started to design abstract image as much as possible only thinking about function. It was fun to do something different with I used to do it. It was fun to play with different codes!