## Project 5

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

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.

## Project 4

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

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

``````//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://opensea.io/

## Project 1: My 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.