lee chu – project 03

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 03


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

function draw() {
    var topX = 0;
    var topY = 0;
    var widthE = width/12;
    var heightE = height/7 - 30;
    var topR = widthE/2;
    var topH = heightE/2;

    var top1X = topX;
    var top2X = topX + widthE/2;
    var top3X = topX;
    var top4X = topX - widthE/2;
    var top1Y = topY - heightE/2;
    var top2Y = topY;
    var top3Y = topY + heightE/2;
    var top4Y = topY;

    var spacingX = width/12;
    var spacingY = height/7;

    var color1 = 45 + (mouseX / width) * 30;
    var color2 = 125 + (mouseY / height) * 50;
    var color3 = 0;

    background(color2);

    // control
    if (0 <= mouseX & mouseX <= width) {
        top1X += sqrt(mouseX/width) * topR;
        top1Y += pow(mouseX/width, 2) * topH;
        top2X -= pow(mouseX/width, 2) * topR;
        top2Y += sqrt(mouseX/width) * topH;
        top3X -= sqrt(mouseX/width) * topR;
        top3Y -= pow(mouseX/width, 2) * topH;
        top4X += pow(mouseX/width, 2) * topR;
        top4Y -= sqrt(mouseX/width) * topH;
    }

    for (var i = 0; i < 641; i += spacingX) {

        //used this as reference
        //ellipse(topX, topY, widthE, heightE);
        strokeWeight(0.5);
        stroke('red');

        // cube side 1
        fill('white');
        beginShape();
        vertex(top1X, top1Y);
        vertex(top4X, top4Y);
        vertex(top4X, top4Y + 30);
        vertex(top1X, top1Y + 30);
        endShape(CLOSE);

        // cube side 2
        fill(107, 37, 50);
        beginShape();
        vertex(top1X, top1Y);
        vertex(top2X, top2Y);
        vertex(top2X, top2Y + 30);
        vertex(top1X, top1Y + 30);
        endShape(CLOSE);

        // cube side 3
        fill(212, 75, 99);
        beginShape();
        vertex(top4X, top4Y);
        vertex(top4X, top4Y + 30);
        vertex(top3X, top3Y + 30);
        vertex(top3X, top3Y);
        endShape(CLOSE);

        // cube side 4
        fill(40, color1, 99);
        beginShape();
        vertex(top3X, top3Y);
        vertex(top2X, top2Y);
        vertex(top2X, top2Y + 30);
        vertex(top3X, top3Y + 30);
        endShape(CLOSE);

        // cube top
        fill(239, 240, 235);
        beginShape();
        vertex(top1X, top1Y);
        vertex(top2X, top2Y);
        vertex(top3X , top3Y);
        vertex(top4X, top4Y);
        endShape(CLOSE);

        for (var k = 0; k < 481; k += spacingY) {
            translate(0, spacingY);

            // cube side 1
            fill('white');
            beginShape();
            vertex(top1X, top1Y);
            vertex(top4X, top4Y);
            vertex(top4X, top4Y + 30);
            vertex(top1X, top1Y + 30);
            endShape(CLOSE);

            // cube side 2
            fill(107, 37, 50);
            beginShape();
            vertex(top1X, top1Y);
            vertex(top2X, top2Y);
            vertex(top2X, top2Y + 30);
            vertex(top1X, top1Y + 30);
            endShape(CLOSE);

            // cube side 3
            fill(212, 75, 99);
            beginShape();
            vertex(top4X, top4Y);
            vertex(top4X, top4Y + 30);
            vertex(top3X, top3Y + 30);
            vertex(top3X, top3Y);
            endShape(CLOSE);

            // cube side 4
            fill(40, color1, 99);
            beginShape();
            vertex(top3X, top3Y);
            vertex(top2X, top2Y);
            vertex(top2X, top2Y + 30);
            vertex(top3X, top3Y + 30);
            endShape(CLOSE);

            // cube top
            fill(239, 240, 235);
            beginShape();
            vertex(top1X, top1Y);
            vertex(top2X, top2Y);
            vertex(top3X , top3Y);
            vertex(top4X, top4Y);
            endShape(CLOSE);
            }
            translate(spacingX, 0);
            translate(0, -k);
    }
}

I started by creating a cube that could rotate 90 degrees as the mouse is dragged across the canvas By placing multiple cubes corner to corner, A sort of optical illusion happens.