Author: Samantha

Project 02- Variable Faces, Blowing bubbles

sketch

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

Self Portrait

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



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


    /*hair shadow*/
    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);


    /*chin shadow*/
    fill(208, 131, 99);
    noStroke();
    ellipse(370, 300, 100, 160);

    /*head shadow*/
    fill(208, 131, 99);
    noStroke();
    ellipse(366, 260, 180, 200);

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

Looking Outward 01: Issho is my Inspiration

I have always been interested in creative computation in the context of wearables, but I feel like so often that means just putting rope leds or sensors on the body. Thus after some extensive some research I found this project by Pauline Van Dongen where she takes a much more sensitive and thoughtful approach to the entire concept of wearable technology.

This was a collaboration between her studio and ItalDenim where the two created a more intimate computational interaction. This was very interesting to me because it requires no interface or phone app for it to be considered wearable tech.

In fact, it does the opposite and keeps the tech within the closed system of the jacket.  Conductive fibres are woven into the fabric of the Issho jacket, connecting a series of sensors with motorised parts. When the sensors register touch on various parts of the garment, an integrated component reacts to give the wearer a “gentle stroke” on their upper back. It’s controlled by a microcontroller that senses the jacket is being worn.

The Denim Jacket embraces denim’s characteristics to hold a unique dialogue with its wearer. Based on the wearer’s behaviour, the jacket responds to intimate touches to become a mediator of revived experiences in daily life.

I like this project alot because even though it is rather complex when it comes to it’s included tech, the focus is very much on the physical interaction and its relationship with the wearer.

Through bodily sensations, this jacket encourages you to be present in an increasing accelerating world in which our mind is often focused on future events.

Studio Van Dongen’s past work includes some rather futuristic looking generated clothing so adding a computational element to this denim garment wasn’t too far off from the brand.

 

Issho | An Intelligent Denim Jacket by Pauline van Dongen from Pauline van Dongen on Vimeo.