## ShanWang-Project-07-Curves

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Project-07

var nPoints = 300;
var a;
var x;
var y;
var posX;
var posY;
var color = 0;
var numLayer = 3;
var numCurve = 6;

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

function draw(){
background(0);
//constrain the x, y position of mouse;
posX = constrain(mouseX, 0, width);
posY = constrain(mouseY, 0, height);

//control the amount that shift in x and in y direction with the position of mouse;
var shiftY = map(posY, 0, height,1,5);
var shiftX = map(posX, 0, width,1,5);

//define unit of offsets;
var intervX = width/10;
var intervY = height/10;

//generate three layer of multiple curves;
for (var j = 0; j<numLayer; j++){
for (var i = 0; i<numCurve; i++) {
//cotrol the degree of curvatures with the change in mouse X;
a = map(mouseX, 0, width, -width/3, width/2);
//control the factor of scaling with the change of shift;
var scaleX = shiftX/(3-j)*(i+1);
var scaleY = shiftY/(3-j)*(i+1);
color = (i+1)*10*(j+3);
drawConchoid(shiftX+i*intervX, shiftY+i*intervY,a,scaleX,scaleY,color);
}
}
}

// draw Conchoid of De Sluze Curve
function drawConchoid(sX, sY, a, scaleX, scaleY,color){
push();
stroke(color);
//move the curvatures with the mouse;
translate(posX,posY);
beginShape(POINTS);
for (var i = 0; i < nPoints; i++){
var t =  map(i, 0, nPoints, 0, TWO_PI);
x = (1/cos(t)+ a* cos(t))* cos(t);
y = (1/cos(t)+ a* cos(t))* sin(t);
x *= scaleX;
y *= scaleY;
vertex(x+sX,y+sY);
}
endShape();
pop();
}

In this project I experimented with a lot of functions that create different curvatures, and I was mainly exploring the dynamic movement of the curves associating with the mouse.

I also tried to create black background in contrast with points of different gradient for a sense of space and depth.

## ShanWang-LookingOutwards-07

Five Levels Deep, centered on category of History

The WikiViz,  or the Visualizing Wikipedia project created by Chris Harrison was of particular interest to me. As a human edited entity and encyclopedia, connections between topics are really complicated and sometimes surprising. The comprehensive organization and visualization of these data are fascinating and sometimes revealing: it’s hard to believe how interconnected seemingly unrelated topics can be. Getting frustrated with GraphViz, Chris decided to build his own large-scale visualization project.

He demonstrated the progress in version 5 of this project in terms of graph layout algorithm, which allowed him to scale the enormous amount of vertices and edges (articles and article links) into a relatively manageable one with a shorter run time. For future improvement, he is still working on the collection of true page links with data directly from article content for a more accurate representation of Wikipedia’s true structure.

He had included some sample renderings of topics centered on different categories on his website.

## ShanWang-Project06-Abstract Clock

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Assignment-06-Project

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

function draw() {
background('#E79460')
var cX = width/2;
var cY = height/2;
var lX = width/2;
var lY = height/2;
var rX = width/2;
var rY = height/2;
var sX = width/2-40;
var sY = height/2+70;
var sec = second();
var min = minute();
var hr = hour()+10;
//set intervals for different planes;
var intT = 1;
var intL = 5;
var intR = 8;
var intS = 0.7;
//set alpha value variable
var alphaV = 0;

//draw base plane (black) with no outlines;
topPlane(width*2/3-50,height*3/4,90,100,"black",false);
leftPlane(width*2/3-50,height*3/4,90,5,'#FFB11B',false);
rightPlane(width*2/3-50,height*3/4,5,100,'#FFC408',false);

//draw top planes that increment every second; resets after a cycle of 60
for (var i=0; i<sec; i++){
topPlane(cX,cY,40,intT,'#985F2A',false)
cX = cX + intT/cos(45);
cY = cY - intT/cos(45);
}

//draw left planes that increment every minute; resets after a cycle of 60
for (var i=0; i<min; i++){
leftPlane(lX,lY,40,intL,"white",false);
lY += intL;
}

//draw right planes that increment every hour; resets after a cycle of 24
var len = dist(width/2,height/2,cX,cY);
for (var i=0; i<hr; i++){
rightPlane(rX+4, rY+8,intR,60,"red",false);
rY += intR;
}

//draw edge planes that compose the three dimensional image
leftPlane(width/2+4,height/2+8,2,intR*hr,25,false);
topPlane(width/2+4,height/2+8,2,60,200,false);

rightPlane(width/2,height/2,7,intT*sec,55,false);

//draw side planes that increments every second; resets after a cycle of 60
for (var i=0; i<sec; i++){
var dis = min*intL-107;
rightPlane(sX,sY,dis,intS,'#005CAF',false);
sX -= intS/cos(45);
sY += intS/cos(45);
}
//draw side plane Edge
var edgeLen2 = intS*sec;
topPlane(sX+intS/cos(45),sY-intS/cos(45),2,edgeLen2,45,false);
leftPlane(sX+intS/cos(45), sY-intS/cos(45),2,dis,"black");

//dim the background every second;
alphaV += sec%59 * 3;
noStroke();
fill(0,0,0,alphaV);
rect(0,0,width,height);

}

function topPlane (cX, cY, side1, side2, color,outline){
var p1X = cX - side1/cos(45);
var p1Y = cY - side1/cos(45);
var p2X = p1X + side2/cos(45);
var p2Y = p1Y - side2/cos(45);
var p3X = cX + side2/cos(45);
var p3Y = cY - side2/cos(45);
fill(color);
if (outline == false){
noStroke();
quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
}
else{
stroke(0);
quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
}
}

function leftPlane (cX, cY, side1, side2,color,outline){
var p1X = cX;
var p1Y = cY + side2;
var p2X = p1X - side1/cos(45);
var p2Y = p1Y - side1/cos(45);
var p3X = cX - side1/cos(45);
var p3Y = cY - side1/cos(45);
fill(color);
if (outline == false){
noStroke();
quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
}
else{
stroke(0);
quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
}
}

function rightPlane (cX, cY, side1, side2, color,outline){
var p1X = cX;
var p1Y = cY + side1;
var p2X = p1X + side2/cos(45);
var p2Y = p1Y - side2/cos(45);
var p3X = cX + side2/cos(45);
var p3Y = cY - side2/cos(45);
fill(color);
if (outline == false){
noStroke();
quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
}
else{
stroke(0);
quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
}
}

The inspiration for the visual style of this project came from the drawings of Theo Van Doesburg, a De Stijl artist during the 1900s.
I am interested in the idea of representing the change of time with the change of space. By extending the length size of the planes, the spatial quality of the representation changes throughout the day.
Also for legibility, I set the cycle of the dimming of the background color to be every minute.

## ShanWang-LookingOutwards-06

(Silk Pavillion Installed)

Silk Pavillion is not just a bold architectural attempt, but an “exemplary combination” of scientific research, digital design and biomimetic construction by the MIT Media Lab’s Mediated Matter Group.

The project is compelling in its thorough research in silkworms’ interaction in different three dimensional spaces.The design of the primary structure was very carefully executed with robot-woven threads wrapping a steel frame. Mimicking the formation of cocoon, the pavillion was however created with a certain extent of parametric control in the basic level and with the randomness of the silk pattern produced by 6400 silkworms.

I found the Silk Pavilion to be of great importance because it opens up potentials in the collaboration among biology, information system and architecture, and it’s fascinating how the insects instinctive behavior can create functional space for human beings.

(silkworms weaving the pavilion)

## ShanWang-Project5-WallPaper

In this project, I got inspiration from the patterns on blue and white pottery from China. By making a function that draws each module, generating multiple patterns became relatively easy.

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Assignment-05-Project

function setup() {
createCanvas(700, 480);
background("white");
}
function lockSpiral(cenX,cenY,unitLen,degree,weight){
var startX = cenX;
var startY = cenY;
var len = unitLen
for (var i=0; i<degree;i++){
stroke(30,30,129);
strokeWeight(weight);
if ((i+1)%4 == 1){
line(startX,startY,startX-len,startY);
startX = startX-len
}
if ((i+1)%4 == 2){
line(startX,startY,startX,startY+len);
startY = startY+len
len += unitLen
}
if ((i+1)%4 == 3){
line(startX,startY,startX+len,startY);
startX = startX+len
}
if ((i+1)%4 == 0){
line(startX,startY,startX,startY-len);
startY = startY-len
len += unitLen
}
}
}
function cloud(cenX,cenY,largestR,unitR,num){
for (var i = 0; i<num; i++){
if (i%2 == 0){
//fill("white")
fill(30,30,129);
arc(cenX,cenY,largestR-i*unitR,largestR-i*unitR,PI,TWO_PI,CHORD);
}
if (i%2 == 1){
//fill(30,30,129);
fill("white");
arc(cenX,cenY,largestR-i*unitR,largestR-i*unitR,PI,TWO_PI,CHORD);
}
}
}

function draw() {
noLoop();
//draw spiral pattern
var intervS = width/30;
var spiralSize = width/60;

for (var i=0; i<20; i++){
lockSpiral((i+1)*intervS+i*spiralSize-5,height/2,5,13,2.5);
}

for (var i=0; i<10;i++){
lockSpiral((i+1)*intervS*2+i*spiralSize*2-10,height/2+50,10,13,4);
}
for (var i=0; i<20;i++){
lockSpiral((i+1)*intervS+i*spiralSize-5,height/2+100,5,13,2.5);
}

for (var i=0; i<20; i++){
lockSpiral((i+1)*intervS+i*spiralSize-5,height/4+15,5,13,2.5);
}

for (var i=0; i<20; i++){
lockSpiral((i+1)*intervS+i*spiralSize-5,50,5,13,2.5);
}

//draw wave pattern
var intervC = width/60;
var arcSizeS = 40;
var arcSizeB = 60;
for (var i=0; i<13; i++){
noStroke();
cloud((i+1)*intervC+i*arcSizeS+arcSizeS/3,height,50,7,8);
}
for (var i=0; i<13; i++){
noStroke();
cloud((i+1)*intervC+(i+1)*arcSizeS,height,50,7,8);
}

for (var i=0; i<10; i++){
noStroke();
cloud((i+1)*intervC+i*arcSizeB+arcSizeB/3,height/2-20,60,9,9);
}
for (var i=0; i<10; i++){
noStroke();
cloud((i+1)*intervC+(i+1)*arcSizeB,height/2-20,60,9,9);
}

push();
for (var i=0; i<26; i++){
translate((i+1)*intervC+(i+1)*arcSizeS,height*3/4);
rotate(PI);
cloud(0,0,60,9,9);
}
pop();

push();
for (var i=0; i<26; i++){
translate((i+1)*intervC+i*arcSizeS+arcSizeS/3,height*3/4);
rotate(PI);
cloud(0,0,60,9,9);
}
pop();

//draw linear pattern
stroke(30,30,129);
strokeCap(SQUARE);
strokeWeight(5);
line(0,height*4/5+18,width*2/3,height*4/5+18);
line(width*2/3+15,height*4/5+18,width,height*4/5+18);

strokeWeight(30);
line(0,height*4/5+40,width*2/3,height*4/5+40);
line(width*2/3+15,height*4/5+40,width,height*4/5+40);

strokeWeight(3);
line(0,height*12/13, width*2/3,height*12/13);
line(width*2/3+15,height*12/13, width,height*12/13);

strokeWeight(10);
line(0,height/3,width/3,height/3);
line(width/3+10,height/3,width,height/3);

strokeWeight(40);
line(0,height/5-5,width/3,height/5-5);
line(width/3+10,height/5-5,width,height/5-5);

strokeWeight(3);
line(0,10, width*2/3,10);
line(width*2/3+15,10, width,10);

strokeWeight(8);
line(0,20, width*2/3,20);
line(width*2/3+15,20, width,20);

}

## ShanWang-LookingOutwards-05

Computer Generated Graphic of Louis Khan’s library in Exeter

The Third and the Seventh project created by Alex Roman is stunning in its aesthetic sensibility and the techniques used in the process of the generation. As the man behind some of the greatest architecture visualizations of all time, Alex is an CG artists3 who utilizes DSMax and V-Ray for rendering, Photoshop for texture work, AfterEffects for compositing and color grading and Adobe Premiere for edit it all.

What’s really fascinating about this project is the fact that every frame was computer generated, and because of Alex’s incredible sensibility about lighting, shades and color, series of images arouse profound 3 dimensional, spatial feelings in a 2 dimensional display.

## ShanWang-Project-04-String-Art

In this project I first tried to create a gradient background with layers of lines like a spider web. Then I modified the code so that the central group of lines are accentuated with greater stroke weights.
At last, I created two groups of lines on the top left and down right corner of the canvas to give the entire composition a sense of enclosure.

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Project-04

var ref1Size; //size of gap for reference 1
var color;
var colorControl = 30;
var weight;
var ref1Control = 3.5;
var ref2Control = 1.5;
var weightControl = 16;
var interval1 = 10;
var interval2 = 15;

function setup() {
createCanvas(640, 480);
c1 = color(200, 219, 216);
c2 = color(99,112,145);
}
// create the function that generates the gradient
noFill();
for (var i = x; i<x+wid; i++){
var inter = map(i,x,x+wid,0,1);
var col = lerpColor(c1,c2,inter);
stroke(col);
line(i,y,i,y+hei);
}
}
function draw() {
noLoop();
weight = 0.2;
color = 220;
ref1Size = width/80;
//create background grid patterns and accentuate the shape in the middle
//use nested loop to generate multiple curves
for (var i = 1; i<7; i++){
for (var a = 0; a<18; a++){
if (i%4 == 4){
color += colorControl*1.5;
weight -= 0.01*weightControl;
ref1Size += 0.5;
} else if (i%4 == 3){
color += colorControl*0.5;
weight -= 0.03*weightControl;
ref1Size += 2;
} else if (i%4 == 2){
color += colorControl*0.3;
weight = 0.015*weightControl;
ref1Size += 0.5;
} else if (i%4 == 1){
color += colorControl*0.5;
weight += 0.002*weightControl;
ref1Size -= 0.5;
} else {
color += colorControl;
weight += 0.008*weightControl;
ref1Size += 0.5;
}
strokeWeight(weight);
stroke(color,color,color);
line(0,(i+1)*ref1Size*ref1Control*0.75,width,height-(a+1)*ref1Size*ref2Control);
}
}
//draw partial web on the top left corner
for (var i = 0; i<40;i++){
stroke(color+i*5);
strokeWeight(0.4);
line(0,height/2-interval1*i,i*interval1,0);
}
//draw partial web on the down right corner
for (var i = 0; i<70;i++){
stroke(color+i);
strokeWeight(0.3);
line(i*interval2,height,width,height-interval2*i*2);
}
}

## ShanWang-LookingOutwards-04

(sample codes for Spicule)

Created by Alex McLean, Spicule is a album released as a Pi Zero with high quality  DAC in customs case that allows users to remix or rework the music using the TidalCycles live coding environment. The artist created the free and open source software TidalCycles with some friends, where users can join life streaming sessions and watch how he built up the rhythm and patterns with code. Different beats and sound of instruments are generated base on the code, which give users freedom to play with, experiment and create the unique music of their own.

I found the project extremely fascinating because of the unlimited possibilities it provides. With parametric control over sounds in its very basic unit (pitch, rhythm and etc.), access to music composition and experiments would no longer be limited to the small crowd.

(live of Alex McLean)

## ShanWang-Project-03-Dynamic-Drawing

Slide the mouse left to right to change the color and the size of the circles.

Slide the mouse up and down to change the speed of the rotation.

In this project I created a series of circles that rotates around the previous one.

The color, size and therefore position of the circles are controlled by the change in x coordinate of the mouse.
The speed of rotation is controlled by the the change in y coordinate of the mouse.

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Assignment-03-Project

var angle1 = 0
var angle2 = 0
var angle3 = 0
var angle4 = 0
var angle5 = 0
var angle6 = 0
var angle7 = 0
var angle8 = 0
var angle9 = 0
var angle10 = 0
var speed = 128
var fillColor = 0

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

function mousePressed(){
bgColor = 255-bgColor
}
}

function draw() {
background(255);
noStroke();

//control the speed of spining with the change in y coordinate of the mouse
speed = map(mouseY,0,height,64,192);

//control the color of circles with the change in x coordinate of the mouse
bgColor = map(mouseX,0,width,0,255);

//control the size of all the circles with the change in x coordinate of the mouse

//position of first big circle
var cenX1 = width/2;
var cenY1 = height/2;
fill(bgColor);

//draw second circle
translate(cenX1,cenY1);
fill(255-bgColor);
angle1 += PI/speed;
var cenX2 = dis2*cos(angle1);
var cenY2 = dis2*sin(angle1);

//draw third circle
translate(cenX2,cenY2);
fill(bgColor);
angle2 += PI/(0.5*speed);
var cenX3 = dis3*cos(angle2);
var cenY3 = dis3*sin(angle2);

//draw 4th circle
translate(cenX3,cenY3);
fill(255-bgColor);
angle3 += PI/((0.5*speed));
var cenX4 = dis4*cos(angle3);
var cenY4 = dis4*sin(angle3);

//draw 5th circle
translate(cenX4,cenY4);
fill(bgColor);
angle4 += PI/(0.4375*speed);
var cenX5 = dis5*cos(angle4);
var cenY5 = dis5*sin(angle4);

//draw 6th circle
translate(cenX5,cenY5);
fill(255-bgColor);
angle5 += PI/(0.375*speed);
var cenX6 = dis6*cos(angle5);
var cenY6 = dis6*sin(angle5);

//draw 7th circle
translate(cenX6,cenY6);
fill(bgColor);
angle6 += PI/(0.25*speed);
var cenX7 = dis7*cos(angle6);
var cenY7 = dis7*sin(angle6);

//draw 8th circle
translate(cenX7,cenY7);
fill(255-bgColor);
angle7 += PI/(0.125*speed);
var cenX8 = dis8*cos(angle7);
var cenY8 = dis8*sin(angle7);

//draw 9th circle
translate(cenX8,cenY8);
fill(bgColor);
angle8 += PI/(0.125*speed);
var cenX9 = dis9*cos(angle8);
var cenY9 = dis9*sin(angle8);

//draw 10th circle
translate(cenX9,cenY9);
fill(255-bgColor);
angle9 += PI/(0.125*speed);
var cenX10 = dis10*cos(angle9);
var cenY10 = dis10*sin(angle9);

//draw 11th circle
translate(cenX10,cenY10);
fill(bgColor);
angle10 += PI/(0.25*speed);