Month: September 2022

Project 01

This is my project

sketch
function setup() {
    createCanvas(200, 200);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    
    background(random(0,75),random(0,75),random(0,75));

    strokeWeight(0);
    fill(random(210,255),random(210,255),random(210,255),75);
    rect(0,0,100,200)

    strokeWeight(0);
    fill(255);
    rect(50,80,100,55); //hair back

    strokeWeight(0);
    fill(255);
    quad(60,160,140,160,75,50,125,50);   //hair back

    strokeWeight(0);
    fill(255);
    quad(55,145,145,145,60,70,140,70);   //hair back

    strokeWeight(0);
    fill(random(50,100),random(50,100),random(50,100));
    triangle(100,165,175,200,25,200);    //shoulders

    strokeWeight(0);
    fill(random(100,200),random(100,200),random(100,200));
    ellipse(100,100,90,125);    //head

    strokeWeight(0);
    strokeWeight(0);
    rect(85,100,30,77); //neck

    strokeWeight(0);
    strokeWeight(0);
    triangle(100,185,115,177,85,177);    //more neck

    fill(random(210,255),random(210,255),random(210,255),75); //face shading
    beginShape();
    vertex(100,100);
    vertex(110,120);
    vertex(100,160);
    vertex(145,160);
    vertex(145,37.5);
    vertex(100,37.5);
    endShape();

    stroke(100,0,50);
    fill(20,0,20);
    triangle(75,80,95,110,60,120);   //right eye

    fill(random(210,255),random(210,255),random(210,255));
    circle(77,100,15);    //right pupil

    circle(120,100,30); //left eye

    stroke(random(0,50),random(0,50),random(0,50));
    strokeWeight(5);
    line(110,100,130,100);  //left pupil

    stroke(255);
    strokeWeight(3);
    fill(0);
    arc(100,140,50,20,15.7,PI+PI,PIE);  //mouth

    strokeWeight(0); 
    fill(255);
    square(55,38,45); //hair front

    strokeWeight(0); 
    fill(255);
    arc(100,38,50,20,10.5,PI,PIE) //hair front

    strokeWeight(0); 
    fill(255);
    beginShape();
    vertex(100,38);
    bezierVertex(100,38,100,100,150,60)
    bezierVertex(100,20,120,70,150,50)
    endShape();     //hair front

     noloop()


}

Project 01: Portrait

sketch
// Emily Franco
// Section C
//Graphic elements used: ellipse,cicle,line,point,rect,square,tri,arc
var y_ref_pos = 150;
var x=0;
function setup() {
    createCanvas(500, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	//background
	strokeWeight(0);
	fill(random(100,200),random (100,200),random(100,200));
	rect(x,0,10,height);
	fill(217,245,228);
	rect(x+10,0,30,height);
	x=x+30;
	//--------HAIR-------
	//back hair
	fill (104, 66, 17); //dark brown
	ellipse (width/2, y_ref_pos+28,130,200);

	//--------CLOTHES-------
	fill (220, 96, 46); //orange
	arc((width/2)-16+22,y_ref_pos+79,140,35,Math.PI,0);
	//shirt 
	rect((width/2)-43.5,y_ref_pos+70,90.5,90);

	//------FACE-----
	strokeWeight (.25);
	//base ears 
	fill (238, 217, 197); //beige
	ellipse ((width/2)-53,y_ref_pos,16,30);
	ellipse ((width/2)+53,y_ref_pos,16,30);
	//neck 
	fill (238, 217, 197);//beige
	ellipse((width/2)-22+22.5, y_ref_pos+45+20,45,30);
	strokeWeight (0);
	rect((width/2)-22, y_ref_pos+45,45,20);
	//base face
	strokeWeight (.25);
	ellipse (width/2,y_ref_pos,100,116);
	//nose 
	fill (229, 155, 99); //orange
	triangle (width/2,y_ref_pos-10,240,y_ref_pos+15,250,y_ref_pos+18);
	//eyes 
	fill (58,37,22); //dark brown
	ellipse ((width/2)-22,y_ref_pos-10,8,12);
	ellipse ((width/2)+22,y_ref_pos-10,8,12);
	//eyebrows 
	stroke(58,37,22);
	strokeWeight (.75);
	noFill();
	arc((width/2)-22,y_ref_pos-17,10,7,-3,-0.5);
	arc((width/2)+22,y_ref_pos-17,10,7,-2.5,0);
	//smile
	arc(width/2,y_ref_pos+33,10,7,0,3);
	//cheeks
	fill (233, 161, 135); //pink
	strokeWeight (0);
	circle((width/2)+22,y_ref_pos+15,20);
	circle((width/2)-25,y_ref_pos+15,20);

	//------BODY-----
	//shoulders
	fill (238, 217, 197); //beige
	circle((width/2)-60, y_ref_pos+90,40);
	circle((width/2)+63, y_ref_pos+90,40);
	//arms
	rect((width/2)-80,y_ref_pos+90,40,70);
	rect((width/2)+43,y_ref_pos+90,40,70);

	//-----DETAILS----
	//earings
	fill (111, 115, 210); //purple
	square ((width/2)-57,y_ref_pos+15,8); 
	square ((width/2)+50,y_ref_pos+15,8);
	//bangs
	push();
	strokeWeight(0);
	fill (104, 66, 17); //brown 
	rotate (-0.9);
	ellipse (width/2-165, y_ref_pos+135,20,75);
	rotate (1.7);
	ellipse (width/2-14, y_ref_pos-238,20,75);
	pop();
	//hairclip 
	//random color generated in first loop and only changes when page is reloaded
	if (x==30) {
		stroke(r=random(100,200),g=random (100,200),b=random(100,200));
	}else{
		stroke(r,g,b);
	}
	strokeWeight(4);
	line(width/2+25,y_ref_pos-30,(width/2)+40,y_ref_pos-40);
	//shirt details
	stroke(172,146,166);
	point(width/2, y_ref_pos+120);
	point(width/2, y_ref_pos+100);
	point(width/2, y_ref_pos+140);

	//reset stroke attribute
	strokeWeight(0);

}

Project 01

This is my project of my self portrait.

sketch
//Tracy Meng
//Section B

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //BACKGROUND
    background(225,246,255);        // light blue sky

    //CLOUDS
    noStroke();
    fill(255);                      // cloud color (white)
    circle(200,90,70);              // cloud 1
    circle(150,70,100);
    circle(100,90,80);
    circle(50,90,60);

    circle(340,180,80);             // cloud 2
    circle(400,160,120);
    circle(450,180,100);
    circle(500,180,90);
    circle(550,180,50);

    //HILLS
    fill(186,245,190);              // light green
    circle(150,550,300);            // hill 1
    circle(0,520,100);              // hill 2
    circle(450,520,200);            // hill 3
    circle(550,570,150);            // hill 4

    //TREES
    fill(104,193,110);              // dark green
    ellipse(50,500,70,300);         // tree 1
    ellipse(145,400,90,height);      // tree 2
    ellipse(480,500,70,500);        // tree 3

    //SHRUBS
    fill(77,235,87);                // light green 2
    ellipse(85,550,60,200);         // shrub 1
    ellipse(530,550,70,360);        // shrub 2

    //BACK OF HAIR
    fill(102,58,14);                // hair color (dark brown)
    rect(185,308,230,height);       

    //HAIR HIGHLIGHTS
    stroke(166,111,0);              // light brown
    strokeWeight(3);                // highlight thickness
    line(200,308,200,height);  
    line(240,308,240,height);
    line(225,308,225,432); 
    line(380,400,380,height);
    line(400,308,400,height);   

    //HEAD SHAPE
    noStroke();
    fill(255,220,177);              // skin color (nude)
    ellipse(width/2,height/2,220,250); // head shape & location

    //EARS
    fill(255,220,177);              // skin color (nude)
    ellipse(190,308,30,50);         // left ear
    ellipse(410,308,30,50);         // right ear

    //BODY
    //SHIRT
    fill(243,18,153);               // shirt color (hot pink)
    ellipse(width/2,490,250,100);   // shoulders
    quad(175,485,125,height,475,height,425,485); // rest of tshirt

    //SHIRT COLLAR
    noFill();                       
    stroke(255);                    // collar color (white)
    strokeWeight(10);
    arc(width/2,450,80,80,0,PI);

    //NECK
    noStroke();
    fill(255,220,177);              // skin color (nude)

    rect(260,410,80,35);  
    ellipse(width/2,450,80,80);     // neckline    

    //EAR HOLES
    noFill();
    strokeWeight(2);
    stroke(230,145,20);             // brown ear stroke
    arc(190,308,10,30,PI/2,PI/2+PI); // left hole
    arc(410,308,10,30,-PI/2,PI/2);   // right hole

    //CHIN DEFINITION
    arc(width/2,422,20,10,0,PI);

    //EARRINGS
    //LEFT TRIANGLE EARRING 
    strokeWeight(2);
    stroke(255,157,58);             // orange outline
    fill(255,239,0);                // gold 
    triangle(180,333,200,333,190,350);

    //RIGHT TRIANGLE EARRING
    triangle(400,333,420,333,410,350);

    //LEFT EARRING DANGLES 1
    strokeWeight(4);                // thicker orange outline
    fill(185,63,255);               // purple
    quad(190,350,170,365,190,385,210,365); 

    //RIGHT EARRING DANGLES 1
    quad(410,350,390,365,410,385,430,365); 

    //LEFT EARRING DANGLE 2
    noFill();
    stroke(0,233,194);              // teal dangle outline
    quad(190,385,180,395,190,410,200,395); 

    //RIGHT EARRING DANGLE 2
    quad(410,385,400,395,410,410,420,395); 

    //SUNGLASSES
    //FRAME + LENSES
    stroke(250,145,164);            // rim color (pink)
    strokeWeight(8);                // rim thickness
    fill(28,28,28);                 // lenses color (dark grey)
    rect(220,260,65,65,10);         // rectangle lense 1 (left)
    rect(315,260,65,65,10);         // rectangle lense 2 (right)

    line(285,295,315,295);          // connect rims
    line(220,295,195,295);          // left band
    line(380,295,405,295);          // right band

    //PEARLS
    strokeWeight(4);                // thickness of point
    stroke(255);                    // pearl color (white)
    point(230,260);                 // top left rim
    point(240,260);
    point(250,260);
    point(260,260);
    point(270,260);

    point(230,325);                 // bottom - left rim
    point(240,325);
    point(250,325);
    point(260,325);
    point(270,325);

    point(220,275);                 // left - left rim
    point(220,285);
    point(220,295);
    point(220,305);
    point(220,315);

    point(285,275);                 // right - left rim
    point(285,285);
    point(285,295);
    point(285,305);
    point(285,315);

    point(330,260);                 // top - right rim
    point(340,260);
    point(350,260);
    point(360,260);
    point(370,260);

    point(330,325);                 // bottom - right rim
    point(340,325);
    point(350,325);
    point(360,325);
    point(370,325);

    point(315,275);                 // left - right rim
    point(315,285);
    point(315,295);
    point(315,305);
    point(315,315);

    point(380,275);                 // right - right rim
    point(380,285);
    point(380,295);
    point(380,305);
    point(380,315);

    //GLARE LINES
    stroke(238,238,255);            // glare color (grey - white)
    strokeWeight(3);                // glare thickness
    line(242,304,264,282);          // glare left
    line(337,304,359,282);          // glare right

    //NOSE
    noFill();
    stroke(230,145,20);             // brown nose stroke
    strokeWeight(2);                // nose stroke weight
 
    arc(290,350,20,20,PI/2,PI/2+PI) // arc left: PI = Half of a circle
    arc(310,350,20,20,-PI/2,PI/2);  // arc right: PI = Half of a circle

    line(290,340,290,322);          // nose line left
    line(310,340,310,322);          // nose line right

    //NOSTRILS
    noStroke();
    fill(222,171,95);               // light brown
    ellipse(292,353,10,5);          // left nostril
    ellipse(308,353,10,5);          // right nostril

    //LIPS
    //BOTTOM LIP
    stroke(255,122,162);            // lip liner color
    fill(255,132,168);              // lip color (light red)

    ellipse(width/2,390,25,15);

    //TOP LIP
    noStroke();
    fill(255,78,132);               // lip color (deep red)


    ellipse(292,385,27,13);         // left side
    ellipse(308,385,27,13);         // right side

    //MAKEUP HIGHLIGHT
    //LIP SPARKLE
    stroke(255,238,210);            // sparkle color
    strokeWeight(5);                // sparkle thickness
    point(width/2,376);             // top sparkle
    point(width/2,402);             // bottom sparkle

    //NOSE SPARKLE
    line(width/2,340,width/2,322);

    //ROSY CHEEKS
    noStroke();
    fill(255,200,228);              // rose
    ellipse(245,340,60,20);         // blush left
    ellipse(355,340,60,20);         // blush right
      
    //HAIR BANGS
    stroke(166,111,0);              // light brown stroke (match highlight)
    strokeWeight(3);
    fill(102,58,14);                // bangs color (dark brown)  
    point(220,220);                 // left
    point(380,220);                 // right

    bezier(300,175,120,180,250,300,150,430); // left bangs
    bezier(300,175,480,180,350,300,450,430); // right bangs   

    //HIGHLIGHT BANGS
    //LEFT
    bezier(280,195,150,200,260,320,170,400);

    //RIGHT
    bezier(320,195,450,200,340,320,430,400);


 

}

Project 01: Self Portrait

self portrait

sketch

The most challenging part of this project was figuring out which new components go on which coordinates (this part took quite a lot of trial and error).

// Kathy Lee, Section D function setup() { createCanvas(500, 500); background(230); text(“My Self Portrait”, 10, 15); } function draw() { //my hair fill(0); ellipse(250, 245, 200, 270); fill(0); rect(152, 220, 75, 200); fill(0); rect(273, 220, 75, 200); //face fill(223, 172, 107); ellipse(275-25, 275-25, 150, 225); //neck fill(223, 172, 107); rect(200+12.5, 300, 75, 125); fill(223, 172, 107); ellipse() //my rectangular shirt noStroke() fill(255); rect(100, 400, 300, 300, 50); //front hair that flows down past the shirt fill(0); rect(151, 375, 62, 100); fill(0); rect(287, 375, 62, 100); //eyes fill(0); ellipse(223, 220, 30, 20); // left eye (full pupil) fill(0); ellipse(277, 220, 30, 20); // right eye (full pupil) fill(223, 172, 107); ellipse(223, 225, 30, 20); // left eye skin tone fill(223, 172, 107); ellipse(277, 225, 30, 20); // right eye skin tone //nose fill(208, 161, 101); triangle(250, 250, 230, 280, 270, 280); //mouth fill(203, 117, 100); ellipse(250, 300, 50, 25); // pink lip color fill(223, 172, 107); ellipse(250, 290, 50, 20); // skin tone to highlight smiling mouth //ears fill(223, 172, 107); ellipse(180, 250, 40, 50); // left ear fill(15, 126, 47); ellipse(170, 275, 15, 15); // earring fill(223, 172, 107); ellipse(320, 250, 40, 50); // right ear fill(15, 126, 47); ellipse(330, 275, 15, 15); // earring //eyebrows fill(208, 161, 101); rect(210,190, 30, 7); // left eyebrow // I wanted to make the eyebrows with lines and change the strokeweight but then all the shapes get outlined? // Not sure exactly what’s going on so I will stick to rectangles for now fill(208, 161, 101); rect(260, 190, 30, 7); // right eyebrow } 
// Kathy Lee, Section D

function setup() {
    createCanvas(500, 500);
    background(230);
    text("My Self Portrait", 10, 15);
}

function draw() {
    //my hair
    fill(0);
    ellipse(250, 245, 200, 270);
    fill(0);
    rect(152, 220, 75, 200);
    fill(0);
    rect(273, 220, 75, 200);
    
    //face
    fill(223, 172, 107);
    ellipse(275-25, 275-25, 150, 225);
    
    //neck
    fill(223, 172, 107);
    rect(200+12.5, 300, 75, 125);
    fill(223, 172, 107);
    ellipse()

    //my rectangular shirt
    noStroke()
    fill(255);
    rect(100, 400, 300, 300, 50);

    //front hair that flows down past the shirt
    fill(0);
    rect(151, 375, 62, 100);
    fill(0);
    rect(287, 375, 62, 100);

    //eyes
    fill(0);
    ellipse(223, 220, 30, 20); // left eye (full pupil)
    fill(0);
    ellipse(277, 220, 30, 20); // right eye (full pupil)
    fill(223, 172, 107);
    ellipse(223, 225, 30, 20); // left eye skin tone
    fill(223, 172, 107);
    ellipse(277, 225, 30, 20); // right eye skin tone 

    //nose
    fill(208, 161, 101);
    triangle(250, 250, 230, 280, 270, 280);

    //mouth
    fill(203, 117, 100);
    ellipse(250, 300, 50, 25); // pink lip color
    fill(223, 172, 107);
    ellipse(250, 290, 50, 20); // skin tone to highlight smiling mouth

    //ears
    fill(223, 172, 107);
    ellipse(180, 250, 40, 50); // left ear
    fill(15, 126, 47);
    ellipse(170, 275, 15, 15); // earring
    fill(223, 172, 107);
    ellipse(320, 250, 40, 50); // right ear
    fill(15, 126, 47);
    ellipse(330, 275, 15, 15); // earring


    //eyebrows
    fill(208, 161, 101);
    rect(210,190, 30, 7); // left eyebrow
    // I wanted to make the eyebrows with lines and change the strokeweight but then all the shapes get outlined? 
    // Not sure exactly what's going on so I will stick to rectangles for now
    fill(208, 161, 101);
    rect(260, 190, 30, 7); // right eyebrow

}

LO: Machine Hallucinations

In New York City, there is an immersive art museum called Artechouse. Here the museum displays various works, but the one that I saw was called “Machine Hallucinations” by Refik Anadol. His exhibit included images generated using NFT art; these images were made from various datasets of New York City and public photography. Looking at some of the pictures I could clearly tell they were cityscapes and looking closer they were made up of smaller images reminiscent of city life; others began as small, obscure parts that joined into a collective image that became recognizable. I find these works so interesting because apart from the story their primary image holds, there are also stories in their make-up. This type of art is relatively new and has been becoming more popular, with exhibits like the Immersive Van Gogh Exhibit that brings motion and music to his paintings. I think this type of art gives us a new perspective on old ideas by creating similar and vaguely familiar images that force us to draw the connection between the art and the original reference. Apart from the music and lighting, the art these AI systems generate immerses us into the origins of the art by deconstructing it.

Machine Hallucinations by Refik Anadol
https://refikanadol.com/works/machine-hallucination/

Project 1: My Self Portrait

sketch
// Evan Stuhlfire
// estuhlfi@andrew.cmu.edu
// Section B 
// 01-project self portrait 

function setup() {
    createCanvas(500, 500);
}

function draw() {
    let circleX = width/2;
    let circleY = height/3;
    let diameter = width/2.5;
    let rectX = circleX - (diameter/2);
    let rectY = circleY + (diameter/2);

    // Set background
    background(144, 195, 209);

    // Draw face
    stroke(25);
    strokeWeight(5);
    fill(141, 186, 153);
    circle(circleX, circleY, diameter);

    fill(207, 117, 54, 200);
    rect(rectX, circleY, diameter, diameter/2);

    fill(39, 62, 176);
    quad(rectX, rectY, rectX + diameter/4, rectY + diameter/2, rectX + diameter*.75, rectY + diameter/2, rectX + diameter, rectY);

    // Draw eyes
    fill(237, 124, 114);
    ellipse(rectX + diameter/3, circleY + 20, diameter/5, diameter/6);
    fill(201, 201, 153);
    ellipse(rectX + diameter*.67, circleY +20, diameter/5, diameter/6);

    // Draw nose
    fill(245, 245, 98);
    triangle(circleX, circleY + 20, rectX + diameter/3, rectY, rectX + diameter*.67, rectY);

    // Draw chin and mouth
    fill(148, 150, 214);
    rect(rectX + diameter/4, rectY, diameter*.5, diameter/2);
    fill(207, 117, 54);
    rect(rectX + diameter/3, rectY + diameter/5.5, diameter/3, 10);



    // Create frame
    noFill();
    stroke(25);
    strokeWeight(20);
    rect(0, 0, 500, 500);

    noLoop();
    
}

I found posting the sketch to be the most difficult part of this exercise.

LO: My Inspiration

One “creative technologies” project that really stands out to me is the Gravity Harps installation. The piece was commissioned by Icelandic musician Björk’s Biophilia tour, who wanted custom instruments for her studio album, requesting the help of Robot Music inventor Andy Cavatorta (who partnered with Pattern Studios for the electronics of the piece). The collaborative project involved mechanics, sound engineers, designers, and musicians and took one year to complete. The piece involves 11 harp strings attached to mechanical pendulums that use python code to formulate specific melodies that are played in succession of each swinging harp.

What I especially appreciate about this piece is how natural the integration with technology and music was undertaken. It’s always a risk to “overcompute” a creative practice within these types of projects, which undermine the beauty of arts based performances. However, the project reimagines how a traditional instrument can be computed in a way that makes one still appreciate the creative elements in its practice – e.g rhythm, timing, notes, etc. In context of the musician’s tour biophilia (which refers to humans’ tendency to seek connection with nature), the piece makes use of “natural” elements like physics and motion to create music. This project suggests ways to compute more instruments, possibly creating a machine based orchestra.

Source #1: Inventing Björk’s Gravity Harp, The New Yorker
Andrew Marantz

https://www.pattenstudio.com/works/gravity-harps/

Project 01 – Self Portrait – srauch

A portrait of Sam Rauch!

sketch 

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(231, 203, 62);

    //temporary guidelines
    //strokeWeight(2);
    //line(300, 0, 300, 600);
    //line(0, 300, 600, 300);

    //shirt
    strokeWeight(0);
    fill(114, 193, 189);
    rect(120, 500, 360, 100);
    triangle(120, 500, 300, 460, 300, 500);
    triangle(300, 500, 300, 460, 480, 500);
    fill(75, 161, 156);
    triangle(120, 500, 120, 600, 60, 600);
    triangle(480, 500, 480, 600, 540, 600);
    ellipse(300, 505, 200, 60);

    //neck
    fill(244, 233, 217); //light skin
    rect(225, 339, 150, 170);
    ellipse(300, 510, 150, 30);

    fill(199, 169, 127); //shadow skin
    ellipse(300, 400, 150, 150);
    rect(225, 339, 150, 67);

    //head
    fill(244, 233, 217); //light skin
    ellipse(300, 285, 260, 320);

    //ears
    ellipse(170, 295, 50, 80);
    ellipse(430, 295, 50, 80);
    triangle(160, 332, 180, 335, 185, 350);
    triangle(440, 332, 420, 335, 415, 350);

    //hair base
    noFill();
    stroke(173, 94, 93); //hair dark
    strokeWeight(20);
    arc(300, 285, 240, 300, 3.39, 6.03);

    fill(173, 94, 93);
    strokeWeight(0);
    arc(300, 210, 220, 130, 3.15, 6.30);

    triangle(192, 250, 200, 200, 260, 200);
    triangle((600-192), 250, (600-200), 200, (600-260), 200);

    //sideburns?
    fill(173, 94, 93) //hair dark
    strokeWeight(0);
    rect(172, 255, 20, 60, 0, 0, 20, 20);
    rect(408, 255, 20, 60, 0, 0, 20, 20);

    //mouth
    fill(61, 32, 31); //mouth pink
    arc(300, 375, 100, 90, 6.30, 3.15);

    stroke(61, 32, 31); //mouth pink
    strokeWeight(10);
    strokeCap(ROUND); //case sensitive: SQUARE and ROUND
    line(255, 375, 345, 375);

    //teeth
    stroke(247, 246, 232); //teeth color
    strokeWeight(10);
    line(262, 382, 338, 382);

    //nose
    stroke(199, 168, 127);
    strokeWeight(18);
    line(305, 300, 305, 345);

    //playing with whites of eyes
    //fill(247, 246, 232);
    //strokeWeight(0);
    //ellipse(245,300, 50, 40);
    //ellipse(355,300, 50, 40);
    //arc(245,300, 50, 40, 3.3, 6.15);
    //arc(355,300, 50, 40, 3.3, 6.15);

    //eye arcs
    stroke(69, 74, 69); //eye color
    strokeWeight(5);
    noFill();
    arc(245,300, 50, 40, 3.3, 6.15);
    arc(355,300, 50, 40, 3.3, 6.15);

    //eye fill
    strokeWeight(0);
    fill(69, 74, 69);
    ellipse(245, 295, 25, 25);
    ellipse(355, 295, 25, 25);

    //eyebrows
    stroke(87, 68, 44); //eyebrow color
    strokeWeight(10);
    line(240, 260, 270, 262); //flat
    line(220, 270, 240, 260); //corner
    line((600-240), 260, (600-270), 262); //flat
    line((600-220), 270, (600-240), 260); //corner


    //angleMode(DEGREES);

    //spikes!
    fill(237, 141, 141); //hair light
    strokeWeight(0);

    triangle(380, 80, 350, 200, 240, 160);
    triangle(310, 70, 380, 200, 270, 200);
    triangle(190, 220, 300, 160, 220, 100);
    triangle(220, 190, 315, 160, 270, 90);
    triangle(200, 230, 230, 180, 190, 160);

    //bangs
    triangle(230, 200, 290, 200, 270, 240);
    triangle(200, 200, 250, 200, 230, 250);
    triangle(270, 200, 350, 200, 340, 250);
    triangle(195, 200, 230, 220, 185, 240);
    triangle(170, 195, 210, 180, 200, 230);
    triangle(220, 200, 270, 200, 280, 170);
    triangle(340, 140, 420, 130, 380, 200);
    triangle(340, 210, 410, 220, 370, 170);
    triangle(330, 210, 380, 240, 375, 210);

    noLoop();
}

Project 01

This is my self portrait

sketch
//Michael Li
//Section C
function setup() {
    createCanvas(800, 750);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //Background If Condition
    var buildingcolor = 150;//default buildin color light grey
    var windowcolor = 70;//default window color dark grey
    if (mouseY < height * 0.33) {
        background(189, 184, 220);//purple
        fill(25, 53, 79);
        noStroke()
        rect (0, height*0.66, width, height/3); //uses default building and window color


    } else if (mouseY > height * 0.66) {
        background (60, 73, 120) //dark blue
        fill(25, 53, 79);
        noStroke()
        rect (0, height*0.66, width, height/3);
        buildingcolor = 20 //changes building color to dark grey
        windowcolor = 255 //change window color to white

    } else {
        background (58, 126, 146); //Light blue
        fill(25, 53, 79); 
        noStroke()
        rect (0, height*0.66, width, height/3);
        buildingcolor = 120 //changes building color to grey
        windowcolor = 150 //changes window color to light grey
    //depends  on mouse position on canvas, change background from early morning, mid day to night
    }

    // Building 1 in Background (right building)

        fill(buildingcolor)
        noStroke()
        rect(520, height*0.33, 130, height/3);
        fill(windowcolor)

        //windows
        var row1 = 530
        var row2 = 570
        var row3 = 610
        
        rect(row1, (height*0.33)+10, 30, 20)
        rect(row1, (height*0.33)+50, 30, 20)
        rect(row1, (height*0.33)+90, 30, 20)
        rect(row1, (height*0.33)+130, 30, 20)
        rect(row1, (height*0.33)+170, 30, 20)

        rect(row2, (height*0.33)+10, 30, 20)
        rect(row2, (height*0.33)+50, 30, 20)
        rect(row2, (height*0.33)+90, 30, 20)
        rect(row2, (height*0.33)+130, 30, 20)
        rect(row2, (height*0.33)+170, 30, 20)

        rect(row3, (height*0.33)+10, 30, 20)
        rect(row3, (height*0.33)+50, 30, 20)
        rect(row3, (height*0.33)+90, 30, 20)
        rect(row3, (height*0.33)+130, 30, 20)
        rect(row3, (height*0.33)+170, 30, 20)

    // Building 2 in Background (left taller building)

        fill(buildingcolor)
        noStroke()
        rect(170, height*0.05, 170, height/1.64);
        fill(windowcolor)

        //windows
        row1 = 180 //changes window row variable since second building
        row2 = 220
        row3 = 260
        var row4 = 300

        rect(row1, (height*0.33)-190, 30, 20)
        rect(row1, (height*0.33)-150, 30, 20)
        rect(row1, (height*0.33)-110, 30, 20)
        rect(row1, (height*0.33)-70, 30, 20)
        rect(row1, (height*0.33)-30, 30, 20)
        rect(row1, (height*0.33)+10, 30, 20)
        rect(row1, (height*0.33)+50, 30, 20)
        rect(row1, (height*0.33)+90, 30, 20)
        rect(row1, (height*0.33)+130, 30, 20)
        
        rect(row2, (height*0.33)-190, 30, 20)
        rect(row2, (height*0.33)-150, 30, 20)
        rect(row2, (height*0.33)-110, 30, 20)
        rect(row2, (height*0.33)-70, 30, 20)
        rect(row2, (height*0.33)-30, 30, 20)
        rect(row2, (height*0.33)+10, 30, 20)
        rect(row2, (height*0.33)+50, 30, 20)
        rect(row2, (height*0.33)+90, 30, 20)
        rect(row2, (height*0.33)+130, 30, 20)
        
        rect(row3, (height*0.33)-190, 30, 20)
        rect(row3, (height*0.33)-150, 30, 20)
        rect(row3, (height*0.33)-110, 30, 20)
        rect(row3, (height*0.33)-70, 30, 20)
        rect(row3, (height*0.33)-30, 30, 20)
        rect(row3, (height*0.33)+10, 30, 20)
        rect(row3, (height*0.33)+50, 30, 20)
        rect(row3, (height*0.33)+90, 30, 20)
        rect(row3, (height*0.33)+130, 30, 20)

        rect(row4, (height*0.33)-190, 30, 20)
        rect(row4, (height*0.33)-150, 30, 20)
        rect(row4, (height*0.33)-110, 30, 20)
        rect(row4, (height*0.33)-70, 30, 20)
        rect(row4, (height*0.33)-30, 30, 20)
        rect(row4, (height*0.33)+10, 30, 20)
        rect(row4, (height*0.33)+50, 30, 20)
        rect(row4, (height*0.33)+90, 30, 20)
        rect(row4, (height*0.33)+130, 30, 20)

    strokeWeight(0) //No stroke for the main portrait

    //neck
    fill(204, 172, 125);
    rect(335, 300, 130, 140)

    //head part 1 circle
    fill(235, 209, 168); //skin color
    ellipse(387, 200, 260, 236); 
    stroke(235, 209, 168)

    //head part 2 chin
    bezier(257, 200, 244, 453, 411, 398, 487, 269);
    
    //Eyes whites
    fill(255);
    ellipse(286, 218, 36, 42)//left eye
    fill(255);
    ellipse(373, 218, 36, 42)//right eye

    //eyes pupils
    fill(70, 50, 21)
    ellipse(294, 218, 20, 32);
    fill(70, 50, 21)
    ellipse(383, 218, 20, 32);
    
    //Eyes Highlights
    fill(255)
    ellipse(297, 209, 3, 7);
    fill(255)
    ellipse(387, 209, 3, 7);

    //nose
    fill(204, 172, 125)
    beginShape()
        vertex(327, 225);
        vertex(327, 286);
        vertex(306, 284);
        vertex(303, 276);
    endShape(CLOSE);


    //Hair
    fill(50)
    beginShape();
        vertex(238, 218); //bottom left
        vertex(238, 163);
        vertex(233, 140);
        vertex(288, 68);
        vertex(349, 52);
        vertex(400, 47);
        vertex(469, 77);
        vertex(515, 110);
        vertex(537, 164);
        vertex(524, 221);
        vertex(521, 258);
        vertex(493, 296);
        vertex(498, 211);
        vertex(480, 205);
        vertex(473, 231);
        vertex(462, 247);
        vertex(462, 219);
        vertex(455, 207);
        vertex(441, 200);
        vertex(421, 164);
        vertex(394, 172);
        vertex(356, 162);
        vertex(319, 200);
        vertex(298, 160);
        vertex(291, 166);
        vertex(280, 164);
    endShape(CLOSE);

    //Ears
    fill(204, 172, 125);
    bezier(478, 212, 515, 211, 515, 259, 464, 279);
    fill(235, 209, 168);
    bezier(478, 218, 497, 211, 497, 259, 464, 267);

    //mouth
    fill (0);
    bezier(314, 324, 327, 333, 373, 330, 381, 315);
    fill(255);
    beginShape();
        vertex(319, 323);
        vertex(319, 325);
        vertex(377, 318);
        vertex(377, 315.5);
        
    endShape(CLOSE);

    //Arms

    fill(235, 209, 168);
    beginShape();
        vertex(216, 659);
        vertex(207, height)
        vertex(125, height);
        vertex(154, 650);
    endShape(CLOSE);

    beginShape();
        vertex(623, 667);
        vertex(643, height);
        vertex(728, height);
        vertex(695, 655);
    endShape(CLOSE);



    //Shirt

    fill(230);
    beginShape();
        vertex(207, height);
        vertex(235, 463);
        vertex(318, 411);
        vertex(358, 438);
        vertex(471, 399);
        vertex(567, 455);
        vertex(615, height);
    endShape(CLOSE);

    //Sleeves

    fill(180);
    beginShape();
        vertex(235, 463);
        vertex(147, 520);
        vertex(110, 641);
        vertex(216, 659);
    endShape(CLOSE);

    beginShape();
        vertex(567, 455);
        vertex(674, 515);
        vertex(703, 656);
        vertex(588, 676);
    endShape(CLOSE);

    //Eye brows
    fill(0);
    bezier(270, 195, 273, 182, 303, 182, 308, 208);
    bezier(357, 199, 362, 184, 391, 184, 401, 203);

    //Glasses
    noFill();
    stroke(154, 136, 49);
    strokeWeight(6);
    ellipse(276, 225, 77, 59); //frame left
    ellipse(392, 225, 92, 59); //frame right

    beginShape(); //Glasses connecting the Framse
        vertex (317, 220);
        vertex(330, 218);
        vertex (342, 220);
    endShape();

    stroke(49, 42, 19); //Glasses legs
    line(436, 218, 480, 210);

}

LO: Dark Souls

I find the video games in the Dark Souls franchise to be artistically inspiring. I particularly admire the third installment of the franchise, Dark Souls III. This role playing game creates a dark, foreboding atmosphere with inspiration from classical art. The architecture is based on medieval European designs and the characters are inspired from classic sci-fi literature such as H.P. Lovecraft and Braum Stoker. The world design is immersive with a non-linear progression path. In this way, each person creates their own unique experience.

The game was developed by Bandai Namco Entertainment, Inc. and FromSoftware, Inc. under the direction of Hidetaka Miyazaki, Isamu Okanu, and Yui Tanimura. Based on the release date of Dark Souls II, Dark Souls III took about two years to develop. FromSoftware has its own proprietary game engine, known to the gaming community by the unofficial name Dantelion. This engine is written in C++ and is likely an extension of the game engines developed for Dark Souls I and II. The game engine is reusable and extendable and is likely the backbone for the developer’s most recent release, Elden Ring.

The Official Launch Trailer for the game can be viewed at https://youtu.be/igzqz0d4VFE.

*Works Cited
Aikat, Kajol. “Code up: 5 Best Programming Languages for Building Games in 2021.” TechGig, TechGig, 26 Nov. 2021, https://content.techgig.com/technology-unplugged/5-best-programming -languages-for-programmers-in-2021/articleshow/87934631.cms.

“Dark Souls III.” IMDb, IMDb.com, 12 Apr. 2016, https://www.imdb.com/title/tt4795016/.

“FromSoftware, Dark Souls III.” Products | FromSoftware, Inc., https://www.fromsoftware.jp/ww/detail.html?csm=097.

“Souls Modding.” FromSoftware Game Engines – Souls Modding, http://soulsmodding.wikidot.com/topic:engines.