Samantha – Page 2 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Project 07: Curves

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

var x;
var y;


function setup() {
	createCanvas(480 , 480);
        frameRate(25);
	}

function draw(){
 background(255, 255, 200);
    
    var nPoints = 20;
    var radius = 250;
    var separation = 125;
    
    // draw the squares in the back
    push();
    translate(2*separation, height / 4);
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radius * cos(theta);
        var py = radius * sin(theta);
        rect(px - 5, py - 5, 10, 10);
    }
    pop(); 
    
    
    // draw the baseline squiggle 
    strokeWeight(1.5);
    stroke(0,0,255);
    fill(250, 255, 250, 80);
    push();
    translate(2*separation, height /2);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radius * sin(theta);
        var py = radius * sin(theta);
        vertex(px + random(-5, 10), py + random(-5, 10));
    }
    endShape(CLOSE);
    pop();
    
    //green squiggle
    strokeWeight(1.5);
    stroke(0,190,200);
    fill(0, 195, 220, 80);
    push();
    translate(2*separation, height /2);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radius * sin(theta);
        var py = radius * sin(theta);
        vertex(px + random(-mouseX/3, 10), py + random(-mouseX/3, 10));
    }
    endShape(CLOSE);
    pop();
    
    //yellow squiggle
    strokeWeight(1.5);
    stroke(0,190,200);
    fill(255, 255, 0, 80);
    push();
    translate(2*separation, height /2);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radius * sin(theta);
        var py = radius * sin(theta);
        vertex(px + random(-mouseX/3, 10), py + random(-mouseX/3, 10));
    }
    endShape(CLOSE);
    pop();
  
}

After playing around with the circles and the graphs, I liked the animated rendering effect so I continued to play around. I created this layered squiggle and baseline whose form is contingent on the cursor’s X-position.

Looking Outwards 07: Nike Fuel

I really liked Fathom’s project with Nike because not only is it visually stunning, but also it’s extremely interactive with the user. The charts break down a user’s daily movement and visualizes their active lifestyle. This is really cool because this feature is enhances the entire Nike+ FuelBand system. It creates a collaborative community aspect to the product that further engages the user

Additionally to the community aspect, the details and features of each graph are unique to the user completely.

The top of the poster serves as a unique “fingerprint” of a person’s behavior, routines, and lifestyle, while the bottom portion offers a detailed summary of their year in hard numbers.

No user will receive the same graph, thus the sharing aspect is further encouraged so people can share with their friends and compare.

Project 06: tap tap

sketch

/* Samantha Ho
Section E 
sch1@andrew.cmu.edu
Assignment 03A*/

var x;
var y;
var m;
var size;
 

function setup() {
    createCanvas(500, 500);
    frameRate(10);
    
}
 /*
function isEven(tapIndex) {
   return tapIndex % 2 == 0;
}

function isOdd(n) {
   return Math.abs(tapIndex % 2) == 1;
} */

function draw() {
    background(240,250,255);
    noStroke();
    //time variables
    var tapIndex= second();
    var tapMiddle = minute();
    var tapThumb= hour();
    
    //THUMB 
    //raising and lifting the thumb every other hour
    if (tapThumb % 2 ==0){
    //thumb
    fill(251,189,154);
    beginShape();
    curveVertex(125, 290);
    curveVertex(86, 300);
    curveVertex(86,285);
    curveVertex(108, 270);
    curveVertex(114, 265);
    curveVertex(125, 260);
    endShape(CLOSE);
    //nail
    fill(255,255,255);
    beginShape();
    curveVertex(100, 280);
    curveVertex(86, 293);
    curveVertex(86,285);
    curveVertex(110, 266);
    curveVertex(106, 265);
    curveVertex(108, 260);
    endShape(CLOSE);
   } else{
       //thumb
    fill(251,189,154);
    beginShape();
    curveVertex(125, 280);
    curveVertex(86, 290);
    curveVertex(86, 280);
    curveVertex(108, 266);
    curveVertex(114, 265);
    curveVertex(125, 260);
    endShape(CLOSE);
    //nail
    fill(255,255,255);
    beginShape();
    curveVertex(98, 280);
    curveVertex(86, 283);
    curveVertex(86, 280);
    curveVertex(98, 266);
    curveVertex(100, 265);
    curveVertex(102, 260);
    endShape(CLOSE);
}
    
    
    
    //INDEX FINGER
    //tapping the index finger once every other second
    if (tapIndex % 2 ==0){
    //Index finger
    fill(251,189,154);
    beginShape();
    curveVertex(140, 235);
    curveVertex(140, 235);
    curveVertex(150, 245);
    curveVertex(150, 300);
    curveVertex(130, 300);
    curveVertex(130,245);
    endShape(CLOSE);
    //nail
    fill(251,255,255);
    beginShape();
    curveVertex(140, 283);
    curveVertex(140, 283);
    curveVertex(147, 286);
    curveVertex(147, 299);
    curveVertex(132, 299);
    curveVertex(132,286);
    endShape(CLOSE);
    } 
    //lift the index finger
    else {
   fill(251,189,154);
    beginShape();
    curveVertex(140, 235);
    curveVertex(140, 235);
    curveVertex(150, 245);
    curveVertex(150, 290);
    curveVertex(130, 290);
    curveVertex(130,245);
    endShape(CLOSE);
        
    //nail
     fill(251,255,255);
    beginShape();
    curveVertex(140, 272);
    curveVertex(140, 272);
    curveVertex(147, 274);
    curveVertex(147, 284);
    curveVertex(132, 284);
    curveVertex(132,274);
    endShape(CLOSE);
    }
    
    //MIDDLE FINGER
    //tapping middle finger every other minute
    if (tapMiddle % 2 == 0){
    //middle finger
    fill(251,189,154);
    beginShape();
   curveVertex(164, 230);
    curveVertex(164, 230);
    curveVertex(175, 240)
    curveVertex(175, 300);
    curveVertex(155, 300);
    curveVertex(155,240);
    endShape(CLOSE);
    //nail
   fill(251,255,255);
    beginShape();
    curveVertex(168, 283);
    curveVertex(168, 283);
    curveVertex(172, 286);
    curveVertex(172, 300);
    curveVertex(158, 300);
    curveVertex(158, 286);
    endShape(CLOSE);
    }else{
    //middle finger
    fill(251,189,154);
    beginShape();
   curveVertex(164, 230);
    curveVertex(164, 230);
    curveVertex(175, 240)
    curveVertex(174, 289);
    curveVertex(155, 289);
    curveVertex(155,240);
    endShape(CLOSE);
    //nail
   fill(251,255,255);
    beginShape();
    curveVertex(166, 272);
    curveVertex(166, 272);
    curveVertex(172, 274);
    curveVertex(172, 284);
    curveVertex(158, 284);
    curveVertex(158, 274);
    endShape(CLOSE);
    }
    
    
    //RING FINGER   
    fill(251,189,154);
    beginShape();
    curveVertex(190, 230);
    curveVertex(190, 230);
    curveVertex(200, 240)
    curveVertex(200, 300);
    curveVertex(180, 300);
    curveVertex(180,240);
     endShape(CLOSE);
    //nail
    fill(251,255,255);
    beginShape();
    curveVertex(190, 282);
    curveVertex(190, 282);
    curveVertex(197, 286);
    curveVertex(197, 300);
    curveVertex(184, 300);
    curveVertex(183, 286);
    endShape(CLOSE);
    
    
    //PINKY FINGER   
    fill(251,189,154);
    beginShape();
    curveVertex(216, 242);
    curveVertex(216, 242);
    curveVertex(223, 250)
    curveVertex(223, 300);
    curveVertex(205, 300);
    curveVertex(205, 250);
    endShape(CLOSE);
    //nail
    fill(251,255,255);
    beginShape();
    curveVertex(214, 284);
    curveVertex(214, 284);
    curveVertex(220, 286);
    curveVertex(220, 300);
    curveVertex(208, 300);
    curveVertex(208, 286);
    endShape(CLOSE);
}

This is my abstract clock. It was challenging to get the fingers to tap and I ended up using a modulus to determine if the number values were even or odd. Pretty proud of myself to be honest. The index finger taps every other second, the middle finger every other minute, and lastly the thumb every other hour.

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.

Biotop from Polygonia – The Basis Mirmesis
by Chaotic Atmospheres
on Sketchfab

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

circle

/*
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

sketch

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

Project 03- Dynamic Drawing

sketch

I had a good time coding these drawings and loved the creative freedom.

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.