Category: Project-03-Dynamic-Drawing

sketch

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

function draw() {
    background(255);
    fill(255);
    stroke(0);
    ellipse(width/2, height/2, 50, 50); //outer center ring

    translate(width/2, height/2);
    for (var i = 0; i < 8; i++) { //ring of 8 diamonds

        //first ring
        push();
        var mouseDist = dist(mouseX, mouseY, width/2, height/2); //mouse distance from center
        var bright = 225 - 225 * mouseDist * 1/230; //alters shade from 0 to 225 of the diamonds to be darker as they approach center
        var scaleAmount = 1.75 - 1.75 * mouseDist * 1/230; //scales diamonds from 0 to 1.75 to be larger as they move outwards
        if (mouseX > 240) {
            rotate(-acos((mouseY - height/2)/mouseDist)/2 + TWO_PI * i/8); //sets angular distance between diamonds, and rotates proportional to mouse angle
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/2 + TWO_PI * i/8); //accounts for the face that arccos switches direction at PI/2 and 3PI/2
        }
        if (mouseDist < 230) { //expands and contracts diamonds until just before edge of canvas
           translate(100 - 100 * mouseDist * 1/230, 0); //diamonds move towards center as mouse moves away proportional to original translation
       }
        fill(bright);
        if (mouseDist < 230) { //if statement used so that scaling does not increase after value reaches zero
            scale(scaleAmount);
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //center circle
        }
        pop()
        //simplified comments will be used for further iterations of the ring of diamonds, refer to first ring for more info
        //second ring of diamonds
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(acos((mouseY - height/2)/mouseDist)/4 + TWO_PI * i/8 + PI/8);
        }
        else {
            rotate(-acos((mouseY - height/2)/mouseDist)/4 + TWO_PI * i/8 + PI/8);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(155 - 155 * mouseDist * 1/230, 0);
       }
        fill(bright + 40); //shading related to distance from center/mouse
        if (mouseDist < 230) {
            scale(scaleAmount - .1); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop();

        //first half of third ring of diamonds 
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/16); 
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/16); 
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(210 - 210 * mouseDist * 1/230, 0); 
       }
        fill(bright + 80); //shading related to distance from center/mouse
        if (mouseDist < 230) { 
            scale(scaleAmount - .2); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop();

        //second half of third ring of diamonds 
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 3*PI/16);
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 3*PI/16); 
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(265 - 265 * mouseDist * 1/230, 0); 
       }
        fill(bright + 80); //shading related to distance from center/mouse
        if (mouseDist < 230) { 
            scale(scaleAmount - .2); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop();

        //fourth ring first part
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/16);
        }
        else {
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/16);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(320 - 320 * mouseDist * 1/230, 0); 
       }
        fill(bright + 110); //shading related to distance from center/mouse
        if (mouseDist < 230) { 
            scale(scaleAmount - .25); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop()

         //fourth ring second part
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 3*PI/16); 
        }
        else {
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 3*PI/16);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(320 - 320 * mouseDist * 1/230, 0);
        }
        fill(bright + 110); //shading related to distance from center/mouse
        if (mouseDist < 230) {
            scale(scaleAmount - .25); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop()

        //fifth ring first part
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/8);
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + PI/8);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(375 - 375 * mouseDist * 1/230, 0);
        }
        fill(bright + 120); //shading related to distance from center/mouse
        if (mouseDist < 230) {
            scale(scaleAmount - .3); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop()

        //fifth ring second part
        push();
        if (mouseX > 240) { //rotation related to mouse
            rotate(-acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 4*PI/16);
        }
        else {
            rotate(acos((mouseY - height/2)/mouseDist)/8 + TWO_PI * i/8 + 4*PI/16);
        }
        if (mouseDist < 230) { //distance from center related to mouse
           translate(375 - 375 * mouseDist * 1/230, 0);
        }
        fill(bright + 120); //shading related to distance from center/mouse
        if (mouseDist < 230) {
            scale(scaleAmount - .3); //scaling of diamond related to distance from center
            quad(0, 10, -45, 0, 0, -10, 45, 0); //diamond
        } else {
            fill(0);
            ellipse(0,0,40,40); //black center
        }
        pop()

    }
    fill(0);
    ellipse(0,0,40,40); //black circle over diamonds

}

I honestly had no idea what I was going to do with this project. Given that, the creative process was pretty interesting. Honestly, the only thing I was going off of to begin with was that I wanted the diamond shape to be a central theme of the drawing. After that, the rest of the ideas sort of haphazardly tumbled together. The diamond shape led me to a sort of stylized star/space concept, so then I knew I wanted to work with concentric circles rotating alternately. Once I started drawing those, the way the circles condensed into a tight, compact star shape made me think of a supernova. So after that, I intentionally themed the drawing around a sort of explosive, supernova idea.

Although I had the theme all figured out, achieving that idea turned out to be pretty difficult. I had no idea how I was going to get the different rows of diamonds to rotate in regards to the mouses angle to the center of the canvas, not to mention to get them to rotate at different rates related the the mouses angle. The math was pretty tricky, but also I feel like that gives the code a sense of beauty. This was definitely the first thing that I have coded that I felt the code should be seen as well as the product. The code is just as much art.

If I had more time (and I might just go back and do this on my own time) I want to develop the background more. Give it a sense of depth, like a star in space.

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!