Yingying Yan – Final Project

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.


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() {
    //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++) {

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

//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,
            ang: random(0,90),
            c: color_trans,
            draw: drawCube

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


Yingying Yan- Project-12-Proposal

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.

Yingying Yan-Looking Outwards-12

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.

2d graphic

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 – Project 11 Composition

Yingying Yan
Section E
//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);
    //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
		var dd = 4
		ttl[i].forward (dd);
		ttl[i].forward(dd * i);

//restart the drawing
function mousePressed(){

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) {

function turtlePenDown() {
    this.penIsDown = true;

function turtlePenUp() {
    this.penIsDown = false;

function turtleGoTo(x, y) {
    if (this.penIsDown) {
      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;

LookingOutward 11

Architecture and sequence

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

A long distance relationship

Yingying Yan- Project 10- Landscape


Yingying Yan
Section E
Project - 10

var snowman = [];

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

function draw() {

function updateAndDisplaySnowman() {
	for(var i = 0; i < snowman.length; i++) {

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

function addNewSnowmanWithSomeRandomProbability() {
	var newSnowmanPercent = 0.006
	if (random(0,1) < newSnowmanPercent) {
//move towards the left 

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

function snowmanDisplay() {
	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);
	ellipse(0 - 5, yy - sizeBottom - sizeMiddle / 2 + 2, 2, 2);
	ellipse(0 + 5, yy - sizeBottom - sizeMiddle / 2 + 2, 2, 2);
	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);

//define all the objects and variables

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

function displayHorizon() {
	rect(-1,-1, width + 1, height - 39);

add cap

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.

Yingying Yan-LookingOutwards-10

Pattern from the Lumen project

Different from traditional architecture, architect Jenny Sabin’s Sabin Design Lab in Ithaca, New York investigates the interaction between architecture and science. They apply theories from biology and mathematics to designs, fabrication, spatial inventions and materials. The firm is a combination of engineers, architects, designers, artists, and even scientists. The scales of their work varies, from installation to a building facade. I find the form of their projects very appealing because it is dynamic and organic. It seems random but also has order and system to it.
detail of the project

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.

Overall view

Yingying Yan-LookingOutwards-09


Yingying Yan
Section E
Project - 09

var zoey; //a picture

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

function setup() {
    createCanvas(480, 320);
    zoey.loadPixels(); //get pixels from the picture

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

final result

Yingying Yan – Looking Outwards 09

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.

Example showing the abstraction
Shown by the picture above, the bunny changed from a normal bunny to a distorted one. This is because the algorithm takes in very few inputs and simplifies the geometry in an abstract way. As Romi mentioned, this can be very useful when applying to larger and more complex shapes. This algorithm produced a unique and interesting graphic compare to the original. Yet, I think it needs to be developed more because it could be more visually appealing.

Yingying Yan – Looking Outwards 08

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.

An example of his mapping method

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.

The collage