body {
  padding: 0;
  margin: 0;
  display: flex;

  justify-content: center;

  align-items: center;
  background-color: #e4d3d2;
}
// "HOT DOG" IN DIFFERENT LANGUAGE ON REFRESH


var words = ["HOT DOG", "WORSTJES", "CALDO CANE", "热狗", "PANCHO", "نقانق", "Հոթդոգ", "হট ডগ", "хот дог", "ဟော့ဒေါ့", "ჰოთდოგი", "ΛΟΥΚΆΝΙΚΟ", "PYLSA", "핫도그", "ホットドッグ", "VARMKORV", "ฮอทดอก"];
var title;

var value = 231;

function setup() {
	createCanvas(600,600);
	title = random(words);
}

function draw() {
	background(value, 210, 210);
	hotDogCart();
}

function hotDogCart() {
  cart();
	backWheel();
	frontWheel();
	canopy();
	sign();
	hotDog();
	ketchupBottle();
	mustardBottle();
	mayoBottle();
	lid();
}

// function mouseMoved() {
// 	value--;
// 	if (value < 195) {
// 		value = 231;
// 	}
// }



function cart() {

	var red = color(156, 27, 15);

	// cart handle rod
	push();
	translate(420, 324);
	rotate(radians(-15));
	fill(40, 40, 40);
	noStroke();
	rect(0, 0, 75, 6);
	pop();

	// cart handle 
	fill(129, 68, 50);
	noStroke();
	rect(470, 300, 48, 10, 10);

	// poles
	strokeWeight(10);
	stroke(40, 40, 40);
	noFill();
	rect(145, 195, 260, 120);


	// cart table
	fill(94, 52, 38);
	noStroke();
	rect(120, 310, 310, 15);

	// cart table shadow
	fill(70, 40, 29);
	noStroke();
	rect(120, 325, 310, 5);

	// cart body
	fill(red);
	noStroke();
	rect(130, 330, 290, 130);

	// cart body shadow
	fill(129, 22, 12);
	noStroke();
	rect(130, 330, 290, 10);

	// cart bottom
	fill(40, 40, 40);
	noStroke();
	rect(135, 460, 280, 10);

	// cart bottom shadow
	fill(61, 61, 61);
	noStroke();
	rect(135, 466, 280, 4);
}

function backWheel() {
	// back wheel spokes
	push();
	translate(395, 480);
	rotate(frameCount / -100);
	noStroke();
	for (i = 0; i < 8; i++) {
		rect(-3, 0, 8, 70);
		rotate(PI / 4);
	}
	// back wheel
	strokeWeight(12);
	stroke(40, 40, 40);
	noFill();
	ellipse(0, 0, 130, 130);
	pop();
}

function frontWheel() {
	// wheel leg
	fill(40, 40, 40);
	noStroke();
	triangle(165, 470, 190, 470, 135, 520);

	// front wheel spokes
	push();
	translate(140, 515);
	rotate(frameCount / -100);
	noStroke();
	for (i = 0; i < 8; i++) {
		rect(-2, 0, 4, 30);
		rotate(PI / 4);
	}
	// front wheel
	strokeWeight(6);
	stroke(40, 40, 40);
	noFill();
	ellipse(0, 0, 60, 60);
	pop();
}

function canopy() {
	// canopy
	fill(255, 237, 201);
	quad(140, 140, 410, 140, 455, 215, 95, 215);

	// canopy stripes
	fill(156, 27, 15);
	noStroke();
	quad(140, 140, 160, 140, 125, 215, 95, 215);
	quad(185, 140, 210, 140, 190, 215, 160, 215);
	quad(235, 140, 255, 140, 255, 215, 225, 215);
	quad(285, 140, 305, 140, 325, 215, 295, 215);
	quad(335, 140, 360, 140, 390, 215, 360, 215);
	quad(390, 140, 410, 140, 455, 215, 425, 215);

	// canopy drape
	fill(135, 21, 12);
	noStroke();
	arc(110, 215, 30, 25, 0, PI);
	arc(175, 215, 30, 25, 0, PI);
	arc(240, 215, 30, 25, 0, PI);
	arc(310, 215, 30, 25, 0, PI);
	arc(375, 215, 30, 25, 0, PI);
	arc(440, 215, 30, 25, 0, PI);
	fill(222, 197, 150);
	noStroke();
	arc(143, 215, 35, 25, 0, PI);
	arc(208, 215, 35, 25, 0, PI);
	arc(275, 215, 40, 25, 0, PI);
	arc(343, 215, 35, 25, 0, PI);
	arc(408, 215, 35, 25, 0, PI);
}

function sign() {
	// sign
	fill(223, 179, 25);
	rect(148, 140, 254, 5);
	fill(252, 205, 31);
	rect(140, 75, 270, 65);
	stroke(227, 177, 1);
	strokeWeight(4);
	fill(255, 227, 126);
	rect(147, 82, 255, 50);

	// sign text
	var textColor = color(155, 11, 28);
	stroke(241, 192, 30);
	fill(textColor);
	textSize(32);
	textAlign(CENTER);
	text(title, 275, 118);
	textFont("Georgia");
}

function hotDog() {
	// hot dog back bun
	push();
	rotate(radians(-20));
	stroke(254, 161, 2);
	fill(204, 35, 19);
	strokeWeight(6);
	rect(25, 440, 160, 40, 20);
	pop();

	// hot dog
	push();
	rotate(radians(-19));
	noStroke();
	fill(174, 71, 58);
	strokeWeight(6);
	rect(32, 445, 170, 30, 15);
	pop();

	// hot dog mustard
	push();
	translate(280, 338);
	noFill();
	stroke(241, 213, 121);
	bezier(45, 30, 20, 20, 30, 60, 0, 45);
	pop();

	push();
	translate(235, 353);
	noFill();
	stroke(241, 213, 121);
	bezier(45, 30, 30, 20, 30, 50, 0, 45);
	pop();

	push();
	translate(190, 368);
	noFill();
	stroke(241, 213, 121);
	bezier(45, 30, 20, 20, 30, 60, 0, 45);
	pop();

	// hot dog back front
	push();
	fill(235, 140, 33);
	noStroke();
	rotate(radians(-13));
	rect(82, 445, 165, 35, 30);
	pop();
}

function ketchupBottle() {
	// ketchup bottle
	fill(177, 31, 17);
	noStroke();
	rect(160, 265, 25, 45, 5);
	stroke(216, 38, 21);
	line(165, 273, 165, 303);
	noStroke();
	fill(154, 25, 13);
	rect(162, 260, 20, 5);
	fill(200, 36, 21);
	triangle(169, 260, 172, 250, 175, 260);
}

function mustardBottle() {
	// mustard bottle
	fill(225, 157, 51);
	noStroke();
	rect(195, 265, 25, 45, 5);
	stroke(241, 179, 85);
	line(200, 273, 200, 303);
	noStroke();
	fill(219, 148, 37);
	rect(197, 260, 20, 5);
	fill(251, 185, 76);
	triangle(204, 260, 207, 250, 210, 260);
}

function mayoBottle() {
	// mayo bottle
	fill(255, 235, 169);
	noStroke();
	rect(230, 265, 25, 45, 5);
	stroke(255, 248, 228);
	line(235, 273, 235, 303);
	noStroke();
	fill(248, 227, 163);
	rect(232, 260, 20, 5);
	fill(254, 244, 204);
	triangle(239, 260, 242, 250, 245, 260);
}

function lid() {
	// lid
	stroke(137, 137, 142);
	strokeWeight(5);
	noFill();
	rect(315, 292, 30, 15, 8);
	stroke(178, 180, 180);
	strokeWeight(10);
	strokeCap(SQUARE);
	line(280, 305, 380, 305);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.