Category: Project-05-Wallpaper

Project-05-Wallpaper

WPHC
//Hayoon Choi
//hayoonc
//section C

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

function draw() {
    background(232, 241, 255);
    //vertical lines
    for (var x = 0; x < width - 10; x += 35){
        stroke(255);
        strokeWeight(5);
        line(x, 0, x, height);
    }
    //drawing dogs
    for (var x = 100; x < width; x += 200){
    	for (var y = 70; y < height; y += 145){
    		dog(x, y, 0.75);
    	}
    }
    //drawing reflected dogs (2nd and 4th columns)
    for (var x = 200; x < width - 190; x += 200){
    	for (var y = 140; y < height - 140; y += 145){
    		dog(x, y, 0.7, -1);
    	}
    }
}

function dog(x, y, s1 = 1, s2 = 1){
	push();
	fill(216, 154, 80);
	translate(x, y);
	scale(s1);
	scale(s2, 1); //reflecting dog
	//ears
    strokeWeight(5);
	stroke(216, 154, 80)
	strokeJoin(ROUND);
	triangle(18, -35, 19, -19, 4, -23);
	triangle(-12, -39, -5, -24, -20, -22);
	stroke(200);
	fill(200);
	triangle(15, -30, 19, -19, 4, -23);
	triangle(-12, -33, -5, -24, -20, -22);
	//fur
	stroke(216, 154, 80)
	strokeWeight(1);
	fill(216, 154, 80);
	beginShape();
	curveVertex(27, -2);
    curveVertex(27, -2);
	curveVertex(42, 5);
	curveVertex(37, 5);
	curveVertex(44,12);
	curveVertex(32, 12);
	curveVertex(29, 6);
	endShape();
	beginShape();
	curveVertex(44, 34);
    curveVertex(44, 34);
	curveVertex(47, 44);
	curveVertex(42, 42);
	curveVertex(42, 56);
	curveVertex(37, 52);
    curveVertex(37, 52);
	endShape();
	//body
	noStroke();
	ellipse(0, 0, 64, 59);
	ellipse(11, 31, 68, 72);
	ellipse(-1, 49, 80, 44);
	//legs
	ellipse(-11, 69, 12, 24);
	ellipse(-38, 59, 12, 24);
	//mouth
	strokeWeight(0.5);
	stroke(0);
	fill(200);
	arc(-10, 6, 15, 5, QUARTER_PI, PI + QUARTER_PI, OPEN)
	arc(-10, 0, 25, 10, QUARTER_PI, PI + QUARTER_PI, OPEN)
	//eyes
	fill(255);
	ellipse(3, -7, 10, 5)
	ellipse(-20, -7, 10, 5)
	fill(0);
	ellipse(3.5, -7, 7, 4)
	ellipse(-19.5, -7, 7, 4)
	//nose
	ellipse(-17, 0, 5, 3);
	pop();
}

I wanted draw my dog and show the face she makes whenever I call her name. She tries very hard to ignore me and looks at the other direction.

Project 05 – Wallpaper

sketch

function setup() {
  createCanvas(600, 600);
  background(250,233,208);
}

function draw() {

  for (let y = 0; y < 10; y++) { //setting up array for the shapes
    for (let x = 0; x < 8; x++ ) {
        push()
        translate(x*80,y*60);
        leftsrf()
        rightsrf()
    	pop()
    }
  }

}

function leftsrf() { 
  noLoop()
  var r = random(0,250);
  var g = random(0,250);
  var b = random(0,250);
  fill(r,g,b) ;
	quad(0,0,0,40,40,60,40,20);
}

function rightsrf() { 
  noLoop()
  var r = random(0,250);
  var g = random(0,250);
  var b = random(0,250);
  fill(r,g,b)
  quad(40,20,80,0,80,40,40,60)

}

PROJECT 05- WALLPAPER

sketch
//junelee
//section c
//15-104
//junelee@andrew.cmu.edu
//project-05



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

function dangoo(x,y) {

	push();
	translate(x,y);

	strokeWeight(0.3);

	fill(102,0,204); //purple
	circle(35,31.5,10); //4
	fill(255);
	circle(35,31.5,6);

	fill(255); //stripe-white
	circle(45,31.5,10); //14

	fill(0,51,204); //blue
	circle(55,31.5,10); //2
	fill(255);
	circle(55,31.5,6);

	fill(255); //stripe-white
	circle(65,31.5,10); //10
	circle(75,31.5,10); //9
	circle(40,40,10); //13

	fill(128,0,0); //red
	circle(50,40,10); //7
	fill(255);
	circle(50,40,6);

	fill(0,102,0); //green
	circle(60,40,10); //6
	fill(255);
	circle(60,40,6);

	fill(255); //stripe-white
	circle(70,40,10); //11

	fill(255,102,0); //orange
	circle(45,48.5,10); //5
	fill(255);
	circle(45,48.5,6);

	fill(0); //black
	circle(55,48.5,10); //8
	fill(255);
	circle(55,48.5,6);


	fill(200,0,0); //red
	circle(65,48.5,10); //3
	fill(255);
	circle(65,48.5,6);
	
	fill(255);
	circle(50,57,10); //15
	circle(60,57,10); //12

	fill(255,204,0); //yellow
	circle(55,65.5,10); //1
	fill(255);
	circle(55,65.5,6);


	textSize(5);
	fill(0);
	text('4',33.5,33);
	text('14',42,33);
	text('2',53.5,33);
	text('10',62,33);
	text('9',73,33);

	text('13',37,42);
	text('7',48.5,42);
	text('6',58.5,42);
	text('11',67.5,42);

	text('5',43.5,50.5);
	text('8',53.5,50.5);
	text('3',63.5,50.5);

	text('15',47,59);
	text('12',57,59);

	text('1',53.5,67.5);

	pop();
	}

function draw() {

	for (var x=1; x<5; x+=1) {
		for (var y=1; y<7; y+=1) {
			dangoo(75*x-65,75*y-55);
		}
	}

}

For the wallpaper, I wanted to make the setup of the billiard balls that are still in their placement. I then repeated this on the x and y axis by defining function dangoo().

Project 5

I really enjoyed making the avocado’s in the project and it reminded me of breakfast!

sketch 
//Aadya Bhartia
//Section A

function setup() {
    createCanvas(600, 400);
    background(256,156,155);
    //text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	var aX = 70;
	var bX = 60;
	var aY = 90;
	var bY = 60;

	for(var y =18;y<=height+20;y+=80){
		if(y == 18||y==178||y == 338){//checking for even rows 
			for(var x = 50;x<=width;x+=100){
				avo1(x,y);
			}
		}
		else{
			for(var x = 0;x<=width;x+=100){
				avo2(x,y)
			}
		}
	}
	noLoop();
}
function avo1(a,b){
	b = b+2;
	//avocado shadow 
	noStroke();
	fill(25, 68, 35, 170);
	var a1 = a+10;
	beginShape();
	curveVertex(a1,b-65);
	curveVertex(a1-10,b-63);
	curveVertex(a1-19,b-52);
	curveVertex(a1-21,b-30);
	curveVertex(a1-30,b+12);
	curveVertex(a1,b+32);
	curveVertex(a1+30,b+12);
	curveVertex(a1+21,b-30);
	curveVertex(a1+19,b-52);
	curveVertex(a1+10,b-63);
	endShape(CLOSE);
	//the green part of avocado
	stroke(25,68,35);
	strokeWeight(2);
	fill(240,255,196);
	beginShape();
	curveVertex(a,b-65);
	curveVertex(a-10,b-63);
	curveVertex(a-19,b-52);
	curveVertex(a-21,b-30);
	curveVertex(a-30,b+12);
	curveVertex(a,b+32);
	curveVertex(a+30,b+12);
	curveVertex(a+21,b-30);
	curveVertex(a+19,b-52);
	curveVertex(a+10,b-63);
	endShape(CLOSE);
	//seed
	fill(163, 107, 67);
	stroke(69,48,25);
	strokeWeight(1);
	ellipse(a,b+2,35);
	//seed highlight
	noFill();
	stroke(69,48,25);
	strokeWeight(3.5);
	arc(a+2, b+2, 20, 20, 0, HALF_PI);
}
function avo2(a,b){
	//avocado shadow - whole
	var a2 = a-6;
	noStroke();
	fill(25, 68, 35,100);
	beginShape();
	curveVertex(a2,b-50);
	curveVertex(a2-4,b-49);
	curveVertex(a2-9,b-42);
	curveVertex(a2-11,b-25);
	curveVertex(a2-18,b+5);
	curveVertex(a2,b+19);
	curveVertex(a2+18,b+5);
	curveVertex(a2+11,b-25);
	curveVertex(a2+9,b-42);
	curveVertex(a2+4,b-49);
	endShape(CLOSE);
	//Avocado as a whole 
	stroke(25,68,35);
	strokeWeight(2);
	fill(25, 68, 35);
	beginShape();
	curveVertex(a,b-50);
	curveVertex(a-4,b-49);
	curveVertex(a-9,b-42);
	curveVertex(a-11,b-25);
	curveVertex(a-18,b+5);
	curveVertex(a,b+19);
	curveVertex(a+18,b+5);
	curveVertex(a+11,b-25);
	curveVertex(a+9,b-42);
	curveVertex(a+4,b-49);
	endShape(CLOSE);
	//white specks on the avocado 
	noStroke();
	fill(255,255,255,50);
	for(var d = a-15;d<=a+20;d+=2){
		ellipse(d,random((b-30), b+30),2);
	}
}

Project 5: Wallpaper

sketchDownload
var leafSize = 40;

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

function draw() {
    background(111, 59, 72)
    for (var x = 20; x <= 400; x += 50) {
        for (var y = 20; y <= 400; y += 100) {
            push();
            leaf(x, y);
            pop();
            
        }    
    }
    for (var x = 40; x <= 400; x += 50) {
        for (var y = 80; y <= 400; y += 100) {
            push();
            secondLeaf(x, y);
            pop();
            
        }    
    }

    noLoop();
}
function leaf(x, y) {
    //decoration
    noStroke();
    fill(167, 80, 55)
    circle(x-5, y+7, leafSize-15);
    noFill();
    stroke(167, 80, 55);
    arc(x, y, 50, 50, PI/4, 5*PI/4);
    
    stroke(225);
    //left half
    arc(x, y, leafSize, leafSize, 2*PI/3, 4*PI/3, OPEN);
    //right half
    translate(-20, 0);
    arc(x, y, leafSize, leafSize, 5*PI/3, PI/3, OPEN);
    //stem
    translate(10, 0);
    triangle(x-2, y+30, x, y-5, x+2, y+30);
    line(x-5, y-5, x, y);
    line(x, y, x+5, y-5);
    line(x-5, y+5, x, y+10);
    line(x, y+10, x+5, y+5);
}

function secondLeaf(x, y) {
    //decoration
    noStroke();
    fill(207, 106, 39)
    circle(x, y-8, leafSize/2);
    noFill();
    stroke(207, 106, 39);
    arc(x, y, 50, 50, 5*PI/4, PI/4);

    stroke(225);
    //left half
    arc(x, y, leafSize/2, leafSize/2, 2*PI/3, 11*PI/6, OPEN);
    arc(x-13, y-13, leafSize/2, leafSize/2, PI/6, 2*PI/3, OPEN);
    //right half
    arc(x-10, y, leafSize/2, leafSize/2, 7*PI/6, PI/3, OPEN);
    arc(x+3, y-13, leafSize/2, leafSize/2, PI/3, 5*PI/6, OPEN);
    //stem
    translate(-5, 0);
    line(x, y, x, y-20);

}

I got the inspiration for my wallpaper from the fall season and leaves floating in the air.

Project 5: Wallpaper

When creating this wallpaper, I kept thinking of the kitschy nautical patterns you’d find plastered on the walls of seaside restaurants. I drew a lot of inspiration from cute illustrations on Pinterest that emulate this niche aesthetic.

nautical
function setup() {
    createCanvas(550, 550);
    background(220);
    bgColor = color(180, 218, 221);
    floatyColor = color(215, 53, 76);
    wheelColor = color(115, 175, 193);
}

function draw() {
    background(bgColor);

    //seashells
    for(var c = -5; c < width; c += 93) {
        for(var d = -5; d < height; d += 200) {
            push();
            translate(c, d);
            seashell();
            pop();
        }
    }

    //seashells again
    for(var e = -10; e < width; e += 95) {
        for(var f = 95; f < height; f += 190) {
            push();
            translate(e, f);
            seashell();
            pop();
        }
    }

    //wheel
    for(var x = 45; x < width; x += 190) {
        for(var y = 40; y < height; y += 200) {
            push();
            translate(x, y);
            woodenWheel();
            pop();
        }
    }

    //flotation devices
    for(var a = 5; a < width; a += 180) {
        for(var b = 0; b < height; b += 180) {
            push();
            translate(a, b);
            floaty();
            pop();
        }
    }
}

//the blue & white steering wheels
function woodenWheel() {
    fill(bgColor);
    noStroke();
    ellipse(38, 37, 45, 45);

    handles = 8; //number of handles on the steering wheels
    handleAngle = 360/handles; //angle between each handle
    radius = 75/2; //length of each handle
    strokeWeight(4);
    stroke(wheelColor);
    
    for (angle = 270; angle < 600; angle = angle + handleAngle) {
        x = cos(radians(angle)) * radius;
        y = sin(radians(angle)) * radius;
        line(radius, radius, x + radius, y + radius);
    }

    noFill();
    strokeWeight(5);
    stroke(255);
    ellipse(38, 37, 50, 50); //outer wheel
    ellipse(38, 37, 10, 10); //inner spoke
}

function floaty() {
    noFill();
    strokeWeight(20);
    stroke(255);
    ellipse(0, 0, 75, 75);

    noStroke();
    fill(floatyColor);
    arc(9, 9, 75, 75, 0, PI/2); //bottom right red
    arc(-9, 9, 75, 75, HALF_PI, PI); //bottom left red
    arc(-9, -9, 75, 75, PI, HALF_PI + PI); //top left red
    arc(9, -9, 75, 75, HALF_PI + PI, 0); //top right red

    fill(bgColor);
    ellipse(0, 0, 55, 55);
}

function seashell() {
    push();
    noStroke();
    fill(255);
    arc(0, 0, 50, 50, PI + QUARTER_PI, QUARTER_PI - HALF_PI);
    arc(0, -5, 25, 20, QUARTER_PI, PI - QUARTER_PI);
    pop();

    grooves = 4; //number of lines on seashell
    grooveAngles = 60/grooves; //angle of lines on seashell
    radius = 50/2; //length of each line
    strokeWeight(1);
    stroke(bgColor);

    translate(-25, -25);
    for (angle = 225; angle < 325; angle = angle + grooveAngles) {
        x = cos(radians(angle)) * radius;
        y = sin(radians(angle)) * radius;
        line(radius, radius, x + radius, y + radius);
    }
}

Project-05-Wallpaper

sketch
function setup() {
    createCanvas(400, 400);
    noStroke();
}
 
function draw() {
    background(0);
    scales();
    noLoop(); 
        for (var y = 10; y < height + 50; y += 50) {
          for (var x = 10; x < width + 50; x += 50) {
            fill(255);
          ellipse(x,y,15);
          }
}
}
function scales() {
      var red=100;
      for (var y = 10; y < height + 50; y += 50) {
          var blue=100;
          for (var x = 10; x < width + 50; x += 50) {
            fill(red, 0, blue);
            blue += 30
            // fill(255);
            ellipse(x,y,80);//outer rim
            // fill(176,163,248);//orange color
            ellipse(x,y,80);//inner circle
            fill(161,243,247);//tan color
            ellipse(x,y,60);//inner core
            strokeWeight(3);
            line(x,y,400,400);
        }
        red +=50;
    }
}

For this week, I wanted to create a fish scale pattern with a gradient.

Project 5: Wallpaper

sketchDownload
var s = 100
var x = 50
var y = 50
function setup() {
    createCanvas(600, 600);
    background(60, 0, 33); //mauve 4, background color
    strokeWeight(0);
    rectMode(CENTER);
}

function draw() {
	for (let r = 0; r <=5; r += 1) {
		for (let c = 0; c <= 5; c += 1) {
			tile(); //tile pattern
			y += 100;
			//s += 100;
		}
		y = 50;
		tile();
		x += 100;
	}
}

function tile() {
	push();
	translate(x, y);

	//random dots
	fill(235, 181, 211);
	circle(random(-50, 0), random(-50, 0), random(2,7));
	circle(random(0, 50), random(0, 50), random(2,7));
	fill(193, 99, 151);
	circle(random(-50, 0), random(0, 50), random(2,7));
	circle(random(0, 50), random(-50, 0), random(2,7));
	fill(120, 26, 78);
	circle(random(-50, 0), random(-50, 0), random(2,7));
	circle(random(0, 50), random(0, 50), random(2,7));

	//lines
	fill(120, 26, 78); // mauve 3
	push();
	rotate(radians(45));
	rect(0, 0, s/2 + 10, s/2 + 10);
	pop();
	push();
	fill(60, 0, 33); //mauve 4
	rotate(radians(45));
	rect(0, 0, s/2, s/2);
	pop();

	//circles
	fill(120, 26, 78); // mauve 3
	circle(-25, -25, 30);
	circle(25, -25, 30);
	circle(25, 25, 30);
	circle(-25, 25, 30);

	fill(60, 0, 33); //mauve 4
	circle(-25, -25, 20);
	circle(25, -25, 20);
	circle(25, 25, 20);
	circle(-25, 25, 20);

	//flower
	fill(193, 99, 151); //mauve 2
	push();
	for(let x=0; x < 8; x += 1) {
		ellipse(10, 10, s/2, 10);
		rotate(radians(45));
	}
	pop();

	//inner flower
	push();
	fill(235, 181, 222); //mauve 1
	for(let x=0; x < 8; x += 1) {
		ellipse(5, 2, s/2, 10);
		rotate(radians(45));
	}
	pop();

	//flower center
	fill(193, 99, 151); //mauve 2
	circle(0, 0, 15);

	pop();

}

I drew inspiration from my sketch. However, I decided to add more flower patterns in my code than the flower petals in my original sketch.

Rough draft for pattern.

Project-05-Wallpaper

sketch
var s=10;
var col=0;
var row=0;
function setup() {
    createCanvas(600, 600);
    background(217,215,217);
}

function draw() {
	var gap=3*s;
	var xStart=gap+3;
	//background grid
	for(var y=0; y<=600;y+=gap){
       

		for(var x=xStart;x<=600;x+=2*s*sqrt(3)){
			
			
			fill(221,211,201);
			pattern1(x,y);
			col+=1;
			//if(col%5==0&row%7==0){
				//print(x.toString()+","+y.toString());
			//}
			if(col%3==0&row%9==0){
				print(x.toString()+","+y.toString());
			}

		}
		
		if(row%2==1){
        	xStart+=s*sqrt(3);
        	
        	row+=1;

        }

        else{
        	
        	xStart-=s*sqrt(3);
        	row+=1;
        }
        
	}
	//red flower
    fill(202,65,36);
	pattern1(344.7691453623978,30);
	pattern1(517.9742261192855,0);
	pattern1(67.64101615137754,420);
	pattern1(188.88457268119896,210);
	pattern1(67.64101615137754,420);
	pattern1(414.05117766515286,540);
	pattern1(587.2562584220407,120);
	pattern1(362.0896534380866,270);
	//blue triangle
    fill(26,25,58);
    pattern2(310.1281292110203,480);
    pattern2(517.9742261192855,60);
    pattern2(84.96152422706632,270);
    pattern2(292.80762113533154,90);
    pattern2(517.9742261192855,510);

	noLoop();
	
}

function pattern2(x,y){
    push();
    stroke(239,237,231);
    strokeWeight(1);
    translate(x,y);
    var u=s*sqrt(3);
    triangle(0,0,u,2*u-4,0,2*s);
    triangle(0,2*s,u,2*u-4,-u,2*u-4);
    triangle(0,0,0,2*s,-u,2*u-4);
    pop();
}
function pattern1(x,y){
    push();
    stroke(239,237,231);
    strokeWeight(1);
    translate(x,y);
    //define unit
    var u=s*sqrt(3);

    triangle(0,0,-2*u,0,-u,-s);
    triangle(0,0,-u,-s,-u,-2*u+4);
    triangle(0,0,-u,-2*u+4,0,-2*s);
    triangle(0,0,0,-2*s,u,-2*u+4);
    triangle(0,0,u,-2*u+4,u,-s);
    triangle(0,0,u,-s,2*u,0);
    triangle(0,0,2*u,0,u,s);
    triangle(0,0,u,s,u,2*u-4);
    triangle(0,0,u,2*u-4,0,2*s);
    triangle(0,0,0,2*s,-u,2*u-4);
    triangle(0,0,-u,2*u-4,-u,s);
    triangle(0,0,-u,s,-2*u,0);
  
   pop();

}

I was inspired by traditional Japanese style “和風(わふう)” patterns. Below are some screenshots of my process in illustrator:

compositions
geometry of individual shape

Project 05 – Wallpaper

Too much Among Us was played in the making of this wallpaper.

Cyan sus.

sketch
/*
 *Eric Zhao
 *ezhao2@andrew.cmu.edu
 *
 *Draws a wallpaper consisting of a "3D lattice"
 *and Among Us sprites.
 */

var w = 50; //pillar length and height
var s = 10; //pillar width
var pillarHue = 101;
var pillarLight = 75;
var pillarDark = 25;

function setup() {
    colorMode(HSB);
    createCanvas(600, 600);
    background(16, 34, 93);

}

function draw() {
    //draws the lattice of pillars
    for(let i = 0; i < 12; i++){
        for(let j = 0; j < 12; j++){
            if((i+j) % 2 == 0){
                pillar2(i*w, j*w, s, w, pillarHue, pillarLight, pillarDark);
            } else{
                pillar(i*w, j*w, s, w, pillarHue, pillarLight, pillarDark);
            }
        }
    }
    //draws the Among Us sprites on rows with odd numbers of spaces
    for(let i = 0; i < height; i += 2*w){
        push();
        translate(0, i);
        for(let j = 0; j < width-w; j += 2*w){
            push();
            translate(j + w/2, w/2);
            scale(0.45);
            amongUs();
            pop();
        }
        pop();
    }
    translate(w, w);
    //draws the Among Us sprites on rows with even numbers of spaces
    for(let i = 0; i < height-2*w; i += 2*w){
        push();
        translate(0, i);
        for(let j = 0; j < width-2*w; j += 2*w){
            push();
            translate(j + w/2, w/2);
            scale(0.45);
            amongUs();
            pop();
        }
        pop();
    }
    //shh, here's the impostor!
    translate(width/3+15, height/3-2);
    scale(0.2);
    knife();
    noLoop();
}

function pillar(x, y, s, w, hue, light, shadow){
    //pillar function drawing a lattice element top left to bottom right
    fill(hue, 40, shadow);
    quad(x, y, x+s, y, x+w, y+w-s, w+x, w+y);
    fill(hue, 40, light);
    quad(x, y, w+x, w+y, w-s+x, w+y, x, s+y);

}

function pillar2(x, y, s, w, hue, light, shadow){
    //pillar function drawing a lattice element bot left to top right
    fill(hue, 40, shadow);
    quad(x, y+w, x+w, y, x+w, y+s, x+s, y+w);
    fill(hue, 40, light);
    quad(x, y+w, x, y+w-s, x+w-s, y, x+w, y);
}

function amongUs(){
    //creates an Among Us sprite lookalike
    push();
    noStroke();
    fill(50);
    ellipse(53, 94, 70, 15); //shadow
    backpack();
    body();
    visor();
    pop();
}
function body(){
    //Among Us sprite body
    //body base color
    noStroke();
    fill(187, 100, 76);
    beginShape();
    curveVertex(59, 76);
    curveVertex(59, 76);
    curveVertex(62, 88);
    curveVertex(75, 88);
    curveVertex(78, 74);
    curveVertex(81, 55);
    curveVertex(79, 38);
    curveVertex(69, 7);
    curveVertex(38, 7);
    curveVertex(28, 48);
    curveVertex(32, 91);
    curveVertex(50, 91);
    curveVertex(52, 76);
    curveVertex(59, 76);
    curveVertex(59, 76);
    endShape();

    //body highlight color
    fill(172, 56, 80);
    beginShape();
    curveVertex(45, 62);
    curveVertex(45, 62);
    curveVertex(70, 63);
    curveVertex(79, 38);
    curveVertex(69, 7);
    curveVertex(45, 4);
    curveVertex(36, 32);
    curveVertex(39, 54);
    curveVertex(45, 62);
    curveVertex(45, 62);
    endShape();

    //outline
    stroke(0);
    strokeWeight(6);
    noFill();
    beginShape();
    curveVertex(59, 76);
    curveVertex(59, 76);
    curveVertex(62, 88);
    curveVertex(75, 88);
    curveVertex(78, 74);
    curveVertex(81, 55);
    curveVertex(79, 38);
    curveVertex(69, 7);
    curveVertex(38, 7);
    curveVertex(28, 48);
    curveVertex(32, 91);
    curveVertex(50, 91);
    curveVertex(52, 76);
    curveVertex(59, 76);
    curveVertex(59, 76);
    endShape();
}

function backpack(){
    //Among Us backpack (body colored)
    noStroke();
    //backpack base color
    fill(187, 100, 76);
    beginShape();
    curveVertex(33, 27);
    curveVertex(33, 27);
    curveVertex(19, 31);
    curveVertex(17, 69);
    curveVertex(30, 72);
    curveVertex(30, 72);
    endShape();

    //backpack highlight
    fill(172, 56, 80);
    beginShape();
    curveVertex(33, 27);
    curveVertex(33, 27);
    curveVertex(19, 28);
    curveVertex(18, 39);
    curveVertex(33, 36);
    curveVertex(33, 36);
    endShape();

    strokeWeight(6);
    noFill();

    //outline
    stroke(0);
    strokeWeight(6);
    noFill();
    beginShape();
    curveVertex(33, 27);
    curveVertex(33, 27);
    curveVertex(19, 31);
    curveVertex(17, 69);
    curveVertex(30, 72);
    curveVertex(30, 72);
    endShape();
}
function visor(){
    //Among Us visor section
    strokeWeight(6);
    noStroke();
    fill(193, 38, 43);
    ellipse(64, 28, 35, 25);
    fill(196, 36, 87);
    ellipse(67, 24, 25, 18);
    fill(0, 0, 100);
    ellipse(68, 24, 15, 5);
    //outline
    stroke(0);
    noFill();
    ellipse(64, 28, 35, 25);
}

function knife() {
    //for the killer only...
    strokeWeight(2);
    fill(0, 0, 37);
    rect(0, 0, 15, 30);
    fill(11, 67, 51);
    rect(-10, 30, 35, 15);
    fill(0, 0, 50);
    triangle(-5, 45, 7.5, 100, 20, 45);
    noStroke();
    fill(0, 0, 85);
    triangle(7.5, 45, 7.5, 100, -5, 45);
    noFill();
    stroke(0);
    triangle(-5, 45, 7.5, 100, 20, 45);
    noLoop();
}