Category: Uncategorized

project1-self portrait

sketch

    function setup() {
    createCanvas(1920,1080)
}


function draw() {
    background(0);
    fill(20);
    ellipse(600,400,500,300)
    ellipse(1320,400,500,300)
    fill(40)
    ellipse(600,400,400,290)
    ellipse(1320,400,400,290)
    fill(70)
    ellipse(600,400,300,280)
    ellipse(1320,400,300,280)
    fill(110)
    ellipse(600,400,250,270)
    ellipse(1320,400,250,270)
    fill(140)
    ellipse(600,400,150,260)
    ellipse(1320,400,150,260)
    fill(240)
    ellipse(600,400,90,260)
    ellipse(1320,400,90,260)

    fill(30)
    ellipse(960,690,50,100)
    fill(60)
    ellipse(960,800,200,50) 

    
    var y = 260
    var dir = 1
    var speed = 50 
    function draw () {
        fill (0)
        ellipse(600, y, 30,30)
        ellipse(1320, y, 30,30)
        y += dir * speed
        if (y<200) {
            dir= -dir
        }
        if (y>600) {
            dir= -dir
        }
    }
    
}

most challenging is calculate the position

project 1: my self-portrait

efleisch project
/*Eliana Fleischer
    efleisch
    Section E
*/

function setup() {
    createCanvas(500, 500);
    background(240, 146, 243);
    //used a RGB color chart to find the color code for a purple bakcground
 
}

function draw() {
    //these lines were a way to add more elements to my assignemnt and also experiment using the "color" command in the code
    // i put all the starting points as the same so it would make a light refraction-esque shape
    strokeWeight(10)
    stroke("red")
    line(width/2,height/3,500,height/3)
    stroke("orange")
    line(width/2,height/3,500,height/3+10)
    stroke("yellow")
    line(width/2,height/3,500,height/3+20)
    stroke("green")
    line(width/2,height/3,500,height/3+30)
    stroke("blue")
    line(width/2,height/3,500,height/3+40)
    stroke("purple")
    line(width/2,height/3,500,height/3+50)
   

    strokeWeight(1)
    stroke(0)
    //this is the fill I am using for my skin tone. I used the same RGB generator for it as with the purple background
    fill(164,127,73)
    
    // i used the starting point of width/2 and height/3 and based all of my measurments off of that scale
    ellipse(width/3 -25, height/3, 20, 30) // these are the ellipses for my ears. i put it first so it would be drawn behind the head
    ellipse(width/3 + 75, height/3, 20, 30)
    ellipse(width/3 +25, height/3, 100, 125) // head
    circle(width/3 -25, height/2 +80, 25) // these are the hands 
    circle(width/3 +75, height/2 +80, 25)

    fill(255)// this is the white fill for my eyes

    ellipse(width/3, height/3, 24,32)
    ellipse(width/3 + 50, height/3, 24, 32)

    fill(62,32,9) // this is the brown for the center of my eyes 

    circle(width/3, height/3, 16) //center of eyes
    circle(width/3 + 50, height/3, 16)

    fill(0)

    triangle(width/3 + 25, height/3 + 25, width/3 +13, height/3 + 37, width/3 + 37, height/3 + 37) //mouth

    fill(255)
    triangle(width/3 + 25, height/3 + 25, width/3 + 20, height/3 + 32, width/3 + 30, height/3 + 32) //teeth

    strokeWeight(3) // i wanted my hair to be drawn bolder so i increased the stroke weight

    fill(0)
/* these points I used to plan out my quadrilaterals but I dont need them for the final product
    point(width/3 + 25, height/3 - 65)
    point(width/3 - 15, height/3 - 55)
    point(width/3 , height/3 - 50)
    point(width/3 - 25 , height/3 - 10)

*/ 

    quad(width/3 + 25, height/3 - 65, width/3 - 15, height/3 - 55, width/3 - 25 , height/3 , width/3 , height/3 - 50)// hair
    quad(width/3 + 25, height/3 - 65, width/3 + 40, height/3 - 55, width/3 + 75 , height/3 , width/3 +75 , height/3 - 50)


    strokeWeight(7) // i decided to use points instead of small circles to utilize a different element 
    point(width/3, height/3 ) // pupils 
    point(width/3 +50, height/3 )

    strokeWeight(1) // decreased stroke weight again for drawing the body
    rect(width/3 -25, height/2 -20, 100, 100) // body
    rect(width/3 -40, height/2 +5, 15, 75) // arms
    rect(width/3 +75, height/2 +5, 15, 75)
    fill(0, 102, 0) // green for pants
    rect(width/3 - 25, height/2 +80, 45, 100) //pants
    rect(width/3 +30, height/2 +80, 45, 100)


}

I think the most challenging part of my project was centering all of my objects relative to each other.

project 1: self-portrait

m’s project 1
/*m. tayao
    atayao
    lab section E
*/

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

function draw() {
// BACKGROUND CHANGE
if (mouseX > width/2) {
    background(145, 176, 255);    // light blue bg
    fill(208, 230, 112);    // "O"
    rect(width/2 - 50, height/2 - 200, 35, 55);
    rect(width/2 - 40, height/2 - 190, 25, 45);
    fill(145, 176, 255);
    rect(width/2 - 40, height/2 - 190, 15, 35);
    fill(208, 230, 112);    // "H"
    rect(width/2 - 5, height/2 - 200, 10, 55);
    rect(width/2 + 25, height/2 - 200, 10, 55);
    rect(width/2, height/2 - 175, 30, 10);
    rect(width/2 + 45, height/2 - 200, 10, 40);    // "!"
    rect(width/2 + 45, height/2 - 155, 10, 10);
} else {
    background(208, 230, 112);
    }
// SELF-PORTRAIT
noStroke();
fill(64, 48, 27);    // hair
ellipse(width/2 - 55, height/2 - 60, 75);
ellipse(width/2 + 25, height/2 - 50, 135);
rect(width/2 - 92.5, height/2 - 60, 184.75, 200);
fill(214, 161, 96);    // head
ellipse(width/2, height/2 + 15, 150, 165);
fill(89, 55, 12);    // eyebrows
ellipse(width/2 - 25, height/2 + 7, 25, 10);
ellipse(width/2 + 25, height/2 + 7, 25, 10);
fill(242, 236, 228);    // whites of eyes
ellipse(width/2 - 30, height/2 + 35, 45, 30);
ellipse(width/2 + 30, height/2 + 35, 45, 30);
fill(125, 81, 0);    // irises
ellipse(width/2 - 30, height/2 + 35, 20);
ellipse(width/2 + 30, height/2 + 35, 20);
fill(64, 44, 15);    // pupils
circle(width/2 - 30, height/2 + 35, 10);
circle(width/2 + 30, height/2 + 35, 10);
fill(181, 129, 65);    // nose
ellipse(width/2 - 5, height/2 + 70, 7);
ellipse(width/2 + 5, height/2 + 70, 7);
fill(237, 115, 90);    // cheeks
ellipse(width/2 - 45, height/2 + 65, 40, 20);
ellipse(width/2 + 45, height/2 + 65, 40, 20);
fill(191, 69, 131);    // mouth
ellipse(width/2, height/2 + 85, 20, 10);
fill(242, 236, 228);    // teef
ellipse(width/2, height/2 + 82, 13, 5);
}

Project 1: My self-portrait

sketch
sketch
function setup(){
    createCanvas(500,300);
    background(221,236,240);
}

function draw(){
    noStroke();
    fill(125,158,166);
    ellipse(40,60,180,90);
    ellipse(450,200,180,90);
    stroke(23,20,49);
    strokeWeight(20);
    line(0,200,500,100);
    line(0,150,500,200);
    noStroke();
    fill(208,187,164);
    rect(230,180,40,40);//rectangle of the neck
    fill(131,142,189);
    triangle(100,240,230,200,270,240);
    triangle(400,240,270,200,230,240);
    rect(100,240,300,60);
    fill(235,210,173);
    ellipse(250,110,120,160);//head ellipse
    fill(210,152,138);
    beginShape();
    vertex(235,168);
    vertex(245,162);
    vertex(250,165);
    vertex(255,162);
    vertex(265,168);
    vertex(255,175);
    vertex(245,175);
    endShape();
    fill(113,96,79);
    beginShape();
    vertex(185,80);
    vertex(180,120);
    vertex(200,100);
    vertex(210,110);
    vertex(220,95);
    vertex(240,110);
    vertex(260,100);
    vertex(280,125);
    vertex(290,100);
    vertex(295,115);
    vertex(305,100);
    vertex(320,120);
    vertex(310,80);
    endShape();//hair
    fill(50);
    ellipse(250,70,200,40);
    fill(20);
    ellipse(250,60,120,20);
    rect(190,10,120,50);
    ellipse(250,10,120,20);
    fill(190);
    rect(180,110,140,35);
    fill(147,141,140);
    beginShape();
    vertex(300,110);
    vertex(305,110);
    vertex(298,145);
    vertex(290,145);
    endShape();
    beginShape();
    vertex(310,110);
    vertex(312,110);
    vertex(310,145);
    vertex(305,145);
    endShape();
    fill(255);
    beginShape();
    vertex(316,110);
    vertex(318,110);
    vertex(315,145);
    vertex(312,145);
    endShape();
    beginShape();
    vertex(185,110);
    vertex(190,110);
    vertex(187,145);
    vertex(183,145);
    endShape();
    stroke(0);
    strokeWeight(4);
    line(230,120,230,135); 
    line(270,120,270,135);
    noStroke();
    fill(235,210,173);
    triangle(250,140,240,145,260,145);   
    fill(220,227,146);
    ellipse(140,270,30);
    ellipse(290,260,20);
    fill(190,145,192);
    ellipse(220,250,20);
    fill(225,168,39);
    ellipse(350,280,30);
    fill(148,209,205);
    ellipse(300,220,15);



}

I found that creating an irregular shape is very challenging, and also I need to calculate a lot of the positions and locations.

LO: My Inspiration

The project I’d like to talk about is Supergiant Games’ Hades, a video game where you play as Zagreus, Prince of the Underworld, on a quest to battle his way out of the Underworld and meet his mother. It was named the 2020 Game of the Year, and is a rogue-like dungeon crawler meaning principally 2 things: 1. Progress is reset when you die, 2. Each run is different because the sequence of rooms you go through is randomized.

Rogue-likes are notorious for being mechanically difficult and requiring alot of repetition to master and ultimately enjoy. Despite this, Supergiant managed to implement a rather sophisticated and intricate dialogue tier system a involving a cast of 29 characters and 20000 unique lines of voiced dialogue. The integrated storytelling, beautiful art style, atmospheric soundtrack, combined with the baseline permanent progression and customizable build systems, bolster the games’ replayability such that even 2 years later people are still playing and producing content centered around Hades’.


The development time for Hades was 3 years, which is standard for the video game industry. Supergiant is a small independent indie game company based in San Francisco, comprised of around 20 people.

The thing that is astounding about the Supergiant team is that they do not ‘crunch’, or undergo compulsory overtime during game development, which is another industry standard. Their approach to project management and internal team relations are well planned out, flexible and healthy, resulting in a high employee retention rate, which is incredibly rare.

Almost all notable assets are either custom or created in-house, from the art to the music to even the game engine which is based on the Microsoft XNA framework, written in C# and was rewritten for better game performance and cross platform support during the development of Hades.


Hades is described as “a reaction to Pyre, which was a reaction to Transistor, which was a reaction to Bastion”, all of which are the studio’s previous games and inform different aspects of the game, from overall workflow and anti-burnout failsafes, to the top-down isometric camera position, to the idea of continuing narration and story across multiple attempts, to offering different abilities.

Given the way the team approaches games and game design, the next game Supergiant will release will develop on the themes, mechanics and storytelling devices explored in Hades and their previous projects, such as dungeon-crawlers and procedural room generation, or non-linear storytelling. Which one exactly that will be, is difficult to say, as Supergiant have yet to release any details on their blog.

Authors: Supergiant Games (Amir Rao, Gavin Simon, Darren Korb, Jen Zee, Greg Kasavin, Andrew Wang, Logan Cunningham, Josh Barnett, John-Paul Gabler, Dexter Friedman, Eduardo Gorinstein, Alice Lai, Joanne Tran, Caitlin Sales, Will Turnbull, Nikola Sobajic, Devansh Maheshwari, James Auck, Allison Rassmann, Ellis Powell, Morgane Malville, Craig Harris)

References:
https://www.supergiantgames.com/blog/hades-faq
https://gamerant.com/hades-developer-infographic-dialogue-breakdown/https://kotaku.com/the-secret-to-the-success-of-bastion-pyre-and-hades-1838082618
https://gamerant.com/hades-developer-supergiant-games-upcoming-projects-long-wait/
https://kotaku.com/the-secret-to-the-success-of-bastion-pyre-and-hades-1838082618

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

function draw() {
	background(204);
	ellipse(50, 50, 80, 80);
}
sketchDownload
function setup() {
    createCanvas(300, 300);
    background(220);
//    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	if (mouseX < width / 2) {    // left side
		if (mouseY < height / 2) {     // top half
			background(255, 0, 0);
		}
		else {   // bottom half
			background(0, 255, 0);
		}
	}
	else {   // right side
		if (mouseY < height / 2) {  // top half
			background(0, 0, 255);
		}
		else {	// bottom half
			background(0, 0, 0);
		}
	}
}

Test Post

Here is a simple program.

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

function draw() {
	if (mouseX < width / 2) {    // left side
		if (mouseY < height / 2) {     // top half
			background(255, 0, 0);
		}
		else {   // bottom half
			background(0, 255, 0);
		}
	}
	else {   // right side
		if (mouseY < height / 2) {  // top half
			background(0, 0, 255);
		}
		else {	// bottom half
			background(0, 0, 0);
		}
	}
}