0xch4z · September 13, 2024 02:24
diff --git a/bruh.html b/bruh.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>charbar</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
 			
 				#banner {
 					position: absolute;
 					align-content: center;
 					height: 100vh;
 					width: 100vw;
 					font-size: 2rem;
 					color: pink;
 					font-family: helvetica new;
 					font-weight: 600;
 					text-align: center;
 				}
    </style>
 </head>
 <body>
 	<span id="banner">charbar loves hoagie</span>
 <script>
 let sandwiches = [];
 let numSandwiches = 10;

 function setup() {
    createCanvas(windowWidth, windowHeight);
    for (let i = 0; i < numSandwiches; i++) {
        sandwiches.push(new Hoagie(random(width), random(height), random(1, 3)));
    }
 }

 function draw() {
    background(220, 240, 255);
    for (let hoagie of sandwiches) {
        hoagie.move();
        hoagie.display();
    }
 }

 function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
 }

 class Hoagie {
    constructor(x, y, speed) {
        this.x = x;
        this.y = y;
        this.speed = speed;
        this.direction = createVector(random(-1, 1), random(-1, 1));
        this.size = 100;
    }

    move() {
        this.x += this.direction.x * this.speed;
        this.y += this.direction.y * this.speed;

        // Bounce off edges
        if (this.x > width || this.x < 0) {
            this.direction.x *= -1;
        }
        if (this.y > height || this.y < 0) {
            this.direction.y *= -1;
        }
    }

    display() {
        let sandwichWidth = this.size + random(10, 20); // Adjust the width based on contents

        // bread
        fill(220, 180, 120); // Light brown for the bread
        beginShape();
        vertex(this.x - sandwichWidth / 2, this.y + 10); // Bottom left of bread
        bezierVertex(this.x - sandwichWidth / 2 + 10, this.y + 30, this.x + sandwichWidth / 2 - 10, this.y + 30, this.x + sandwichWidth / 2, this.y + 10); // Rounded bottom
        vertex(this.x + sandwichWidth / 2, this.y - 30); // Top right of bread
        bezierVertex(this.x + sandwichWidth / 2 - 10, this.y - 50, this.x - sandwichWidth / 2 + 10, this.y - 50, this.x - sandwichWidth / 2, this.y - 30); // Rounded top
        endShape(CLOSE);

        // lettuce
        fill(0, 255, 0); // Lettuce color
        beginShape();
        for (let i = 0; i < sandwichWidth; i += 10) {
            let yOffset = random(-5, 5);
            vertex(this.x - sandwichWidth / 2 + i, this.y + yOffset); // Random y-offset for ripple effect
        }
        endShape(CLOSE);

        // cheese
        fill(255, 200, 0); // Cheese color
        for (let i = 0; i < 3; i++) {
            push();
            translate(this.x + random(-30, 30), this.y - 10 + random(-5, 5)); // Random position for each cheese slice
            rotate(random(-PI / 6, PI / 6)); // Random rotation
            rect(0, 0, 30, 10); // Cheese slice
            pop();
        }

        // meat
        fill(255, 150, 50); // Meat color
        beginShape();
        for (let i = 0; i < sandwichWidth; i += 15) {
            let yOffset = random(-10, 10);
            vertex(this.x - sandwichWidth / 2 + i, this.y - 15 + yOffset); // Random y-offset for irregular meat shape
        }
        endShape(CLOSE);

        // tomato
        fill(255, 0, 0); // Tomato color
        ellipse(this.x - sandwichWidth / 4, this.y - 20, 25, 15);
        ellipse(this.x + sandwichWidth / 4, this.y - 20, 25, 15);

        // seeds
        fill(255);
        ellipse(this.x - sandwichWidth / 4, this.y - 35, 5, 2);
        ellipse(this.x, this.y - 35, 5, 2);
        ellipse(this.x + sandwichWidth / 4, this.y - 35, 5, 2);
    }
 }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>charbar</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
	<style>
	body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	}

	#banner {
	position: absolute;
	align-content: center;
	height: 100vh;
	width: 100vw;
	font-size: 2rem;
	color: pink;
	font-family: helvetica new;
	font-weight: 600;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<span id="banner">charbar loves hoagie</span>
	<script>
	let sandwiches = [];
	let numSandwiches = 10;

	function setup() {
	createCanvas(windowWidth, windowHeight);
	for (let i = 0; i < numSandwiches; i++) {
	sandwiches.push(new Hoagie(random(width), random(height), random(1, 3)));
	}
	}

	function draw() {
	background(220, 240, 255);
	for (let hoagie of sandwiches) {
	hoagie.move();
	hoagie.display();
	}
	}

	function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
	}

	class Hoagie {
	constructor(x, y, speed) {
	this.x = x;
	this.y = y;
	this.speed = speed;
	this.direction = createVector(random(-1, 1), random(-1, 1));
	this.size = 100;
	}

	move() {
	this.x += this.direction.x * this.speed;
	this.y += this.direction.y * this.speed;

	// Bounce off edges
	if (this.x > width \|\| this.x < 0) {
	this.direction.x *= -1;
	}
	if (this.y > height \|\| this.y < 0) {
	this.direction.y *= -1;
	}
	}

	display() {
	let sandwichWidth = this.size + random(10, 20); // Adjust the width based on contents

	// bread
	fill(220, 180, 120); // Light brown for the bread
	beginShape();
	vertex(this.x - sandwichWidth / 2, this.y + 10); // Bottom left of bread
	bezierVertex(this.x - sandwichWidth / 2 + 10, this.y + 30, this.x + sandwichWidth / 2 - 10, this.y + 30, this.x + sandwichWidth / 2, this.y + 10); // Rounded bottom
	vertex(this.x + sandwichWidth / 2, this.y - 30); // Top right of bread
	bezierVertex(this.x + sandwichWidth / 2 - 10, this.y - 50, this.x - sandwichWidth / 2 + 10, this.y - 50, this.x - sandwichWidth / 2, this.y - 30); // Rounded top
	endShape(CLOSE);

	// lettuce
	fill(0, 255, 0); // Lettuce color
	beginShape();
	for (let i = 0; i < sandwichWidth; i += 10) {
	let yOffset = random(-5, 5);
	vertex(this.x - sandwichWidth / 2 + i, this.y + yOffset); // Random y-offset for ripple effect
	}
	endShape(CLOSE);

	// cheese
	fill(255, 200, 0); // Cheese color
	for (let i = 0; i < 3; i++) {
	push();
	translate(this.x + random(-30, 30), this.y - 10 + random(-5, 5)); // Random position for each cheese slice
	rotate(random(-PI / 6, PI / 6)); // Random rotation
	rect(0, 0, 30, 10); // Cheese slice
	pop();
	}

	// meat
	fill(255, 150, 50); // Meat color
	beginShape();
	for (let i = 0; i < sandwichWidth; i += 15) {
	let yOffset = random(-10, 10);
	vertex(this.x - sandwichWidth / 2 + i, this.y - 15 + yOffset); // Random y-offset for irregular meat shape
	}
	endShape(CLOSE);

	// tomato
	fill(255, 0, 0); // Tomato color
	ellipse(this.x - sandwichWidth / 4, this.y - 20, 25, 15);
	ellipse(this.x + sandwichWidth / 4, this.y - 20, 25, 15);

	// seeds
	fill(255);
	ellipse(this.x - sandwichWidth / 4, this.y - 35, 5, 2);
	ellipse(this.x, this.y - 35, 5, 2);
	ellipse(this.x + sandwichWidth / 4, this.y - 35, 5, 2);
	}
	}
	</script>
	</body>
	</html>