Cathy Dong – Final Project

sketch

/* Cathy Dong
   Section D
   yinhuid@andrew.cmu.edu
   Project 12 - Final Project
*/

// load image as color base
var baseImg;
var proportion = 0.24;
//cover text space setting
var space1 = 50;
var space2 = 32;
//block dimension (cover page)
var bw = 100;
var bh = 25;
//page number: cover + levels
var page = 0;

// draw rect fill color variable
var fillColor = 255;


var cSpace1 = 10;
var colorSize = 30;

// variables for drawRect()
var c = [];
var rectX = [];
var rectY = [];

// variables for drawLines()
var w = [];
var lineL = [];
var lineR = [];
var lineU = [];
var lineD = [];


// preload cover de stijl base image
function preload() {
    var img = "https://i.imgur.com/pJRSO5b.jpg";
    baseImg = loadImage(img);
}

function setup() {
    createCanvas(480, 480);
    background(0);
}

function draw() {
    // decide page
    pageSetting();

    //cover when page = 0;
    if (page == 0) {
        // make cover image, set to scale
        scale(proportion);
        image(baseImg,0,0);
        filter(THRESHOLD);
        // set scale back to 1:1 for text draw
        scale(1 / proportion);
        coverBlocks();
        coverText();
    }
    //level 1 when page == 1
    else if (page == 1) {
        clear();
        background(210);
        baseCanvas();
        commandKey();
        baseGrids(5);
        changeColor();
        drawRect(5);
        if (key !== "r" & key !== "R") {
            drawLine(5);
        }4
    }

    // level 2 when page == 2
    else if (page == 2) {
        clear();
        background(210);
        baseCanvas();
        commandKey();
        baseGrids(7);
        changeColor();
        drawRect(7);
        drawRect(7);
        if (key !== "r" || "R") {
            drawLine(7);
        }
    }

    // level 3 when page == 3
    else if (page == 3) {
        clear();
        background(210);
        baseCanvas();
        commandKey();
        baseGrids(15);
        changeColor();
        drawRect(15);
        drawRect(15);
        if (key !== "r" || "R") {
            drawLine(15);
        }
    }
}

// jump to page through cover levels
function pageSetting() {
    if (page == 0) {
        // select page 1
        if ((mouseIsPressed) 
            & (mouseY > height / 2 + space2) && (mouseY < height / 2 + space2 + bh)
            && (mouseX > width / 2 - 50) && (mouseX < width / 2 - 50 + bw)) {
            page  = 1;
        }
        // select page 2
        else if ((mouseIsPressed) 
            & (mouseY > height / 2 + space2 * 2) && (mouseY < height / 2 + space2 * 2 + bh)
            && (mouseX > width / 2 - 50) && (mouseX < width / 2 - 50 + bw)) {
                page  = 2;
        }
        // select page 3
        else if ((mouseIsPressed) 
            & (mouseY > height / 2 + space2 * 3) && (mouseY < height / 2 + space2 * 3 + bh)
            && (mouseX > width / 2 - 50) && (mouseX < width / 2 - 50 + bw)) {
                page  = 3;
        }
    }
}


// white blocks below option texts for texts to read better
function coverBlocks () {
    fill(255);
    noStroke();
    for (var i = 1; i < 4; i++) {
        rect(width / 2 - 50, height / 2 + space2 * i , bw, bh);
    }
}

// cover texts: title & levels
function coverText() {
    textStyle(BOLD);
    //title base setting
    noStroke();
    textAlign(CENTER);
    textSize(80);
    // title shadow
    fill(0);
    text("De Stijl", width / 2 + 5, height / 2 +-3);
    // title text
    fill(255);
    text("De Stijl", width / 2, height / 2);


    //options
    fill(0);
    noStroke();
    textSize(15);
    text("LEVEL 1", width / 2, height / 2 + space1);
    text("LEVEL 2", width / 2, height / 2 + space1 + space2);
    text("LEVEL 3", width / 2, height / 2 + space1 + space2 * 2);
}

// pick rectangle colors
function changeColor() {
    var keyX = width - 45;
    var cy = width / 2;
    if (mouseIsPressed) {
        if ((mouseX > keyX) & (mouseX < keyX + colorSize)) {
            // blue block
            if ((mouseY > cy + cSpace1) && (mouseY < cy + cSpace1 + colorSize)){
                fillColor = "blue";
            }
            // red block
            if ((mouseY > cy + cSpace1 * 2 + colorSize) 
                & (mouseY < cy + cSpace1 * 2 + colorSize * 2)) {
                fillColor = "red";
            }
            // yellow block
            if ((mouseY > cy + cSpace1 * 3 + colorSize * 2)
                & (mouseY < cy + cSpace1 * 3 + colorSize * 3)) {
                fillColor = "yellow";
            }
            // white block
            else if ((mouseY > cy + cSpace1 * 4 + colorSize * 3)
                & (mouseY < cy + cSpace1 * 4  +colorSize * 4)) {
                fillColor = "white";
            }
        }
    }
}


// white base draw canvas
function baseCanvas() {
    strokeWeight(5);
    stroke(0);
    fill(255);
    rect(10, 10, width - 70, height - 70);
}

//option grid lines
function baseGrids(level) {
    // grid lines
    noFill();
    strokeWeight(0.2);
    stroke("gray");

    // use loop to draw grids
    for (var i = 0; i < level; i++) {
        for (var j = 0; j < level; j++) {
            var gw = width - 70;
            var gh = height - 70;
            rect(10 + gw / level * i, 10 + gh / level * j, gw / level, gh / level);            
        }
    }
}

// color fill command key draw on the side
function commandKey() {
    var cx = width - 50;
    var cy = width / 2;
    var keyX = width - 45;
    // base setting
    textAlign(LEFT);
    textSize(10);
    textStyle(BOLD);
    fill(0);
    noStroke();
    text("COLORS", cx, cy);

    // keys blocks
    noStroke();
    fill("blue");
    rect(keyX, cy + cSpace1, colorSize, colorSize);
    fill("red");
    rect(keyX, cy + cSpace1 * 2 + colorSize, colorSize, colorSize);
    fill("yellow");
    rect(keyX, cy + cSpace1 * 3 + colorSize * 2, colorSize, colorSize);
    fill("white");
    rect(keyX, cy + cSpace1 * 4 + colorSize * 3, colorSize, colorSize);
}

// draw colored rectangles based on grid
function drawRect(level){
    var gw = width - 70;
    var gh = height - 70;
    // add x, y, colorFill to lists when mouse clicked and hold key "r" or "R"
    if (keyIsPressed) {
        if (key == "r" || key == "R") {
            // check if mouse clicked in which grid
            for (var m = 0; m < level; m++) {
                for (var n = 0; n < level; n++) {
                    // grid axis location
                    var left = 10 + gw / level * m;
                    var up = 10 + gh / level * n;
                    var right = left + gw / level;
                    var down = up + gh / level;
                    // mouse click location to find the grid
                    if (mouseIsPressed) {
                        if ((mouseX > left) & (mouseX < right) && (mouseY > up) && (mouseY < down)) {
                            // push fillColor, x, y into lists for later draw use
                            c.push(fillColor);
                            rectX.push(left);
                            rectY.push(up);
                        }
                    }
                }
            } 
        }
    }
    // loop through lists to draw rect
    for (var x = 0; x < c.length; x++) {
        fill(c[x]);
        noStroke();
        rect(rectX[x], rectY[x], gw / level, gh / level);
    }
}

function drawLine(level) {
    var gw = width - 70;
    var gh = height - 70;
    // precision torlerence
    var tolerence = 3;
    // loop through every grid
    for (var m = 0; m < level; m++) {
        for (var n = 0 ; n < level; n++) {
            var left = 10 + gw / level * m;
            var up = 10 + gh / level * n;
            var right = left + gw / level;
            var down = up + gh / level;

            // hold key to get the line weight
            if (keyIsPressed) {
                var currentKey = key;
            }
            // check mouseX and mouseY to determine if to draw a line
            if (mouseIsPressed) {
                // vertical lines into lists
                if (mouseY > up + tolerence & mouseY < down - tolerence) {
                    if (mouseX > left - tolerence && mouseX < left + tolerence) {
                        lineL.push(left);
                        lineR.push(left);
                        lineU.push(up);
                        lineD.push(up + gh / level);
                        w.push(currentKey);
                    }
                }
                // horizontal lines into lists
                if (mouseX > left + tolerence & mouseX < right - tolerence) {
                    if (mouseY > up - tolerence && mouseY < up + tolerence) {
                        lineL.push(left);
                        lineR.push(left + gw / level);
                        lineU.push(up);
                        lineD.push(up);
                        w.push(currentKey);
                    }
                }
            }
        }
    }
    // draw lines based on lists
    for (var x = 0; x < lineL.length; x ++) {
        strokeWeight(w[x]);
        noFill();
        stroke(0);
        line(lineL[x], lineU[x], lineR[x], lineD[x]);
    }
}

This project is to create a de stijl drawing of your own. By clicking on level 1-3, you will get 5×5, 7×7 or 15×15 grids.

Hold key “1” to “9” and click on the the grid edge to draw lines with the exact line weight. (selection precision tolerance is 3 pixels)

Click on the color keys on the lower left corner to select color. Holding “r” or “R” and clicking on the grid will draw rectangles that are the size of the grid. When drawing rectangles, lines will be hidden. Show lines by pressing on any other keys.