Author: Po

Project 5

sketch


// Michelle Dang
// Section D
//mtdang@andrew.cmu.edu
//Assignment-05-A
var s = 30;

function setup() {
    createCanvas(600, 600);
    background(231, 194, 105);
}
function draw() {
    //shape 1 loop
        for (var y = 100; y<600; y+=100) {
            for (var x = 100; x< 600; x+=100) {
                shape1(x, y);
            }
        }
//shape 2 loop
      for (var y = 50; y<600; y+=100) {
            for (var x = 50; x< 600; x+=100) {
                shape2(x,y);
            }
        }
}
//shape with blue rectangle 
function shape1(x, y) {
    fill(245, 161, 97);
    ellipse(x, y,  s+50, s);
    ellipse(x, y, s, s+50);

    fill(232, 109, 78)
    ellipse(x, y, 50, 50)
    ellipse(x, y, 50, s);
    ellipse(x, y, s, 50);

    fill(150, 150, 86);
    ellipse(x, y, 10, 10);
}
//shape with salmon-colored middle
function shape2(x,y) {
    fill(39, 68, 86);
    rect(x-25, y-25, 50, 50);   

    fill(150, 100, 150);
    ellipse(x, y,  s+50, s);
    ellipse(x, y, s, s+50);

    noFill();
    ellipse(x, y, s, s);
    ellipse(x, y, s, 50);

    fill(100, 100, 255);
    ellipse(x, y, 10, 10);

}
noLoop();

I took inspiration from kaleidoscopes.

LO 5

https://www.behance.net/guutv

I love Gustavo Henrique’s 3D style. The use of color and the softness of form creates a child-like, fantastical scene. He emphasizes simplicity that is full of details as he states, “All constructions were modelled in a very simple way. Most of my designs are simple but full of details.” He is motivated to inspire other people through his art. His style reminds me of a game-like environment or a rendering of a physical toy. He is able to capture the feeling of being toy-like through manipulating the camera settings. He uses a 150mm focal length and a high aperture to create a blurred background and achieve a miniature feel to his work. 

Screen-Shot-2021-10-03-at-1.41.31-PM-1

Project 4

sketch

// Michelle Dang
//Section D
//mtdang
var dx1;
var dy1;
var dx2;
var dy2;

var dx3;
var dy3;
var dx4;
var dy4;


var numLines = 40; //number of lines

function setup() {
    createCanvas(400, 400);
    background(0);

    dx1 = -600/numLines; 
    dy1 = 50/numLines;
    dx2 = (200)/numLines; //dx4 dx2 is negative
    dy2 = (-200)/numLines;

    dx3 = 0; 
    dy3 = 200/numLines;
    dx4 = -300/numLines;
    dy4 = -200/numLines;

}

function draw() {
    background(0);

//white interactive shape
    stroke(255);
    var x1 = constrain(mouseX, 200, 200);
    var y1 = 0;
    var x2 = 0;
    var y2 = mouseY
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += -dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += dy2;
    }
    var x1 = constrain(mouseX, 200, 200);
    var y1 = 0;
    var x2 = height;
    var y2 = mouseY;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

//red shape 1
    stroke(255,0,0);
    var x1 = width/2;
    var y1 = 0;
    var x2 = width/2;
    var y2 = height;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx3;
        y1 += dy3;
        x2 += dx4;
        y2 += dy4;
    }
//red shape 2
    var x1 = width/2;
    var y1 = 0;
    var x2 = width/2;
    var y2 = height;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx3;
        y1 += dy3;
        x2 += -dx4;
        y2 += dy4;
    }

//blue shape 1
    stroke(0,0,255);
    var x1 = 0;
    var y1 = 0;
    var x2 = height;
    var y2 = height;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
// blue shape 2
    var x1 = width;
    var y1 = 0;
    var x2 = 0;
    var y2 = height;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += -dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += dy2;
    }



   }

I struggled a lot at first trying to understand the starting example code, but after playing around with the numbers it wasn’t too bad. I changed some of the variables to be negative to create a symmetrical effect 🙂

LO 4

Michelle Dang (mtdang) Section D

Nigel John Stanford is an artist that created Cymatics, a music video that focuses on chladni plate art. He placed sand on a chladni plate (a sheet of metal) that was attached to a speaker. By playing different tones, the plate is divided into regions that vibrate in opposite directions and the sand shifts to locations where there are no vibrations. This creates symmetrical patterns based on the frequency of the audio. He experimented with different amounts of sand, shapes of chladni plates, and levels of volume as well as what frequencies created the most interesting repeatable patterns. I am interested in how formulaic the relationship is between frequency and the patterns. How does a higher frequency affect the pattern compared to a slightly lower frequency?

Project 3 Dynamic Drawing

sketch

//Michelle Dang (mtdang) section D
var r = 0; //red
var g = 0; //green
var b = 0; //blue 
var s = 2; //stroke weight

var f = 0; //fill color black

function setup() {
    createCanvas(450, 600);
    background(0);


    }

function draw() {
    translate(width/2, height/2); // center origin
    fill(f, 50);
    stroke(r, g, b, 100); 
    strokeWeight(s);
    rotate(mouseX); //rotate ellipse
    ellipse(0, 0, mouseY, mouseX); //elipse size based on mouse
    ellipse(0, 0, mouseX, mouseY); //elipse size based on mouse
    ellipse(0, 0, 30,30); // center ellipse for clear indication of stroke weight change

    mouseX -= .5;




    if (mouseX < 450 & mouseX > 0 && mouseY < 600 && mouseY > 0) { //when mouse is farthest form center, make ellipse purple
        r=127;
        g=0;
        b = 255;
    }
        if (mouseX<405 & mouseX > 45 && mouseY < 540 && mouseY > 60 ) { //blue stroke
        r = 0;
        g = 0;
        b = 255;
    }
    if (mouseX < 360 & mouseX > 90 && mouseY < 480 && mouseY > 120) { //green stroke
        r = 0;
        g = 255;
        b = 0;
 }  if (mouseX < 315 & mouseX > 135 && mouseY < 420 && mouseY > 180) { //orange stroke
        r = 255;
        g = 128;
        b = 0;
    }
    if (mouseX < 270 & mouseX > 180 && mouseY < 360  && mouseY > 240) { // when mouse is closest to center, make ellipses red 
        r = 255;
        g = 0;
        b = 0;
    
    }
}

    function mousePressed() {
      s = random(1, 20); // if mouse is pressed, randomly change strokeWeight
    }

Looking Outwards 3

Institute for Computational Design (ICD) and the Institute of Building Structures and Structural Design (ITKE) have used an interdisciplinary approach of biomimetic, computing, and robots to create research pavilions between 2010-2021. The first pavilion they created intentionally computes the design according to the characteristics and constraints of the material choices and physical form. Because they used birch plywood, they considered the elasticity of the wood and how bending flat strips that were robotically manufactured can connect the modular pieces. I am impressed with how the connections of the modules allow reinforcement of each other — it seems that adhesives or additional reinforcers were not used. I wonder how they were able to test out the structural integrity pavilion when computing the design — how did they know that the pavilion would not collapse? How could different materials affect the design?

https://www.itke.uni-stuttgart.de/research/icd-itke-research-pavilions/icd-itke-research-pavilion-2010/

Project 2: Variable Faces

sketch

//Michelle Dang, Section D

var faceWidth; 
var faceHeight;
var faceCurve;
var eyeSize;

var nr; //nose color
var ng;
var nb;

var smileW;
var smileL;

var noseWidth;
var noseHeight;

var face = 1;
var nose = 1;
var eye =1;
var smile=1;
var haircut=1;

var r =0;
var g= 0;
var b=0;

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

function draw() {
    background(168, 220, 237)
    noStroke()

    push()
    fill(r, g, b)
    rectMode(CENTER)
    rect(width/2, height/2+300, 220, 300, 90, 90, 0, 0)
    pop()

    if (face == 1) {
    fill(141, 85, 36)
    // ellipse(width/2, height/2, 200, 250)
    ellipse(width/2, height/2, 250, 270)
    }

    if (face == 2) {
    fill(224, 172, 105)
    // ellipse(width/2, height/2, 200, 250)
    ellipse(width/2, height/2, 250, 270)
    }

    if (face == 3) {
        fill(255, 219, 172)
        // circle(width/2, height/2, 250)
        ellipse(width/2, height/2, 250, 270)
    }

    if (face == 4) {
        fill(198, 134, 66)
        // ellipse(width/2, height/2, 270, 270)
        ellipse(width/2, height/2, 250, 270)
    }
     if (face == 5) {
        fill(241, 194, 125)
        ellipse(width/2, height/2, 250, 270)
    }

    // fill(hairR, hairG, hairB);
    // arc(width/2, height/2-(faceWidth/2)+50, faceWidth, faceHeight+200, PI, TWO_PI); // bowl cut


    if (haircut ==1) {
        fill(0)
        rect(width/2-125, height/2-135, 130, 110, 20, 0,90, 20)
        rect(width/2, height/2-135, 130, 110, 0, 20,20, 90)
    }

    if (haircut==2) {
        for (var x=115; x<350; x+=50) {
            fill(200, 100, 100)
            rect(x, 185, 50, 80, 0, 0, 90, 90)
        }
    }

    if (haircut == 3) {
        fill(227, 174, 50)
        arc(width/2, height/2-30, 240, 220, PI, TWO_PI);
    }




    if (smile==1) {
        fill(0); //smile
        arc(width/2, height/2+ faceWidth*.20, smileW, smileL, TWO_PI, PI);
    } if (smile==2) {
        fill(0); //frown
        arc(width/2, height/2+ faceHeight/2*.60, smileW, smileL, PI, TWO_PI);
    } if (smile==3) {
        fill(0); //neutral expression
        ellipse(width/2, height/2+ faceWidth*.20, rectMouthW, rectMouthH);
    }

   

    if (nose == 1) {
        fill(240, 157, 151);
        ellipse(width/2, height/2, 40, 20)
    }
     if (nose == 2) {
        fill(240, 157, 151);
        rect(width/2-noseWidth/2, height/2-noseHeight/2, noseWidth, noseHeight, 20, 20); 
    } 


     if(eye==1) {
        var eyeLX = width / 2 - faceWidth * 0.25; //black eyes
        var eyeRX = width / 2 + faceWidth * 0.25;
        fill(0);
        ellipse(eyeLX, height / 2, eyeSize, eyeSize);
        ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    }  if(eye==2) { //cresent eyes
        var eyeLX = width / 2 - faceWidth * 0.25;
        var eyeRX = width / 2 + faceWidth * 0.25;
        fill(0)
       arc(eyeLX, height/2, 40, 30, -PI, 0, CHORD);
       arc(eyeRX, height/2, 40, 30, -PI, 0, CHORD);

    } if (eye==3) { //black eyes with sparkles
         var eyeLX = width / 2 - faceWidth * 0.25; 
        var eyeRX = width / 2 + faceWidth * 0.25;
        fill(0); //black eye
        ellipse(eyeLX, height / 2, eyeSize, eyeSize);
        ellipse(eyeRX, height / 2, eyeSize, eyeSize);
        fill(255); // sparkle
        ellipse(eyeLX+4, height / 2, eyeSize/3, eyeSize/3);
        ellipse(eyeRX+4, height / 2, eyeSize/3, eyeSize/3); 
        
    }
///blush
    fill(240, 100, 100, 80);
    circle(eyeLX-20, height / 2 +30, 60);
    circle(eyeRX+20, height / 2+30, 60);
    

}

function mousePressed() {

    face= int(random(1,6))
    nose= int(random(1,3))
    eye = int(random(1,4))
    smile = int(random(1,4))
    haircut = int(random(1,4))

    smileW = random(40,50);
    smileL = random(30,40);

    rectMouthW = random(30,50);
    rectMouthH = random(10,15);

    noseWidth = random(20,35);
    noseHeight = random(40,50);

    r = random(100)
    g = random(100)
    b = random(100)

    nr = random(225, 255); // nose color
    ng = random(100, 250); 
    nb = random(100, 255); 

    faceWidth = random(150, 200);  
    faceHeight = random(150, 200);  
    faceCurve = random (20, 50); // curved chin of face
    eyeSize = random(25, 40); // size of eye

}

Looking Outwards 2

Lately, I’ve been interested in NFTs and how they’ve changed the art market through generative digital art. NFTs are non-fungible tokens that resemble a piece of digital art (motion graphics, 3D models, video, illustration, etc) and are sold and traded with crypto — with one generative piece that sold for $7 million. Successful artists such as CryptoPunks and Pudgy Penguins have an artistic style that unifies their collection, yet are able to create thousands of unique works. Their work is generated by the blockchain to randomize appearances such as color and clothes: “NFT creators within the artificial intelligence generative art community are using algorithms and blockchain-based provenance to address issues of mercurial valuation and fraud” (Forbes). I am curious to see how long NFTs will last (whether they will be a fad or well integrated into the digital art market).

https://www.forbes.com/sites/leeorshimron/2021/09/08/the-nft-generative-art-movement-is-challenging-how-we-think-about-value/?sh=10cdb71578ae

https://opensea.io/

Project 1: My Self Portrait

Michelle-Self-Portrait

// Using p5.js, draw a self-portrait using at least 10 graphic elements, 
//such as lines, quads, ellipses, etc. You may use any graphical primitives you please,
// with the exception that you may not use drawing functions that require the loading of external assets (e.g. images, fonts). 
//Experiment with the use of at least 2 colors in addition to the background color.

function setup() {
    createCanvas(500, 550);
    background(150, 191, 215);
}

function draw() {


    strokeWeight(0);

    fill(31, 29, 19);
    rect(110, 150, 130, 350, 800, 20, 70, 40); //left hair
    rect(255,150, 130, 350, 800, 70, 40, 70); // right hair

    fill (218, 197, 150);
    rect(150, 100, 200, 250, 20, 30, 80,80); //head

    fill(31, 29, 19);
    rect(100, 50, 150, 180, 800, 70, 80, 40); // left bang
    rect(250, 50, 150, 180, 800, 70, 40, 80); // right bang
    arc(200, 250, 40, 30, PI, 0); // left eye
    arc(300, 250, 40, 30, PI, 0); // right eye
    rect(158, 50, 185, 95); //top hair


    fill (218, 197, 150);
    ellipse(200, 255, 40, 20); // left eye skin color
    ellipse(300, 255, 40, 20); //right eye skin color

    fill (255, 176, 222, 80);
    ellipse(170, 280, 90, 90); //left blush
    ellipse(325, 280, 90, 90); // right blush

    fill(200, 100, 73); 
    ellipse(250, 280, 40, 20); //nose

    fill (218, 197, 150);
    rect(220, 310, 60, 100); // neck

    fill(225);
    rect(150, 380, 200, 250, 80, 80, 0,0); // shirt


    fill (218, 197, 150);
    ellipse(250, 375, 60, 60); //neckline


    fill(0);
    arc(250, 300, 50, 50, 0, PI); //smile!



    strokeWeight(3); // necklace
    stroke(192, 169, 70);
    line(220, 380, 250, 420); 
    line(280, 380, 250, 420); 

    noStroke();
    fill(120, 190, 0);
    ellipse(250, 430, 10, 20); // jade





    noLoop();







}

I struggled most with finding the intended location of functions on the x and y axis. I did a lot of guess and checking until I was satisfied with the position, but I hope I can be more intentional in future projects.

LO: My Inspiration

http://toddbracher.com/work/bodiesinmotion/
Bodies in Motion is a large-scale interactive installation by Studio GreenEyl and Todd Bracher for Humanscale at the Milan Design Week 2019. I came across this installation when looking for inspiration for building my own installation. Motion sensors detect full-body human movement and fifteen beams of light reflect the joints of the user’s body to create an abstract human form (which was inspired by research psychophysicist Gunnar Johansson who studied the use of lights on main points of the human body to emphasize movement). The interdisciplinary use of design, technology, and social behavior created a captivating and engaging work of art. In the future, I hope to be able to work on similar projects in a studio setting.