## Looking Outwards 06: Chaotic Atmospheres

The creative agency Chaotic Atmospheres has a series of randomly generated polygonal insects.  They were created in Cinema 4D using random values restricted by  size parameters to generate the polygonal insect species.

It’s really interesting to me that they can take these randomly generated values and translate them into points. Afterwards, Chaotic Atmosphere will throw them into Photoshop to finish the render, taking the project to an entirely new level.

## Project 05: Wallpaper

``````/*
Samantha Ho
sch1
Project 05
Section E
*/
function setup() {
createCanvas(600, 400);
noStroke();
}

function draw() {
background(250, 230, 230);
//repeating the pattern linearly along the x axis
for (var y = 0; y < height; y += 120) {
for (var x = 0; x < width; x += 90) {
var r = (y / 400 * 200);
var g = (y / 400 * 255);
var b = (x / 400 * 200);
stroke(r, g, b);
//creating the top pattern1
line(x + 10, y + 10, x + 10, y + 50);
line(x + 20, y + 5, x + 20, y + 45);
line(x + 30, y + 0, x + 30, y + 40);
line(x + 40, y + 5, x + 40, y + 45);
line(x + 50, y + 10, x + 50, y + 50);
//creating base1
line(x + 30, y + 45, x + 10, y + 55);
line(x + 38, y + 50, x + 18, y + 60);
line(x + 48, y + 55, x + 28, y + 65);

}
}

for (var y = 0; y < height; y += 120) {
for (var x = 0; x < width; x += 90) {
var r = (y / 400 * 60);
var g = (x / 400 * 200);
var b = (y / 400 * 200);
stroke(r, g, b);
//creating the top pattern1
line(x + 10, y + 10, x + 10, y + 50);
line(x + 20, y + 5, x + 20, y + 45);
line(x + 30, y + 0, x + 30, y + 40);
line(x + 40, y + 5, x + 40, y + 45);
line(x + 50, y + 10, x + 50, y + 50);
//creating base1
line(x + 30, y + 45, x + 10, y + 55);
line(x + 38, y + 50, x + 18, y + 60);
line(x + 48, y + 55, x + 28, y + 65);

var r = (y / 200 * 20);
var g = (x / 200 * 20);
var b = (y / 200 * 50);
stroke(r + 30, g + 100, b + 100);
//creating the top pattern2
line(x + 30, y + 70, x + 30, y + 115);
line(x + 40, y + 75, x + 40, y + 110);
line(x + 50, y + 80, x + 50, y + 105);
line(x + 60, y + 75, x + 60, y + 110);
line(x + 70, y + 70, x + 70, y + 115);
//creating front side
line(x + 5, y + 12, x - 15, y);
line(x + 5, y + 28, x - 15, y + 16);
line(x + 5, y + 45, x - 15, y + 32);

//ellipse
var r = (width / x * 20);
var r = (width / y * 20);
var r = (width / y * 20);
noStroke();
fill(r, g, b)
ellipse(x + 9, y + 110, 2, 2)
}
}

}
``````

I wanted to go with a line pattern and use the negative space to insinuate shadow. Originally I had a full black background, but it was difficult to distinguish shapes due to the contrast. Inevitably, I decided on the lighter background and was rather satisfied with what I came up with.

## Looking Outwards 05

I was very excited to see that this weeks topic was 3D generated graphics because I have always been very interested in fractals. In concept, fractals are rather simple to wrap your head around, but they can quickly become extremely intricate and complicated. Thus there are many programs on the web to generate them and I have perused for years.

Ok so my favorite one overall because it has some really cool GPU accelerated advanced ray tracing pretty picture features is Mandelbulber. This one has stuff like volumetric fog and advanced reflections as well as some really cool volumetric lighting.

Another really good one, which I think has a much better preview mode (and therefore is better for laptops) is Mandelbulb3d. This one has some really cool features like the ability to slice fractals (which allows them to be reconstructed into 3d models. It also has a powerful hybrid engine which allows for fractal combinations.

I really like Mandelbulb in particular just because it introduces the concept of fractal generation in a very simple to use software so virtually anyone can create 3D fractals and artwork.

## Project 04: String Art

``````/* Samantha Ho
Section E
sch1@andrew.cmu.edu
Project 04*/

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

}

function draw() {
background(240,240,240);
//back dark wave
strokeWeight(2);
stroke(0,0,255);
x1 = 30;
x2 = 40;
y1 = 400;
y2 = 50;
for (var i = 0; i < 20; i += 1) {//move the waves
x1 += min(mouseX, 300);
y2 += 15;
line(x1, y1, x2, y2);
}

//light back wave
strokeWeight(2);
stroke('cyan');
x1 = 0;
x2 = 60;
y1 = 500;
y2 = 50;
for (var i = 0; i < 20; i += 1) {//move the waves
x1 += min(mouseX, 300);
y2 += 15;
line(x1, y1, x2, y2);
}

//light thin wave
strokeWeight(2);
stroke('cyan');
x1 = 0;
x2 = 60;
y1 = 500;
y2 = 50;
for (var i = 0; i < 20; i += 1) {//move the waves
x1 += min(mouseX, 300);
y2 += 15;
line(x1, y1, x2, y2);
}

//green horizon wave
strokeWeight(2);
stroke(0,230,230);
x1 = 0;
x2 = 400;
y1 = 150;
y2 = 100;
for (var i = 0; i < 20; i += 1) {//move the waves
x1 += min(mouseX, 300);
y2 += 15;
line(x1, y1, x2, y2);
}

//red horizon wave
strokeWeight(.5);
stroke(0,230,230);
x1 = 0;
x2 = 400;
y1 = 500;
y2 = 100;
for (var i = 0; i < 20; i += 1) {//move the waves
x1 += min(mouseX, 300);
y2 += 15;
line(x1, y1, x2, y2);
}

//sunrays
strokeWeight(2);
stroke('yellow');
x3 = 0;
x4 = -300;
y3 = 0;
y4 = 300;
for (var i = 0; i < 20; i += 1) {
x4 += min(mouseX, 600);
y3 -= 15;
line(x3, y3, x4, y4);
}
//dark sunrays
strokeWeight(2);
stroke(200,200,0);
x3 = 0;
x4 = -200;
y3 = 0;
y4 = 300;
for (var i = 0; i < 20; i += 1) {
x4 += min(mouseX, 600);
y3 -= 15;
line(x3, y3, x4, y4);
}
}``````

I made this because I was inspired by the quality of the “strings”. I wanted to make an entire moving picture with a horizon and everything. I found it difficult though to completely control the landscape. It may be due to the quality of the “material”, but conceptually it was challenging to wrap my head around the forms.

## Looking Outwards 04: Visual Sounds of the Amazon

This is a responsive artwork by Andy Thomas that visualizes the sounds of the Amazon he recorded. While this isn’t a rare concept, I think Thomas did a very good job with animating the 3D models and textures. The sound has adds a third element and extends the impact of the computer generated visuals, culminating in an extremely dynamic animation. https://vimeo.com/229927018

I really appreciate that the animation sort of became an animal itself simply through the natural feeling of the motion. It’s almost elastic in nature, thus even though the shapes take on an amorphous form, it still feels slightly familiar through it’s motion.

## Looking Outwards 03: Under Armour

Instantly when prompted with the idea of generative design, I thought of Autodesk and the work they did with Under Armour to create the Architech shoe. With today’s tech and designer’s love of sneakers, it was inevitable that a mass market 3D printed shoe was going to hit the market.

The shoe sole is designed with the wearer in mind and provides a rather sensitive approach to footwear. When they developed the shoes, they weren’t just trying to showcase the tech, but also took into account the user experience of it all.

They began in Fusion360 and generated the structures, they used Autodesk’s Myriad program to create the pattern of cells. The advantage of using Myriad was that they were able to test out many variations of spacing and design till they arrived at their final result.

I like reading about tech and the role it playsinto product design because alot of conceptual artwork exists with tech, but taking the concepts and finding a practical application can change so many things in industry.

## Project 02- Variable Faces, Blowing bubbles

``````/* Samantha Ho
Section E
sch1@andrew.cmu.edu
Project-02*/

var eyeSize = 20;
var faceW = 100;
var faceH = 150;
var textPlacement =100;
var textPlace =150;
var posx = 400;
var posy =200;
var mouthx = 320;
var mouthy = 276;
var mouthw = 100;
var mouthh = 150;
var mouthoutw = 100;
var mouthouth = 150;
var bubbax = 400;
var bubbay =200;
var bubbbx = 400;
var bubbby =200;

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

}

function draw() {
background(230,230,230);
//face fill
fill(230,240,250);
noStroke();
ellipse(width / 2.1, height / 2.4, faceW+100,  faceH+60);
//face
strokeWeight(1);
stroke(60,60,60);
noFill();
ellipse(width / 2, height / 2.4, faceW+100,  faceH+60);
//mouth
noStroke();
fill(200,0,0);
ellipse(mouthx,mouthy, mouthw/1.6,  mouthh/26);

noFill();
stroke(20,20,20);
ellipse(mouthx,mouthy, mouthoutw/1.6,  mouthouth/26);

fill(200,0,0);
noStroke();
var eyeLX = width / 2 - faceW * 0.45;
var eyeRX = width / 2 + faceW * 0.45;
ellipse(eyeLX, height/2, eyeSize, eyeSize);
ellipse(eyeRX, height/2, eyeSize, eyeSize);

//bubble
strokeWeight(5);
stroke(216,216,216);
fill(250,250,250);
ellipse(posx+16,posy+76, faceW/2,  faceH/3);
noStroke();
fill(230,230,230);
ellipse(posx+13, posy+80, faceW/2.5,  faceH/3.5);
stroke(20,20,20);
strokeWeight(1);
noFill();
ellipse(posx+18, posy+80, faceW/1.8,  faceH/2.6);

//bubblea
stroke(20,20,20);
strokeWeight(1);
noFill();
ellipse(bubbax+18, bubbay+80, faceW/8,  faceH/10);
//bubbleb
stroke(20,20,20);
strokeWeight(1);
noFill();
ellipse(bubbbx+18, bubbby+80, faceW/8,  faceH/9);

//bubblewand
strokeWeight(6);
stroke(200,0,0);
noFill();
ellipse(420, 280, faceW/3.6,  faceH/4);
rect(420, 301, faceW/70,  faceH/4);

//text try
noStroke();
fill(216,216,216);
textSize(50);
textFont('Helvetica');
text('bubbles', textPlacement,100);
textPlacement = textPlacement +2;
if(textPlacement>640){
textPlacement = -350    };

fill(219,216,216);
textSize(50);
textFont('Helvetica');
text('bubbbbles', textPlace,100);
textPlace = textPlace +6;
if(textPlace>640){
textPlace = -350    };
angleMode(DEGREES);

}

function mousePressed() {
mouthx= random(320,360);
mouthw= random(100,40);
mouthh= random(150,300);
mouthoutw= random(90,50);
mouthouth= random(140,400);
posx = random(400,460);
posy = random(220,40);
bubbax = random(400,480);
bubbay = random(220, 140);
bubbbx = random(410,500);
bubbby = random(230, 130);
}
``````

I enjoyed playing around with the variables and I’m excited by the idea of computational animation. I played around with words and strokes, but couldn’t quite nail down how to do opacities on js. On the p5-js references page, the closest thing I could find was blendMode. That being said, I’m looking forward to exploring this further.

## Looking Outwards 02: Miraj

When prompted with the idea of generative art for this Looking Outwards, I immediately thought of Miraj— an interactive work that generates animated visuals with your voice. It was originally conceived as a response to the new Apple tvOS open to developers in 2016.  Essentially they created an algorithm to fragment the images and collage them, while animating the shapes based on your voice. It was coded using both Swift and C++ and eventually integrating it using CV into the Apple TV.

I liked this project in particular because it went through several prototyping phases and had a large focus on user experience. It also heavily engages the user and creates a unique and lasting memory. Additionally because they were running it on Apple TV’s platform, they took some visual cues from Apple’s exisitng UI( (this was just an interesting fact I learned and appreciated about branding).

## Assignment 01

``````/* Samantha Ho
Section E
sch1@andrew.cmu.edu
Assignment-01*/

function setup() {
createCanvas(800, 600);
background(220, 255, 254);

fill(81, 54, 54);
noStroke();
ellipse(380, 260, 190, 200);
fill(81, 54, 54);
noStroke();
ellipse(366, 244, 190, 200);
fill(81, 54, 54);
noStroke();
ellipse(398, 370, 190, 400);

/*chest*/
fill(245, 184, 161);
noStroke();
beginShape();
vertex(200, 400);
vertex(540, 400);
vertex(430, 600);
vertex(300, 600);
endShape(CLOSE);

fill(245, 184, 161);
noStroke();
beginShape();
vertex(345, 300);
vertex(408, 300);
vertex(430, 600);
vertex(300, 600);
endShape(CLOSE);
/*right shirt*/
fill(220, 0, 0);
noStroke();
beginShape();
vertex(420, 360);
vertex(540, 400);
vertex(430, 600);
vertex(300, 600);
endShape(CLOSE);
/*left shirt*/
fill(250, 0, 0);
noStroke();
beginShape();
vertex(330, 360);
vertex(200, 400);
vertex(280, 600);
vertex(400, 600);
endShape(CLOSE);

fill(208, 131, 99);
noStroke();
ellipse(370, 300, 100, 160);

fill(208, 131, 99);
noStroke();
ellipse(366, 260, 180, 200);

fill(247, 194, 171);
noStroke();
ellipse(366, 260, 160, 200);

/*hair*/
fill(81, 54, 54);
noStroke();
arc(366, 200, 160, 80, PI, PI + PI, OPEN);
arc(386, 200, 140, 230, 0, QUARTER_PI);

/*lips*/
fill(234, 163, 169);
ellipse(364, 330, 10, 10);
ellipse(370, 330, 10, 10);
/*right hand top*/
fill(247, 194, 171);
noStroke();
beginShape();
vertex(450, 244);
vertex(460, 240);
vertex(480, 280);
vertex(460, 280);
endShape(CLOSE);
/*left hand top*/
fill(247, 194, 171);
noStroke();
beginShape();
vertex(280, 244);
vertex(270, 240);
vertex(250, 280);
vertex(270, 280);
endShape(CLOSE);
/*right hand bottom*/
fill(247, 194, 171);
noStroke();
beginShape();
vertex(430, 344);
vertex(466, 380);
vertex(480, 280);
vertex(460, 280);
endShape(CLOSE);
/*left hand bottom*/
fill(247, 194, 171);
noStroke();
beginShape();
vertex(316, 350);
vertex(270, 350);
vertex(250, 280);
vertex(270, 280);
endShape(CLOSE);

/*right arm*/
fill(250, 0, 0);
noStroke();
beginShape();
vertex(430, 356);
vertex(480, 340);
vertex(540, 580);
vertex(460, 580);
endShape(CLOSE);
/*left arm*/
fill(220, 0, 0);
noStroke();
beginShape();
vertex(320, 350);
vertex(260, 340);
vertex(220, 580);
vertex(300, 580);
endShape(CLOSE);

/*right sunglasses*/
fill(210, 252, 255);
noStroke();
beginShape();
vertex(384, 290);
vertex(380, 260);
vertex(450, 250);
vertex(440, 286);
endShape(CLOSE);
/* left sunglasses*/
colorMode(RGB, 210, 252, 255, 4);
noStroke();
beginShape();
vertex(354, 290);
vertex(356, 260);
vertex(280, 250);
vertex(292, 286);
endShape(CLOSE);
/*glasses bridge*/
fill(210, 252, 255);
noStroke(0);
rect(344, 266, 50, 2);

}

function draw() {

}
``````

I had alot of fun with this assignment and enjoyed how satisfying it was to see each shape come together. I ended up using alot of quadrilaterals to make certain shapes and found it rather challenging to orient myself. Addditionally, I tried to add a css animation in the background for no reason other than me thinking it would look cool; However, after a significant amount of troubleshooting I had to relent. I couldn’t quite get the css to move behind the javascript so I’m excited to revisit this problem in the future.