/* 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.