In architecture, we often have to use brushes in Photoshop. A good brush often makes a drawing very successful. Thus for this project, I decided to render a brush with cubes rotating at different angles with a change in gradient depending on the number of cubes that are drawn. Since WebGL does not support text, I could not explain the direction on the canvas. But ways the users can interact with the brush are: “h” = erase the canvas, “j” = turn off the randomness in size, after pressing j, the user can press “l” to make the cubes bigger, or “k” to make the cubes smaller. The user can also press a to increase the speed of rotation.

sketch

/*
Yingying Yan
Final Project_ Cube Brush
Section E
*/

var cube = []; // the array that stores all the cubes;
var count = 1; // keeps track of the number of cubes
var rr; //color 1
var bb; //color 2

//parameters that are controlled by the keys
var angle = 0; // the rotation of the cubes
var cSize; // the size of the cubes
var bigger = 10; // using key to make the size bigger
var turn = 0.01;
var randomm = true;// use key to turn off randomness of the size


function setup() {
    createCanvas(400,400, WEBGL);
    rr = color(204, 102, 0);
    bb = color(0, 102, 153);
}

function draw() {
    background(220);
    //the orgin for WEBGL is center, move it back to the p5js orgin
    translate(-width / 2, -height / 2);
    //space between the cubes
    var f = frameCount % 2 == 0
    //the size of each cube
    if (randomm) {
        cSize = random(5, 20);
    } else {
        cSize = bigger;
    }
    
    for (var i = 0; i < cube.length; i++) {
         cube[i].draw()

    } 
    //users drawing the cubes
    if (mouseIsPressed) {
        if (f) {
        var ccube = makeCube( cSize, cSize, cSize, mouseX, mouseY, turn);
        count += 1;
        cube.push(ccube);
        }
    }
}

//how the users can interact with the brush by pressing different keys

function keyPressed() {
    //erasing everything
    if (key == "h") {
        cube = [];
        count = 0;
        randomm == true;
        turn = 0.01;
    }

    //turn off randomness in sizes
    if (key == "j") {
        randomm = !randomm;
    }

    //make the cubes bigger after turning off the randomness
    if (key == "l") {
        bigger += 10;
    }

    //make the cubes smaller after turning off the randomness
    if (key == "k") {
        bigger -= 5;
    }
    //make the cubes spin faster
    if (key == "a") {
        turn += 0.1
    }
}


function makeCube (x, y, d, px, py, turn) {
    //use a color gradient depending on the number of cubes that are drawn
    var r = lerpColor(rr, bb ,sin(count / 30));
    //make the color more transparent
    var color_trans = (color(red(r), green(r), blue(r),120));

    return{ x: x,
            y: y,
            d: d,
            px: px,
            py:py,
            ang: random(0,90),
            tturn:turn,
            c: color_trans,
            draw: drawCube
        }
}


function drawCube() {
    //rotate around the corner
    rectMode(CORNER);
    noStroke();
    fill (this.c);
    //drawing the cube with rotation
    push();
    translate(this.px, this.py)
    rotateX(this.ang);
    rotateY(this.ang * 0.2);
    rotateZ(this.ang* 1.5);
    box(this.x, this.y, this.d);
    this.ang += this.tturn;
    pop();

}

For the final project, I am interested in data visualization. More specifically, I want to represent the data of Pittsburgh’s rainfall record using what I learned from 104. The goal of this project is to allow people to “see” how much rainwater Pittsburgh gets for the past year. And what we can possibly do with the rainwater if we collected fifty percent or thirty-five percent of it. The project should also be visually attractive and easy to understand. So the audience will be interested and comprehending the message that the project tries to relate.

I am not sure how this project will look like yet.

The two projects I find interesting are both from data visualization practitioners. Phantom Terrains by Stefanie Posavec is an audio interface which communicates the silent wireless signals that are in London, where they collected the data from. The goal was to convert the characteristics of the invisible wireless data into sound. People will be able to hear the changes in the landscape of sound around them. I am less interested in what the experience the soundtrack creates. But the visualization that the project created is very interesting. It conveys the information while also visually attracting.

The second project that I am interested in is Unnumbered Spark by Aaron Koblin. This is a sculpture or building size installation that allows the audience to control the projection on the soft fabric. This project is more like a motivation for me. Allow me to see what data visualization can possibly become.

/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project-11
*/
//make an array so i can draw more than one flower
var ttl = [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2];

function setup() {
    createCanvas(480, 240);
    background(0);
    frameRate(10);
    //set up the make turtle 
    for(var i = 0; i < ttl.length; i++) {
    	ttl[i] = makeTurtle(random(width), random(height));
    }
}

function draw() {
	for(var i = 0; i < ttl.length; i++) {
		ttl[i].setWeight = (random(0.1,5));
    	ttl[i].setColor = (random(150), random(200), random(255));
    	//start drawing the flowers
		ttl[i].penDown();
		var dd = 4
		ttl[i].forward (dd);
		ttl[i].right(dd);
		ttl[i].right(dd);
		ttl[i].forward(dd);
		ttl[i].left(dd)
		ttl[i].forward(dd * i);
		ttl[i].left(150);
	}


}
//restart the drawing
function mousePressed(){
	background(0)
}

//////////////////////////////////////////////////////////////
function turtleLeft(d) {
    this.angle -= d;
}


function turtleRight(d) {
    this.angle += d;
}


function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}


function turtleBack(p) {
    this.forward(-p);
}


function turtlePenDown() {
    this.penIsDown = true;
}


function turtlePenUp() {
    this.penIsDown = false;
}


function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}


function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}


function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}


function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}


function turtleSetColor(c) {
    this.color = c;
}


function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
}


function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

A long distance relationship is a project done Cecdet Erek, who is one of the founding members of an experimental outfit called Necropsy. The project focuses on the relationship between two points, space or time. The continuation of his ongoing project Rulers and Rhythms lies in between two rhythms centered pieces conceived for MUAC: Measures Taken and Close FarClose. This project is not only music itself but also combines computational musind architecture. I think it is very cool to vary the media and add elements to other projects. I thinking of

sketch

/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project - 10
*/

var snowman = [];

function setup() {
	createCanvas(480, 240);
	for (var i = 0; i < 4; i++) {
		var rx = random(width);
		snowman[i] = makeSnowman(rx);
	}
	frameRate(10);
}

function draw() {
	background("green");
	//background
	displayHorizon();
	//snowman
	updateAndDisplaySnowman();
	removeSnowmanThatHaveSlippedOutOfView();
	addNewSnowmanWithSomeRandomProbability();
}

function updateAndDisplaySnowman() {
	for(var i = 0; i < snowman.length; i++) {
		snowman[i].move();
		snowman[i].display();
	}
}

function removeSnowmanThatHaveSlippedOutOfView() {
	var snowmanKeep = [];
	for (var i = 0; i < snowman.length; i++) {
		if(snowman[i].x + 50 > 0) {
			snowmanKeep.push(snowman[i]);
		}
	}
	snowman = snowmanKeep;
}

function addNewSnowmanWithSomeRandomProbability() {
	var newSnowmanPercent = 0.006
	if (random(0,1) < newSnowmanPercent) {
		snowman.push(makeSnowman(width))
	}
}
//move towards the left 

function snowmanMove() {
	this.x += this.speed;
}
//function that draws the snowman

function snowmanDisplay() {
	push();
	fill(255);
	noStroke();
	var sizeBottom = 35;
	var sizeMiddle = 25;
	var sizeTop = 20;
	var yy = height-35;
	//translate(this.x, height - 35);
	translate(this.x, 0);
	//bottom circle
	ellipse(0, yy - sizeBottom / 2, sizeBottom, sizeBottom);
	//middle circle
	ellipse(0, yy - sizeBottom - sizeMiddle / 2 +5 , sizeMiddle, sizeMiddle);
	// //top circle
	// ellipse(0, yy - sizeBottom - sizeMiddle - sizeTop / 2 + 10, sizeTop, sizeTop);
	push();
	fill(0);
	ellipse(0 - 5, yy - sizeBottom - sizeMiddle / 2 + 2, 2, 2);
	ellipse(0 + 5, yy - sizeBottom - sizeMiddle / 2 + 2, 2, 2);
	noFill();
	stroke(0)
	ellipse(0, yy - sizeBottom - sizeMiddle / 2 + 5, 4, 4);
	line(15, yy - sizeBottom / 2, 30, yy - 40);
	line(-15, yy - sizeBottom / 2, -30, yy - 40);
	pop();	
	pop();
}

//define all the objects and variables

function makeSnowman(positionOg) {
	var sman = {
		x: positionOg,
		//y: 380,
		speed: -1.0,
		move: snowmanMove,
		display: snowmanDisplay
	}
	return sman;
}

//background
function displayHorizon() {
	fill("lightblue");
	rect(-1,-1, width + 1, height - 39);
}

I wanted to render some snow scene because I love the snow. Unfortunately, I can barely finish the project. But I have a snowman! I mean lots of snowmen. I think this project is hard and really makes me think about “object”. I am still in the process of understanding the code. I think for my final project if I would do something similar, it will be much better than this.

The newest project Lumen creates a space I really want to experience. It is very interesting because of the fabrication materials, the shapes of each element and how the structure come together.

sketch

/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project - 09
*/

var zoey; //a picture

function preload() {
	var zoeyPic = "https://i.imgur.com/QcSx6L4.jpg"
    zoey = loadImage(zoeyPic);
}

function setup() {
    createCanvas(480, 320);
    background(0);
    zoey.loadPixels(); //get pixels from the picture
    frameRate(30);
}

function draw() {
    var x = random(width); //x position of the storke
    var y = random(height); //y postotion of the stroke
    var px = constrain(floor(x), 0, width-1); //x position of each pixel
    var py = constrain(floor(y), 0, height-1); //y position of each pixel
    var theColorAtLocationXY = zoey.get(px, py); //get the color of each pixel
    stroke(theColorAtLocationXY); //draw out zoey with small stokes
    strokeWeight(random(1,5));
    line(x, y, x - random(0, 9), y - random(0, 9));
}

I regret using my little sister’s picture. She is so cute but I am not good enough to render her picture to something better. But that is ok because she will never see this. Overall I think this project is interesting. It is like making a filter for photoshop. I started the project by trying to do something fancy, but I failed. I will try to fix that after I turn this in.

This week I looked over Romi Jin’s looking outwards 5. She is my mentor from architecture, so I thought I could learn from her. Her looking outwards was about occluder simplification. The reason why she chose this is probably that the occluder simplification used bunny as an example, and she loves bunny.

Sha Hwang is an information designer who is working to improve the government at Nava. He founded Meshu, Motivity and worked for Trulia. He started by studying architecture, then animation, modeling and finally data visualization. His works are amazing, but his personality is what made him more successful. In the video, he said: “ I do not have much, but I have enough to give someone space, time to breath.” He knows what is right and does his best to support those rights. He mentioned his mother and her influence on him. He talked about lighting and how it searches for the ground similar to how someone can live one’s life and search for the “one thing” to do. He is inspiring, so as his artwork.

I am doing a mapping project in the studio now. Sha’s mapping methods allow me to think more out of the box. His mapping methods are simple, visually attractive, and more importantly, conveying the information effectively. There are 2D graphics, 3D representations, animations and more. My favorite project from his website is the Photo Reel, which is a collage. He combined 2D collage with computation interaction. I think that is innovative.