## Looking Outwards-06: Random Art

One randomly generated work I like is Bogdan Soban’s “Abstract 11”. It looks like a landscape and assumes a painterly quality, but was randomly drawn by code. Soban states that he utilizes innovative image processing that hides the computer origin of pictures, combined with multi-level algorithms, to create the most original works. His definition of generative art describes design that is composed in a random manner. He finds interesting, aesthetic precedents, and develops his own generative designed software that randomly draws new images based on those precedents. Once the program is running, Soban does not interfere with it, rather lets it run its course regardless of its outcome.
His pieces have no outside intervention nor predefined result. I really appreciate Soban’s process because he uses software that he creates on his own, not using existing programs available online.

## Project 06: Abstract Clock

sketch
``````var y = 430 //start y position of house
var c = []; //random colors for balloons
var bx = []; //balloon random x coordinate
var by = [];//balloon random y coordinate
var dy = []; // cloud random x coordinate
var dx = []; //cloud random y coordinate
var tx = []; // star random x coordinate
var ty = []; //star random y coordinate

function setup() {
createCanvas(480, 480);
//for every minute, randomly colored and located balloon will pop up
for (i=0; i<= 60; i++){
c[i] = color(random(255), random(255), random(255))
bx[i] = random(160, 320)
by[i] = random((y-30), (y-175))
}
//during the daytime, for every hour randomly located cloud will pop up
for (d = 0; d<=23; d++){
dx[d] = random(25, width-25)
dy[d] = random(25, height-25)
}
//during nighttime, for every hour randomly located star will pop up
for (s=0; s<=23; s++){
tx[s] = random(75, 3*width-25)
ty[s] = random(75, 3*height-25)
}
}
function draw() {
//during nighttime, use dark sky and stars
if (hour() < 12){
background(7, 46, 110);
star();
}
// during daytime, use day sky and clouds
else {
background(111, 165, 252)
cloud();
}
//for every second, house will move up four units
translate(0, -4*second())
house();
}

function house(){
//base house
noStroke();
fill(61, 58, 50)
rect(width/2-28, y-20, 60, 20)
fill(209, 203, 88)
noStroke();
rect(width/2 - 25, y, 25, 50)
fill(240, 240, 144)
square(width/2, y, 50)
triangle(width/2, y, width/2+50, y, width/2 + 25, y-20)
strokeWeight(10)
stroke(84, 84, 66)
line(width/2, y, width/2 +25, y-20)
line(width/2 +50, y, width/2+25, y-20)
rect(width/2 + 22, y+25, 5, 15)
//for each minute, balloon tied to house will pop up
for (i=0; i< minute(); i++){
push();
//balloon string
stroke(255)
strokeWeight(1)
line(width/2, y-20, bx[i], by[i])
//balloons
fill(c[i]);
noStroke()
ellipse(bx[i], by[i], 20)
print(i)
pop();
}
}
function cloud(){
//for each hour, cloud will pop up
for (var d = 0; d<hour(); d++){
fill(255);
strokeWeight(3)
stroke(200)
ellipse(dx[d], dy[d], 100, 20);
ellipse(dx[d] + 20, dy[d] - 10, 40, 15)
}
}

function star(){
//for each hour, star will pop up
for (var s = 0; s<hour(); s++){
push();
stroke(255, 223, 107)
strokeWeight(3)
fill(255, 255, 217)
beginShape();
scale(0.3)
vertex(tx[s]+35, ty[s]+3)
vertex(tx[s] +46, ty[s]+22)
vertex(tx[s]+68, ty[s]+28)
vertex(tx[s] + 54, ty[s] +45)
vertex(tx[s] + 56,ty[s] + 67)
vertex(tx[s]+35, ty[s]+58)
vertex(tx[s] + 14, ty[s]+67)
vertex(tx[s] + 16, ty[s]+45)
vertex(tx[s]+2, ty[s]+28)
vertex(tx[s]+24, ty[s]+22)
endShape(CLOSE);
pop()
}
}``````

Over quarantine, I rewatched a bunch of Pixar movies, and was inspired by the movie “Up” for my clock. The house moves upwards for every second, the balloons show the minutes, and the clouds or stars in the background show the hour. In general, I had difficulty making the arrays refresh with the time.

## Looking Outwards – 05: 3D Art

One two dimensional digital representation that I greatly admire is Stepan Ryabchenko’s “Power Pump,” (2011) a piece of artwork from the Computer Virus Series. I am intriguied by the thoughtfulness put into the work both in its actual physicality as well as its intention and general concept. Essentially Ryabchenko compiled data on major catastrophic viruses that have occurred since the inception of the computer, and gave them an identity be revisualizing them as actual, biological viruses. In the words of art critic Natalia Matsenko, this work renders the virtual nature of the virus which effectively overcomes the “limit between the figurative and the abstract.” It appears as the artist utilized generative modelling as well as parametric modelling in his design, with the shape of the image ebbing and flowing in deliberate ripples. I particularly like this specific piece out of his series because “Power Pump”, while still looking foreboding, further takes on an aesthetic quality that is reflective of the artist’s crossroads of sensibilities as a visual artist, architect, and programmer. The realistic rendering and materiality adds another level of dimension that seems to appear even more than just 3-D in a 2-D representation.

## Project 05- Wallpaper

I really like bubble tea, so I created this homage to the drink It was difficult for me to coordinate and organize the spacing in between the different drinks, especially taking into consideration the scaling factor.

peachsketch
``````function setup() {
createCanvas(600, 400);
}

function draw() {
background(255, 224, 226);
//mint stripes
for (var m = 0; m < width; m+=90){
push();
translate(0, m-275)
strokeWeight(7);
stroke(202, 230, 225)
line(0,0,width, height)
pop();
}
//blue bubble tea cups
for (var i= 0; i < width-60; i+=100){
push();
translate(i, 0);

for(var j = 20; j< height; j += 50){
push();
translate(0, (j*3)-90);
rotate(PI/8)
stroke(134, 164, 219)
strokeWeight(5)
noFill();
//bubble tea cap
ellipse(122, 30, 40,15);
//bubble tea cup
line(100,30,110,80);
line(144, 30, 135,80);
line(134,80,110,80);
//straw
stroke(65, 95, 150)
strokeWeight(7);
line(122, 15,122, 70)
//tapioca balls
stroke(0)
strokeWeight(6);
point(132, 70);
point(127, 67);
point(114, 66);
point(115, 74);
point(122, 69);
point(127, 74);
pop();
}
pop();
}

//mango green tea cups
for (var a= 0; a < width-60; a+=100){
push();
translate(a-50, 0);
for(var c = 0; c< height; c += 50){
push();
translate(30, (c*3));
rotate(-PI/8)
scale(0.5)
stroke(179, 139, 104)
strokeWeight(5)
noFill();
ellipse(122, 30, 40,15);
line(100,30,110,80);
line(144, 30, 135,80);
line(134,80,110,80);
noStroke();
fill(255, 195, 56)
quad(107, 60, 135, 60, 135, 80, 107, 80);
strokeWeight(7);
line(122, 15,122, 70)
pop();
}
pop();
}
noLoop();
}``````

## Looking Outwards -04 : Sound Art

One piece of art that stands at the intersection of sound and computation is “Weather Thingy” by Adrien Kaeser, created in 2018. This invention takes real time weather data input and converts it into computational data that varies the sound control of connected instruments. It consists of two main components, a weather station on a tripod microphone, and the custom built sound controller that’s connected to the weather station. The controller interface allows the device to assign the parameters received to different audio effects. What is inspiring to me about this piece is that it interprets data across different platforms – it used weather stimulation, such as rain collection or wind power, and is able to translate it into computational data, and then further reapply that to generate specific sounds. I think this is intriguing in its interdisciplinarity. The artist’s sensibilities come through in the way in which he assigns the different audio effects to the inputs – there is a distinct, ethereal quality in the noises produced.

## Project 04: String Art

For this assignment, I was interested in the way that changing a couple of the location variables for the string would alter the way in which the strings move within the loop. I couldn’t find a reference image of the memory I was basing the drawing off of, but I was inspired by those default backgrounds of older computers when they are not in use, but still on.

peachstring1
``````var x = 0;//x location of lines moves
var y = 0//y position of lines moves
var c = 0//change background color from black to white

function setup() {
createCanvas(400, 300);

}

function draw() {
background(c);
c += 1 //background changes over time
for (i = 0; i <= 50; i += 2.5) //use loop to draw lines
{var l = i *10
stroke(194, 255, 254)//blue lines
strokeWeight(2);
line(-width, height, x, l);
line(width, height, x, l);
stroke(124, 232, 124);//neon green lines
strokeWeight(1);
line(x, height/2, 5+l, l);
line(-width/50, y, 5+l, l);
stroke(0) //black lines
line(0,y,20*l,height-l)
x += 0.1 //lines move across screen
if(x>width){
y += 0.1
x = width
}
stroke(255) //white lines
strokeWeight(0.5)
line(4*width/l+x, height, 5+l, 0)

}
}``````

## Project 03 – Dynamic Drawing

peachp3
``````var angle = 0
var move = 0

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

function draw() {
//background changes color
background(217, (constrain(mouseY,200,450)), 250);

//ring appears
if (mouseY<height/2){
noFill();
stroke(255, 248, 156)
ellipse(width/2, height/2, 300)
}
else {
noFill();
stroke(255,248,156);
ellipse(width/2, height/2, 500);
}
//body
noStroke()
fill(32, 70, 133)
triangle(width/2, height/2 - 70, 220, 400, 380, 400)

//table
fill(250, 204, 177);
rect(0, height/4*3, width, height/4*3);
fill(168, 112, 74)
rect(0, 430, width, 20)

fill(255, 235, 186);
ellipse(width/2, 200, 170);

//hair
fill(0)
arc(width/2, constrain(mouseY-100, 100, 170), 180,180, PI, 0)

//left arm
push();
translate(width/2, height/2+70)
fill(32, 70, 133)
rect(-100,0, 100, 30);
fill(255, 235, 186)
ellipse(-100,15, 28)
pop();

//right arm
push();
translate(width/2, height/2+70)
fill(32, 70, 133)
rect(0,0, 100, 30);
fill(255, 235, 186)
ellipse(100,15, 28)
pop();

//eyes
noFill()
stroke(0)
strokeWeight(3)
arc(width/2-35, 190, 40,40, PI, 0);
arc(width/2+35, 190, 40,40, PI, 0);

//mouth
if (mouseY < height/2){
push();
translate(300,240)
scale (1.2)
fill(0)
ellipse(0,0, 60);
fill(242, 117, 92)
ellipse(0,10,40,20)
pop();
}
else {
push();
translate(300,240)
scale(0.75);
fill(0)
ellipse(0,0,60);
fill(242, 117, 92)
ellipse(0,10,40,20)
pop();
}
//tomato
if (mouseY<height/2){
push();
noStroke();
fill(255,0,0)
ellipseMode(CENTER)
translate(480,150)
scale(2.5)
ellipse(0,0,30);
noStroke();
fill(0,255,0)
ellipse(0,-10,10,5);
pop();
angle +=8
}

else {

push();
noStroke();
fill(255,0,0)
ellipseMode(CENTER)
translate(480,350)
scale(1.4)
ellipse(0,0,30);
noStroke();
fill(0,255,0)
ellipse(0,-10,10,5);
pop();
angle -=10
}
//orange
if (mouseY<height/2){
push();
translate(120,300)
scale(2.0);
noStroke();
fill(245, 188, 103)
ellipseMode(CENTER)

ellipse(0,0,30);
noStroke();
fill(150, 136, 114)
ellipse(0,-10,5, 10);
pop();
angle-=5
}

else {
push();
translate(120,100)
scale(3.0);
noStroke();
fill(245, 188, 103)
ellipseMode(CENTER)
ellipse(0,0,30);
noStroke();
fill(150, 136, 114)
ellipse(0,-10,5, 10);

pop();
angle += 5

}
fill(250)
noStroke()
ellipse(move, 380, 70,30)
noFill()
strokeWeight(3)
stroke(200)
ellipse(move, 380, 50, 20)
move = move + 10
if (move>width){
move = -move
}

}``````

It was difficult creating this efficiently, and it was particularly hard for me personally to cause parameters to counter each other. Inspired by my little cousin who gets cranky when he is hungry.

## LO – Computational Fabrication

One piece of generative design that has been digitally fabricated is Brazilian architect Guto Requena’s Samba stool. It is a piece of furniture that was created based off traditional Brazilian music. The architects extracted parameters from the songs, such as the bass and treble. From that data they received frequencies that generated the curves, which grew in “real-time following the music.” The data was input into a motorized machine that is controlled by a computer, which sculpted the digital file from a cube of marble. I admire that the architects took music, which to me is a field that seemed disparate from computing, and was able to use innovations from computing to celebrate and share. The stools themselves are also beautiful! While the architect’s design sensibilities weren’t necessarily extremely prevalent, the material choice as well as the concept itself were reflective of Requena’s design personality and background.

## Project 2 – Variable Face(s)

I call this piece, “My Parents.” I thought it would be interesting to try to generate some sort of dialogue between two figures each with their own characteristics. It was difficult assigning locations to elements when they were dependent on other variables.

peachproject2
``````///Boy
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 10
var noseHeight = 5
var b = 40
var b2 = 170
var bodyL = 130
var bodyR = 200
var mouthA = 20
var mouthB = 10
var mouthC = 250
var mouthD = 250

//Girl
var geyeSize = 20;
var gfaceWidth = 100;
var gfaceHeight = 150;
var gnoseWidth = 10
var gnoseHeight = 5
var mouthWidth = 10
var mouthHeight = 10
var bodyGL = 450
var bodyGR = 510
var g = 50
var g2 = 170

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

function draw() {
background(180);
fill(150)
rect(0,height/3*2, width,height/3)

//boy
noStroke()
fill(b, b2, 253)
triangle(width/4, height/2, bodyL, height/5*4, bodyR, height/5*4)
//eyes
ellipse(width / 4, height / 2, faceWidth,  faceHeight);
var eyeLX = width / 4 - faceWidth * 0.25;
var eyeRX = width / 4 + faceWidth * 0.25;
fill(255)
ellipse(eyeLX, height / 2, eyeSize, eyeSize);
ellipse(eyeRX, height / 2, eyeSize, eyeSize);
//eyebrows
stroke(0)
strokeWeight(3)
line(eyeLX-6, height/2 - (faceHeight * 0.15), eyeLX + 6,height/2 - (faceHeight * 0.2))
line(eyeRX-6, height/2 - (faceHeight * 0.2), eyeRX + 6,height/2 - (faceHeight * 0.15))
//mouth
stroke(0)
strokeWeight(3)
noFill()
curve (mouthD, mouthC, width/4+5, height/2 + mouthA, width/4+10, height/2+mouthB,mouthC,mouthD);
//pupils
noStroke()
fill(0)
ellipse(eyeLX, height / 2, eyeSize * 0.25, eyeSize * 0.25);
ellipse(eyeRX, height / 2, eyeSize*0.25, eyeSize*0.25);
//nose
fill(0)
rect(width/4, height/2, noseWidth, noseHeight)

//girl
//body
fill(220,g,g2)
triangle(width/4*3, height/2, bodyGL, height/5*4, bodyGR, height/5*4)
ellipse(width / 4 * 3, height / 2, gfaceWidth,  gfaceHeight);
//eyes
var geyeLX = width / 4 * 3- gfaceWidth * 0.25;
var geyeRX = width / 4 *3 + gfaceWidth * 0.25;
fill(255)
ellipse(geyeLX, height / 2, geyeSize, geyeSize);
ellipse(geyeRX, height / 2, geyeSize, geyeSize);
fill(0)
ellipse(geyeLX, height / 2, geyeSize * 0.25, geyeSize * 0.25);
ellipse(geyeRX, height / 2, geyeSize*0.25, geyeSize*0.25);
fill(0)
//nose
ellipse(width/4*3-5, height/2, gnoseWidth, gnoseHeight)
//eyebrows
stroke(0)
strokeWeight(3)
line(geyeLX-6, height/2 - (faceHeight * 0.2), geyeLX + 6,height/2 - (faceHeight * 0.15))
line(geyeRX-6, height/2 - (faceHeight * 0.15), geyeRX + 6,height/2 - (faceHeight * 0.2))

//mouth
noStroke()
ellipse(width/4*3-5, height/2 +(faceHeight*0.25), mouthWidth, mouthHeight)

}

function mousePressed() {

faceHeight = random(100, 170);
faceWidth = random(75,150)
eyeSize = random(20, 40)
noseWidth=random(5,20)
noseHeight = random(3,10)

gfaceHeight = random(100, 170);
gfaceWidth = random(75,150)
geyeSize = random(20, 40)
gnoseWidth=random(5,20)
gnoseHeight = random(3,10)

mouthWidth = random (10,30)
mouthHeight = random (8,30)

b = random(10,200)
b2 = random(150,225)

g= random(5,140)
g2 = random(100,150)

bodyL = random (120,135)
bodyR = random (195,210)

mouthA = random(15,25)
mouthB = random(15,25)
mouthC = random(280,320)
mouthD = random (280,320)

bodyGL = random(430,450)
bodyGR = random (500, 530)
}``````

## Looking Outwards-02

With the introduction of generative design in the past decades, the ways in which architecture is rendered has been completely overwrought. One work that I particularly admire is MX3D’s 12-meter long steel bridge in Amsterdam. It is entirely 3-D printed – the construction utilized two industrial level 3-D printers that worked on opposite ends to meet in the center. This method of construction is largely unprecedented, and was only possible through the combination of parametric design and artificial intelligence. One amazing feature of the bridge is that it continues “learning” throughout its lifespan – the designers included sensors connected to a computer model that informs of the performance and behavior of the physical bridge in real time. It measures environmental data such as air quality as well as structural information such as load and strain. This is important because it shows the designer’s conscientiousness of their work’s future impact. They made a practical work of art that’s sustainable for years to come.
The algorithm developed to design the structure is undoubtedly complex, requiring assistance from companies such as Autodesk. It took a multitude of parameters into account, considering the ways in which people and the environment will react to, and interact with, it.
In general, architecture is at the crossroads of aesthetic and practicality. The creator’s artistic sensibility manifests itself in the uniquely defining, yet structurally reliable and complex formation.