<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fevra - Nova Flexin'</title>
<style>
/* Basic styling for the page */
body, html {
margin: 0;
padding: 0;
overflow: hidden; /* Prevent scrolling */
display: flex;
align-items: center;
justify-content: center;
height: 100vh; /* Make body full height */
}
</style>
</head>
<body>
<!-- Audio element with looping enabled -->
<audio id="background-audio" src="/content/3663a944ada3aff1faf0bf99fa4660552b9898c692c0a909310712c401ac7411i0" loop></audio>
<!-- Including p5.js script for visuals -->
<script src="/content/7e37766541506810ba6399c4b2735121f508bd9209df43dd200bf2316b014594i0"></script>
<!-- Inline script for p5.js animation and audio control -->
<script>
let angle = 110;
let recordSize = 700;
let recordColor;
function setup() {
// Create a canvas that matches the smaller dimension of the window
const size = min(windowWidth, windowHeight);
createCanvas(size, size);
recordColor = generateRecordColor();
noFill();
stroke(5);
frameRate(60);
noCursor();
playAudio(); // Start audio automatically
}
function windowResized() {
// Adjust canvas size on window resize, maintaining 1:1 ratio
const size = min(windowWidth, windowHeight);
resizeCanvas(size, size);
}
function draw() {
background(0, 3.75);
translate(width / 2, height / 2);
rotate(angle);
// Draw spinning record
drawVinylRecord(recordSize, recordColor);
angle += radians(1);
if (mouseIsPressed) {
recordSize = random(700, 700);
recordColor = generateRecordColor();
}
}
function generateRecordColor() {
return color(random(20, 247), random(110, 147), random(100, 26), 250);
}
function drawVinylRecord(size, color) {
stroke(color);
ellipse(size / 200, size / 5, size, size / 22.5);
ellipse(-size / 200, -size / 5, -size, size / 22.5);
ellipse(0, 0, 0, size / 45, 0, size / 111.5, size / 2.5); // Center
}
function playAudio() {
const audio = document.getElementById('background-audio');
audio.play().catch(error => {
console.log("Audio playback was prevented:", error);
});
}
</script>
</body>
</html>