Example output
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Generative NFT</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
</head>
<body style="background-color:black;">
<script>
let startTime;
function setup() {
createCanvas(800, 800);
noStroke();
startTime = millis();
}
function draw() {
if (millis() - startTime >= 10000) {
noLoop();
}
let x = random(width);
let y = random(height);
let size = random(100, 400);
let alpha = random(50, 100);
let c1 = color(random(255), random(255), random(255), alpha);
let c2 = color(random(255), random(255), random(255), alpha);
setGradient(x, y, size, size, c1, c2);
}
function setGradient(x, y, w, h, c1, c2) {
for (let i = x; i <= x + w; i++) {
let inter = map(i, x, x + w, 0, 1);
let c = lerpColor(c1, c2, inter);
for (let j = y; j <= y + h; j++) {
fill(c);
rect(i, j, 1, 1);
}
}
}
</script>
</body>
</html>
To view the generative NFT, simply save this file as index.html and open it in your web browser.