yinhuid@andrew.cmu.edu – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Cathy Dong – Final Project

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

Cathy Dong-Project 12-Proposal

In the final project, I’ll be making a game that allows users to create their own De Stijl drawing. De Stijl uses abstract forms, such as vertical and horizontal compositions, and colors, such as black, and white, and prime colors. The project will be grid based and the users are able to choose grid complicity as needed. By clicking on the grids, they will be able to draw lines with various thickness and rectangle blocks with De Stijl colors. When the drawing is completed, they can hide the base grids with a simple key press.

Cathy Dong-Looking Outwards-12

I am inspired by de stijl movement. It’s a Dutch art movement founded in 1917. It emphasizes on pure abstraction and universality through a reduction to essentials of form, vertical and horizontal compositions, and color, black, white, and primary colors. The name of De Stijl comes from critic Theo Van Doesburg, and the most well-know artists are Piet Mondrian, Bart van der Leck and Vilmos Huszar. Architects such as Gerrit Rietveld, Robert van’t Hoof and JJP Oud applies this art concept to their architectural design. The projects that I admire the most are Rietveld Schroder House by Rietveld, and Eames House by Charles and Ray Eames.

Cathy-Looking Outwards-11

ADA — Jenny Sabin Studio

Jenny Sabin is an American architect, designer, artist and professor in Cornell AAP. She is exceptionally interested in designing structures based on biology and mathematics. She focuses on design and cutting-edge technologies and emphasizes on computational design, data, visualization and digital fabrication.

I am particularly inspired by her studio’s new project “ADA,” done in 2018 – 2019. The project is named after Ada Lovelace, a polymath, mathematician and first computer programmer. The project produces a human-driven cyber physical architectural pavilion. It uses lightweight knitted structure that was generated by responsive data-driven tubular and cellular modules. The high-performing pavilion offers unique spaces to wonder and experience with its filtered light and dynamic shadows.

Cathy Dong – Project 11 – Landscape

sketch

/* Cathy Dong
   Section D
   yinhuid@andrew.cmu.edu
   Project 11 - Landscape
*/

// mountain slope and move speed variables
var tDetail1 = 0.002;
var tSpeed1 = 0.0001;
var tDetail2 = 0.005;
var tSpeed2 = 0.0003;
var tDetail3 = 0.01;
var tSpeed3 = 0.0008;

// mountain colors
var terrC1 = "#597081";
var terrC2 = "#7EA0B7";
var terrC3 = "#D6EEFF";

//mountain heights range
var h1Min = 0;
var h1Max = 300;
var h2Min = 150; 
var h2Max = 400;
var h3Min = 250;
var h3Max = 480;

// star variables
var sList = [];
var sNum = 20; // number of stars
var sLeft = -20; // reset start to canvas right
var sSpeed = -0.5;

// car variables
var cList = [];
var cHeight = 20; // car height
var cWidth = 50; // car width
var cNum = 5; //number of cars
var cLeft = -20 - cWidth; // reset car to start
var cSpeed = -1.5; // car speed
var wSize = 10; // car wheel size


function setup() {
    createCanvas(480, 480);
    // star start at random px and py
    for (var j = 0; j < sNum; j++) {
        var px = random(width);
        var py = random(height / 3);
        sList[j] = starMake(px, py);
    }

    // car cx and cy
    var ground = height - height / 15;
    for (var k = 0; k < cNum; k++) {
        var cx = random(width);
        var cy = ground - wSize / 2 - cHeight;
        cList[k] = carMake(cx, cy);
    }

    
}

function draw() {
    // sky color
    background("#2B2D42");
    // render stars
    starRender();
    // render mountains 
    terrainDraw(tDetail1, tSpeed1, terrC1, h1Min, h1Max);
    terrainDraw(tDetail2, tSpeed2, terrC2, h2Min, h2Max);
    terrainDraw(tDetail3, tSpeed3, terrC3, h3Min, h3Max);
    // draw ground
    fill("#8D99AE");
    rect(0, height - height / 15, width, height / 15);
    // render car
    carRender();
    
}

// mountain draw function 
function terrainDraw(terrainDetail, terrainSpeed, terrC, terrMin, terrMax) {
    noStroke();
    // fill with layer color
    fill(terrC);
    // start drawing the shape
    beginShape();
    vertex(0, height);
    // generate terrian
    for (var i =  0; i < width; i++) {
        var t = (i * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, terrMin, terrMax);

        vertex(i, y);
    }
    vertex(width, height);
    endShape();
}

// star object
function starMake(px, py) {
    var star = {x: px, y:py, speed: sSpeed,
                update: starUpdate,
                draw: starDraw}
    return star;
}

// update star px and py
function starUpdate() {
    this.x += this.speed;
    if (this.x <= sLeft) {
        this.x += width - sLeft;
    }
}

// draw star at this.x and this.y location
function starDraw() {
    noStroke();
    fill("yellow");
    var size = random(1, 5); // make it shine
    push();
    translate(this.x, this.y);
    circle(0, 0, size);
    pop();
}

// render the star based on previous info
function starRender() {
    for (var i = 0; i < sList.length; i++) {
        sList[i].update();
        sList[i].draw();
    }
}

// car info
// a is car x position; b is car y position
function carMake(cx, cy) {
    var car = {a: cx, b: cy, speed: cSpeed, c: color(random(100), random(0), random(255)),
                update: carUpdate,
                draw: carDraw}
    return car;
}

// update car position
function carUpdate() {
    this. a += this.speed;
    if(this.a <= cLeft) {
        this.a += width - cLeft;
    }
}

// draw initial car
function carDraw() {
    // wheel location
    var wX1 = cWidth / 4;
    var wX2 = cWidth - wX1;
    noStroke();
    push();
    translate(this.a, this.b);
    // draw car
    fill(this.c);
    rect(0, 0, cWidth, cHeight);
    // draw car wheels
    fill(0);
    circle(wX1, cHeight, wSize);
    circle(wX2, cHeight, wSize);
    pop();
}

// render car to this.a and this.b
function carRender() {
    for (var m = 0; m < cList.length; m++) {
        cList[m].update();
        cList[m].draw();
    }
}

The idea is to create a night scene on a highway. In the scene, stars and mountains move relative to the cars in a various speed based on depth relationship.

Cathy Dong-Project-10-Interactive Sonic Sketch

sketch

/*  Cathy Dong
    yinhuid
    section D
    project-10-Interactive Sonic Sketch 
*/

var myOsc; //piano sound
var mySnd; //wave sound
var keyNum1 = 7; //lower key num
var keyNum2 = 5; //upper key num
var keyY = 0; //key y start from 0
var size = 20; //ball size


function preload() {
    // load wave sound
    mySnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sea.wav");
    mySnd.setVolumn(0.1);
}


function setup() {
    createCanvas(480, 360);
    //call to use sound
    useSound();
}

// piano sound
function soundSetup() { // setup for audio generation
    myOsc = new p5.Oscillator();
    // piano sound setting
    myOsc.amp(5);
    myOsc.freq(0);
    myOsc.start();
}


function draw() {
    background(0);
    //draw piano
    pianoDraw();
    //draw yellow dot
    pressDraw();
    // play piano when pressed on
    if (mouseIsPressed) {
        mySnd.play();
        // upper keys
        if (mouseY < height / 3 * 2) {
            var keyWidth = width / keyNum1 / 2;
            var keyGap = width / keyNum1 / 4 * 3;
            // upper 1
            if (mouseX > keyGap & mouseX < keyGap + keyWidth) {
                myOsc.freq(277.18);
            }
            //upper 2
            else if (mouseX > keyGap * 2 + keyWidth / 2 & mouseX < keyGap * 2 + keyWidth * 1.5) {
                myOsc.freq(311.13);
            }
            //upper 3
            else if (mouseX > keyGap * 3 + keyWidth * 3 & mouseX < keyGap * 3 + keyWidth * 4) {
                myOsc.freq(369.99);
            }
            //upper 4
            else if (mouseX > keyGap * 4 + keyWidth * 3.5 & mouseX < keyGap * 4 + keyWidth * 4.5) {
                myOsc.freq(415.3);
            }
            //upper 5
            else if (mouseX > keyGap * 4 + keyWidth * 5.5 & mouseX < keyGap * 4 + keyWidth * 6.5) {
                myOsc.freq(466.16);
            }
        }
        // lower keys
        else if (mouseY > height / 3 * 2) {
            var keyWidth = width / keyNum1;
            // lower 1
            if (mouseX > 0 & mouseX < keyWidth) {
                myOsc.freq(261.63);
            }
            // lower 2
            else if (mouseX > keyWidth & mouseX < keyWidth * 2) {
                myOsc.freq(293.66);
            }
            //lower 3
            else if (mouseX > keyWidth * 2 & mouseX < keyWidth * 3) {
                myOsc.freq(329.63);
            }
            //lower 4
            else if (mouseX > keyWidth * 3 & mouseX < keyWidth * 4) {
                myOsc.freq(349.23);
            }
            //lower 5
            else if (mouseX > keyWidth * 4 & mouseX < keyWidth * 5) {
                myOsc.freq(392.00);
            }
            //lower 6
            else if (mouseX > keyWidth * 5 & mouseX < keyWidth * 6) {
                myOsc.freq(440.00);
            }
            //lower 7
            else if (mouseX > keyWidth * 6 & mouseX < width) {
                myOsc.freq(493.88);
            }
        }
    }

}

//draw mouse location as a yellow dot
function pressDraw() {
    noStroke();
    fill('yellow');
    ellipse(mouseX, mouseY, size, size);
}

//draw piano keyboards
function pianoDraw(){
    //lower keys
    stroke(0);
    strokeWeight(1);
    fill(255);
    for (var i = 0; i < keyNum1; i++) {
        var keyWidth = width / keyNum1;
        var keyX = i * keyWidth;
        var keyHeight = height;
        rect(keyX, keyY, keyWidth, keyHeight);
    }

    //upper keys
    fill(0);
    for (var j = 0; j < keyNum2; j++) {
        var keyWidth = width / keyNum1 / 2;
        var keyGap = width / keyNum1 / 4 * 3;
        var keyX = keyGap * (j + 1) + keyWidth * j / 2;
        var keyHeight = height / 3 * 2;
        //left two
        if (j < 2) {
            rect(keyX, keyY, keyWidth, keyHeight);
        }
        //right three
        else {
            var newX = keyX + keyWidth * 2;
            rect(newX, keyY, keyWidth, keyHeight);
        }
        
    }
}

This project creates keyboard with different pitches as a piano. A beach setting sound with waves and laughter is added as background.

Cathy Dong-Looking Outwards-10

Apparatum

“Apparatum,” commissioned by Adam Mickiewicz Institute, is a musical and graphical installation inspired by the Polish Radio Experimental Studio, which is one of the first studios to produce electroacoustic music. It is the fruit of digital interface meeting analog sound. The sound is generated based on magnetic tape and optical components. Boguslaw Schaeffer comes up with his personal visual language of symbols and cues and composes “symphony—Electronic Music” for the sound engineers. With two 2-track loops and three 1-shot linear tape samplers, they obtain noise and basic tones. They utilize analog optical generators based on spinning discs with graphical patterns.

Cathy Dong-Looking Outwards-09

Reflektor Distortion — Carsten Nicolai

I was inspired by Crystal Xue’s Looking Outwards 04. Carsten Nicolai is an artist and musician based in Berlin Germany, and he is known for presenting scientific quality of sound uniquely and artistically. He visualizes sound in minimalist installations. I am particularly inspired by the exhibition Reflektor Distortion at Galerie EIGEN + ART Berlin. The project utilizes disturbances, coincidences and self-organizing structures. Using the contrasting colors black and white, Nicolai visualizes the distortion nuance of frequency. The three main elements used are mirror, image and reflection. Eventually, the surface of a mirror becomes the medium that unveils reality as a distorted reflection.

Cathy Dong – Project 09 – Portrait

sketch

/* Cathy Dong
   Section D
   yinhuid@andrew.cmu.edu
   Project 09 - Portrait
*/

// load image as color base
var baseImg;

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

function setup() {
    createCanvas(480, 480);
    background(0);
    baseImg.loadPixels(); //load image pixels
    frameRate(100000); //set draw circle speed with framerate
}

function draw() {
    // set random x and y to make points
    var px = random(width);
    var py = random(height);
    // constrain to keep x and y within canvas
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    // fill with base image color
    var colorXY = baseImg.get(ix, iy);
    // change circle size based on distance to center
    var distance = dist(px, py, width / 2, height / 2);
    var cirSize = map(distance, 0, sqrt(2) * width / 2, 10, 25);

    // draw circles
    noStroke();
    fill(colorXY);
    circle(px, py, cirSize);

}

In this project, I used dots/ circles to draw the abstracted self-portrait. Since my face is centered in the image, I used smaller circles near center and larger ones on the canvas edges. The idea is to have finer resolution on the face, whereas the background is blurred.

*Drawing in process (better resolution)*

Cathy Dong-Looking Outwards-08

Kyle McDonald Presentation

Person: Kyle McDonald

Kyle McDonald is a Los Angeles-based media artist, who works with codes. Even though his presentation is informal and rather casual, I found his work appealing and amazing. With skills such as computation, 3D sensing, interactive media installation, and so on, he utilizes codes into art and creates something that the traditional media could not. He collaborates with other professionals and learn from their experience. In the presentation, he shared the work-in-progress and the insight information on the projects. It reveals how he learn and build skills to assist his career and art. In the project called “Missing,” he explores the concepts of Coexist and the relationship between human and machine.

“Leaking Lights” by Kyle McDonald