## Curran Zhang- Project 07- Curves

``````function setup(){
createCanvas(480,480);
}

function draw(){
background(50);
push();
translate(width/2,height/2);
push();
for (var i = 0; i < width; i+=4) {
translate(i,i)
rotate(PI * mouseX/150);
drawDevilCurve();
};
pop();
pop();
}

function drawDevilCurve(){
var range = 50;
var b = map(mouseY, 50, height-50, 0, 50);
var a = map(mouseX, 50, height-50, 0, 50);

noFill();
stroke(200);
beginShape();
for (var i = 0; i < range ; i++) {
var t = map (i, 0, range, 0,  2* PI);
var SINS = sq(sin(t));
var COSS = sq(cos(t));
var x = cos(t) * sqrt(((sq(a) * SINS) - (sq(b)*COSS)) / (SINS - COSS));
var y = sin(t) * sqrt(((sq(a) * SINS) - (sq(b)*COSS)) / (SINS - COSS));
vertex(x,y);
}
endShape();
}``````

For this project, I began with a Devil’s Curve. Upon its creation, I began playing around with the different parameters of the curve to find an interesting shape. The two parameters involving the location of the mouse includes the different shape that the function would create and the location in which the curves would spiral.

http://mathworld.wolfram.com/DevilsCurve.html

## Curran Zhang – LookingOutwards- 7

Coral City is a project produced by Craig Taylor that helps visualize a city in a non-traditional way. When we think about a map of the city, we would think about it as a drawing that shows the road, street names, and attractive spots. Craig on the other hand, wanted to use the raw data generate from a regular map and help produce geo-spatial analysis of the cities. Using this way of the representing the city, data such as political stability, crime rate, education, healthcare, and traffic are also used to not only represent the city but also assess how livable the city is.

This project caught my attention because as an architecture student, the idea of mapping is used all the time in every project. The idea of map in our era is no longer the same, generic maps that we grew looking at. With the introduction of new technology and resources, map has taken a more informative and abstract way of being represented. Maps are something that should lure people into understanding the information that is presented.

Reference:

https://towardsdatascience.com/coral-cities-an-ito-design-lab-concept-c01a3f4a2722

## Curran Zhang- Project 06 – Abstract Clock

``````/*Curran Zhang
curranz
Project 6
Section A
*/

function setup(){
createCanvas(600,600);
}

function draw(){
background(204,230,255);
angleMode(DEGREES);
var hr = hour();
var min = minute();
var sec = second();
var rSec = map(sec,0,59,50,width - 50);
var rSec1 = map(sec,0,59,width - 50, 50);
var rMin = map(min,0,59,50,width - 50);
var rMin1 = map(min,0,59,width - 50,50);
var rHr = map(hr,0,23,50,width - 50);

//Sun(based on the hours)
fill(255, 200, 60)
ellipse(rHr, 100,50,50);

//Sun Inner Rays(based on the minutes)
for (var i = 1; i <= min; i++) {
var x = 0
push();
translate(rHr,100);
rotate(180);
rotate(6 * i);
stroke(255, 204, 51);
line(0,0,0,50)
pop();
}

//Sun Outer Rays(based on the seconds)
for (var i = 1; i <= sec; i++) {
var x = 0
push();
translate(rHr,100);
rotate(180);
rotate(6 * i);
stroke(255, 234, 81);
strokeWeight(1.5);
line(rSec,0,0,50)
pop();
}

//Clouds(based on the minutes)
fill(275);
ellipse(rMin - 20,200, 50,50);
ellipse(rMin - 40,220,35,30);
ellipse(rMin,210,90,60);
ellipse(rMin + 35,200,40,40);
ellipse(rMin + 40,220,80,50);

ellipse(rMin1 - 20,200, 50,50);
ellipse(rMin1 - 40,220,35,30);
ellipse(rMin1,210,90,60);
ellipse(rMin1 + 35,200,40,40);
ellipse(rMin1 + 40,220,80,50);

//Tree
fill(165,113,100);
beginShape();
vertex(530,0,590,0);
vertex(530,0);
vertex(540,150);
vertex(540,180);
vertex(530,340);
vertex(590,340);
vertex(580,180);
vertex(580,150);
vertex(590,0);
endShape();

//Land
fill(255, 209, 179);
beginShape();
vertex(0,550);
vertex(280,375);
vertex(283,366);
vertex(325,360);
vertex(335,350);
vertex(360,340);
vertex(385,326);
vertex(470,330);
vertex(485,333);
vertex(527,331);
vertex(553,326);
vertex(558,324);
vertex(584,326);
vertex(600,330);
vertex(600,600);
vertex(0,600);
endShape(CLOSE);

//Sea
fill(0,204,255);
noStroke();
rect(0,400,600,300);

for (var i = 0; i <= 10; i++) {
fill(0,204,255);
stroke(275);
strokeWeight(1);

if (i % 2 == 0)
{arc(30 + 60 * i ,400,60,15, 180, 0)
}
else {
if (i < 5)
{fill(204,230,255);
arc(30 + 60 * i ,400,60,15, 0,180)
}
else{
fill(255, 209, 179);
arc(30 + 60 * i ,400,60,15, 0,180)
}
}
}

//SeaFloor
noStroke();
fill(0,100,102);
beginShape();
vertex(0,557);
vertex(10,554);
vertex(31,540);
vertex(40,540);
vertex(57,538);
vertex(93,545);
vertex(133,557);
vertex(182,548);
vertex(231,544);
vertex(241,546);
vertex(325,584);
vertex(403,571);
vertex(425,567);
vertex(469,567);
vertex(518,548);
vertex(580,534);
vertex(600,526);
vertex(600,600);
vertex(0,600);
endShape(CLOSE);

//Fish (based on the seconds)
fill('orange')
ellipse(rSec, 500,40,25);
triangle(rSec - 10,500,rSec - 30,515,rSec - 30,480);

fill(255,102,204)
ellipse(rSec1, 460,40,25);
triangle(rSec1 + 10,460,rSec1 + 30,475,rSec1 + 30,445);

//Text
fill(0);
text( "Hour:" + hr ,40,560);
text( "Minute:" + min ,40,575);
text( "Second:" + sec ,40,590);
}

``````

For this project, I wanted to design a clock that shows the environment changing through time. Given how I previously done a mountain scenery, I thought it would be nice to create a beach scenery. The Sun itself has component that is linked to the hour, minute, and second. There are also other components to help show the minute and seconds more clearly.

## Curran Zhang- LookingOutwards-6

Meandering River is an art installation that is located at Funkhaus Berlin. Created by the design group Kling Klang Klong, the installation is to create a vibrant river landscape that is created through the random music or sound within the room. The combination of sound and real-time painting is to create the sensation of time and the journey that it creates. By taking in the sound and deriving a colorful river landscape, admirers of the artwork is to perceive transformation over time and not only admire the instant snapshot of the ever changing surrounding.

This project caught my eye because I am captivated on how the artists were able to combine different mediums of sound, painting, and digital computation to create a perception of change. Instead of showing the basic snapshots of change through time, the human experience of sound is the dictating factor of the change within the art itself. As designers, I believe that we should strive to merge different mediums to further enhance people’s perception of our work.

Article:

Meandering River – onformative’s newest audiovisual installation to premiere at Funkhaus Berlin, July 28 to 30

## Curran Zhang- Project 05- Wallpaper

``````/*Curran Zhang
curranz
Project 5
Section A
*/

function setup() {
createCanvas(600, 600);
}

function draw() {
background(128);
var rectl = 100;
var rectw = 100;
var oy = rectw/2;
var ox = rectl/2;
var ml = 50;
var mw = 5;

//Applying the gradient on shapes that are fixed
for (var x = 0; x < width; x+=rectl) {
for (var y  = 0; y <height; y+= rectw){
var R = map(x,0,width,100,300);
var B = map(y,0,height,100,200);
var R1 = map(x,0,width,300,100);
var B1 = map(y,0,height,200,100);

fill(R,200,B);
stroke(275);
strokeWeight(.4);
rect(x,y,rectl,rectw);

fill(R1,200,B1);
noStroke();
ellipse(x+rectl/2+6,y+rectw/2+4,50,50);
}
}
//Creating variations in color based using the grid
for (var x = 0; x < 6; x++) {
for (var y = 0; y < 6; y++) {
var py = oy + y * rectl;
var px = ox + x * rectw;

fill('red');
if (y % 2 == 0)
{if (x % 2 == 0){fill('green')}
};
if (y % 2 != 0)
{if (x % 2 != 0){fill('purple')}
};
noStroke();
ellipse(px,py-1.5,50,50);

fill(220);
noStroke();
arc(px,py,50.8,50.8,0,PI);

fill(0);
ellipse(px,py+.5,17,17);
rect(px-ml/2, py-mw/2+1,ml,mw);

fill(275)
stroke(0);
strokeWeight(1);
ellipse(px,py,12,12);
ellipse(px,py,7,7);
}
}
}
``````

With the topic of wallpaper, my childhood self use to want my room to be filled with things from the Pokemon games. Thus for the project I decided to create a wallpaper that related to Pokemon. With the usage of PokeBalls, they vary in colors and design. Through for loops and if statements, i was able to vary the different colors within the array.

## Curran Zhang- LookingOutwards-5

In today’s era, the line between 3D and 2D has long been erased. With the help of digital tools, 2D and 3D is practically the same thing. The work of Matteo Zamagni is proof of such occurrence. In his film, “Horror Vacui”, he dives into the dimensions of the earth. Through the help of software like PhotoScan, Google Earth, Houdini, Cinema 4D, and more, Zamagni strives to blur the distinction between reality and digital perceptions. These technologies have allowed the Zamagni to create terrains that also begin to distinguish between nature and man.

As an architecture student, the idea of blending 2D and 3D is always within our works. The additional steps of mapping out nature and man gives it another push into what architecture students should aim to contribute or change. The idea of mapping out terrains can be stretched out into different fields of work. Through the idea of mapping, concepts of actions and non-tangible things can be produced into 2D works. This would open up many pathways of the representation in all fields.

Source:

Horror Vacui – Exploring Earth’s (un)real geological formations

## Curran Zhang – Project 04 – String Art

``````/*Curran Zhang
curranz
Project 4
Section A
*/

function setup(){
createCanvas(600,600);
background(75);
var rectH ;
var rectW ;
var smallH ;
var x1 ;
var y1 ;
var x2 ;
var y2 ;
var x3 ;
var y3 ;
var x4 ;
var y4 ;
var l1 ;
}
var sx = 500;
var sy = 100;
var angle = 0;

function draw(){
background(0);
rectH = height - mouseY;
rectW = rectH;
smallH = rectH/4;
x1 = width/2 - rectW/4;
y1 = mouseY - 20;
x2 = width/2 - rectW/4;
y2 = mouseY -20;
x3 = width/2 + rectW/4;
y3 = mouseY - 20;
x4 = width/2 + rectW/4;
y4 = mouseY - 20;
l1 = width/2 - rectW/2-4;

//Bridge (RED) Lines
for (var i = 0; i <= 600; i += 30) {
stroke(40);
line(0,i,width/2 - rectH  /2,mouseY );
line(600,i,width/2 + rectH /2,mouseY );
}

for (var i = 0; i <= 600; i += 40) {
stroke('red');
line(0,i,width/2 - 10,mouseY );
line(600,i,width/2 + 10,mouseY );
}

for (var i = 0; i <= 240; i += 40) {
stroke('red');
line(i,600,width/2 - 10,mouseY );
line(i,0,width/2 - 10,mouseY );
}

for (var i = 360; i <= 600; i += 40) {
stroke('red');
line(i,600,width/2 + 10,mouseY );
line(i,0,width/2 + 10,mouseY );
}

//Bridge Structure
for (var i = 0; i <= 100; i++) {
stroke(230);
x1 -= 4;
if (x1 < width/2- rectW/2) {x1 = width/2- rectW/2};
y1 += 30;
line(x1,mouseY,width/2 - rectW/2,y1);
}

for (var i = 0; i <= 50; i++) {
stroke(230);
x2 += 4;
if (x2 > width/2 ) {x2 = width/2 };
y2 += 30;
line(x2,mouseY,width/2,y2);
}

for (var i = 0; i <= 100; i++) {
stroke(230);
x3 -= 4;
if (x3 < width/2) {x3 = width/2};
y3 += 30;
line(x3,mouseY,width/2 ,y3);
}

for (var i = 0; i <= 50; i++) {
stroke(230);
x4 += 4;
if (x4 > width/2 + rectW/2) {x4 = width/2 + rectW/2};
y4 += 30;
line(x4,mouseY,width/2+rectW/2,y4);
}

for (var i = 50; i <= 200; i++) {
stroke(230);
l1+=4;
if (l1 > width/2 + rectW/2) {l1 = width/2 + rectW/2};
line(l1,mouseY-smallH,l1, mouseY);
}

//Sun
for (var i = 0 ; i <360; i+=8) {
push();
translate(500, 100);
stroke(255,200,21);
line(0,0,50,0);
pop();
angle = angle + .01;
}
}

``````

At the beginning of the project, when I first thought of string art, I thought about the Brooklyn Bridge. The Brooklyn Bridge is supported through cables and create a wild variety of designs at different locations. Thus, I began making creating the drawing similarly to how to bridge itself is created.

## Curran Zhang-LookingOutwards-4

This article begins to talk about the merge of music and technology. With the idea of robots being able to do jobs that humans can, many people begin to wonder whether robots and AI would have to ability to create music without the need of humans. Francois Pachet, head of SONY’s computer science lab in Paris, believed that they were very close to programming computers into creating melodies through the mashing of music’s produced by Legrand and McCartney. According to scientist, composer, and author, David Cope, music contains instructions that can be synthesized into different yet similar outputs. Cope also designed EMMY, an emulator, that creates music that are similar to Bach chorale, Mozart sonata, Chopin mazurka and Joplin Rag.

This ongoing process captured my attention since people within this field has a strong desire to link machine to music. In this era, the idea of multidisciplinary designs and work are applied in every field. Yet art, especially music, and machine are one of the harder combinations due to its different workflow. By trying to merge the two fields together, both fields of work would have layers of new discovery and understanding. Music that makes people cry, happy, and emotional would no longer only be achieved by people, but also by machines.

https://www.theatlantic.com/entertainment/archive/2014/08/computers-that-compose/374916/

## Curran Zhang-Project03-Dynamic Drawing

``````/*Curran Zhang
Section A
curranz@andrew.cmu.edu
project_03/
*/

var R = 0;
var G = 170;
var B = 225;
var leftwall = (75);
var rightwall = (525);
var angle = 0;

function setup() {
createCanvas(600,600);
var r = 1
var spinx = cos(angle)*r
var spiny = sin(angle)*r
var con = constrain(mouseX,leftwall,rightwall);
var skycolor = mouseX/(600/225);
}

function draw()
{
background(R,G,B);
if (mouseX > 0 & mouseX < width)
{ R = 0 - mouseX/20;
G = 150 - mouseX/4;
B = 225 - mouseX/4;
}

//Stars
if (mouseX > width/3){
push();
fill('white');
ellipse(50,50,1.5,1.5);
angle = angle + 1;
pop();
push();
fill('white');
ellipse(100,100,3,3);
angle = angle + 1;
pop();
push();
fill('white');
ellipse(100,200,3,3);
angle = angle + 1;
pop();
push();
fill('white');
ellipse(300,30,3,3);
angle = angle;

pop();
fill(255);
push();
translate(250, 75);
rectMode(CENTER);
rect(0, 0, 2, 2);
pop();
push();
translate(400, 200);
rectMode(CENTER);
rect(0, 0, 3, 3);
pop();
push();
translate(100, 150);
rectMode(CENTER);
rect(0, 0, 4, 4);
pop();
push();
translate(175, 225);
rectMode(CENTER);
rect(0, 0, 5, 5);
pop();
push();
translate(500, 180);
rectMode(CENTER);
rect(0, 0, 5, 5);
pop();
angle = angle + 2;
}
//Sun and Moon
fill('yellow');
var con = constrain(mouseX,leftwall,rightwall);
ellipse(con, 90, 70, 70);
if(mouseX > width/2)
{var x2 = map(mouseX, 0, width,120, 0, true);
fill(0,150 - mouseX/4,225 - mouseX/4);
strokeWeight(0);
ellipse(mouseX - x2, 90, 70, 70);
}
//Mountain
fill(178,71,154);
beginShape();
vertex(0,254);
vertex(2,252);
vertex(60,262);
vertex(148,246);
vertex(259,254);
vertex(460,195);
vertex(600,244);
vertex(600,600);
vertex(0,600);
endShape(CLOSE);

fill(129,61,151);
beginShape();
vertex(0,327);
vertex(10,324);
vertex(31,310);
vertex(40,310);
vertex(57,308);
vertex(93,315);
vertex(133,327);
vertex(182,318);
vertex(231,314);
vertex(241,316);
vertex(325,354);
vertex(403,341);
vertex(425,337);
vertex(469,337);
vertex(518,318);
vertex(580,304);
vertex(600,296);
vertex(600,600);
vertex(0,600);
endShape(CLOSE);

fill(77,40,119);
beginShape();
vertex(0,445);
vertex(33,435);
vertex(56,425);
vertex(70,413);
vertex(109,413);
vertex(130,420);
vertex(180,433);
vertex(227,439);
vertex(260,445);
vertex(283,436);
vertex(325,429);
vertex(335,420);
vertex(360,409);
vertex(385,396);
vertex(470,400);
vertex(485,403);
vertex(527,401);
vertex(553,396);
vertex(558,394);
vertex(584,396);
vertex(600,400);
vertex(600,600);
vertex(0,600);
endShape(CLOSE);

fill(205,121,178);
beginShape();
vertex(12,268);
vertex(30,271);
vertex(37,277);
vertex(55,277);
vertex(46,285);
vertex(28,285);
vertex(27,280);
vertex(17,277);
endShape(CLOSE);

fill(205,121,178);
beginShape();
vertex(165,271);
vertex(179,257);
vertex(211,253);
vertex(213,261);
vertex(233,263);
vertex(242,276);
vertex(210,274);
vertex(196,268);
endShape(CLOSE);

fill(205,121,178);
beginShape();
vertex(473,209);
vertex(499,224);
vertex(528,228);
vertex(567,244);
vertex(590,251);
vertex(590,278);
vertex(573,281);
vertex(549,268);
vertex(519,267);
vertex(492,256);
vertex(472,237);
vertex(466,219);
endShape(CLOSE);

fill(54,31,86);
rect(0,575,600,50);
//Tree
fill(54,31,86);
rect(30,540,6,35);
if (mouseX > 15 & mouseX < 45) {
fill(54,31,86);
ellipse(33,530,20,40);
} else{
fill(54,31,86);
ellipse(33,540,20,40);}
rect(60,550,6,25);
if (mouseX > 45 & mouseX < 75) {
fill(54,31,86);
ellipse(63,540,20,40);
} else{
fill(54,31,86);
ellipse(63,550,20,40);}
rect(120,545,6,30);
if (mouseX > 105 & mouseX < 135) {
fill(54,31,86);
ellipse(123,535,20,40);
} else{
fill(54,31,86);
ellipse(123,545,20,40);}
rect(150,550,6,25);
if (mouseX > 135 & mouseX < 165) {
fill(54,31,86);
ellipse(153,540,20,40);
} else{
fill(54,31,86);
ellipse(153,550,20,40);}
rect(180,540,6,35);
if (mouseX > 165 & mouseX < 195) {
fill(54,31,86);
ellipse(183,530,20,40);
} else{
fill(54,31,86);
ellipse(183,540,20,40);}
rect(210,550,6,25);
if (mouseX > 195 & mouseX < 225) {
fill(54,31,86);
ellipse(213,540,20,40);
} else{
fill(54,31,86);
ellipse(213,550,20,40);}
rect(240,550,6,25);
if (mouseX > 225 & mouseX < 255) {
fill(54,31,86);
ellipse(243,540,20,40);
} else{
fill(54,31,86);
ellipse(243,550,20,40);}
rect(300,550,6,25);
if (mouseX > 285 & mouseX < 315) {
fill(54,31,86);
ellipse(303,540,20,40);
} else{
fill(54,31,86);
ellipse(303,550,20,40);}
rect(330,550,6,25);
if (mouseX > 315 & mouseX < 345) {
fill(54,31,86);
ellipse(333,540,20,40);
} else{
fill(54,31,86);
ellipse(333,550,20,40);}
rect(360,550,6,25);
if (mouseX > 345 & mouseX < 375) {
fill(54,31,86);
ellipse(363,540,20,40);
} else{
fill(54,31,86);
ellipse(363,550,20,40);}
rect(390,540,6,35);
if (mouseX > 375 & mouseX < 405) {
fill(54,31,86);
ellipse(393,530,20,40);
} else{
fill(54,31,86);
ellipse(393,540,20,40);}
rect(420,550,6,25);
if (mouseX > 405 & mouseX < 435) {
fill(54,31,86);
ellipse(423,540,20,40);
} else{
fill(54,31,86);
ellipse(423,550,20,40);}
rect(450,550,6,25);
if (mouseX > 435 & mouseX < 465) {
fill(54,31,86);
ellipse(453,540,20,40);
} else{
fill(54,31,86);
ellipse(453,550,20,40);}
rect(510,540,6,35);
if (mouseX > 495 & mouseX < 525) {
fill(54,31,86);
ellipse(513,530,20,40);
} else{
fill(54,31,86);
ellipse(513,540,20,40);}
rect(540,550,6,25);
if (mouseX > 525 & mouseX < 555) {
fill(54,31,86);
ellipse(543,540,20,40);
} else{
fill(54,31,86);
ellipse(543,550,20,40);}
rect(570,550,6,25);
if (mouseX > 555 & mouseX < 585) {
fill(54,31,86);
ellipse(573,540,20,40);
} else{
fill(54,31,86);
ellipse(573,550,20,40);
}
}

``````

For this project, I tried to incorporate if statements into the code to create more motion. The most difficult part was getting the trees to move up and down, but the problem was solved with the help of if/else statements.

## Curran Zhang- LookingOutwards-3

The chAIr Project was created through the collaborations of Philipp Schmitt, Steffen Weiss, and two neural networks. The point of this project as to reverse the roles of chairs and human and switch up the normal perspective of everyday objects. As designs for chairs become more functional and efficient for the everyday usage, the idea of creating a chair without those constraint was put into play. Through the usage of AI, 20th-century chair designs were contained in a data set and the best quality of the chairs were pulled out. The best quality is no longer based on functional or efficiency but based off what is the prettiest and most visually captivating. Through the creations of AI, there were chairs that looked nothing like furniture or not functional at all.

This project was interesting as it tries to let observers have a perspective that is complete opposite that of a human perspective. Although the chairs generated hold no function as a chair, this project stimulated us into thinking what would be the “prettiest” chair without normal constraints of functionality. I believe that kind of thinking should be implemented in all designer’s concepts. Creating a perspective that doesn’t follow the observers’ assumption; creating chairs that are not for sitting or creating space that shouldn’t exist. Having observers questioning their predetermined thoughts help push designs to a new level.

The chAIr Project – Reversing the role of human and machine in the design process