Webleb - Extraits de Code - Art génératif : Jardin de fleurs P5.js

HTML

<!DOCTYPE html>

<head>

<title>Generative Garden</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background: #0a1929;

overflow: hidden;

font-family: sans-serif;

}

.light-column {

position: fixed;

top: 0;

width: 33.33vw;

height: 100vh;

background: linear-gradient(to bottom, transparent, rgba(100, 255, 218, 0.05), transparent);

pointer-events: none;

animation: pulseLight 8s infinite alternate ease-in-out;

z-index: 1;

}

.light-column:nth-child(1) { left: 0; animation-delay: 0s; }

.light-column:nth-child(2) { left: 33.33vw; animation-delay: 2s; }

.light-column:nth-child(3) { left: 66.66vw; animation-delay: 4s; }

@keyframes pulseLight {

0% { opacity: 0.3; transform: scaleX(0.9); }

100% { opacity: 0.8; transform: scaleX(1.1); }

}

#scene {

display: flex;

width: 100vw;

height: 100vh;

position: relative;

z-index: 2;

}

.panel {

flex: 1;

height: 100vh;

overflow: hidden;

position: relative;

}

#sketch-1, #sketch-2, #sketch-3 {

width: 100%;

height: 100%;

display: block;

}

#fog {

position: fixed;

inset: 0;

background: radial-gradient(circle at 50% 100%, rgba(20, 50, 80, 0.2), transparent 70%);

pointer-events: none;

mix-blend-mode: overlay;

z-index: 3;

}

</style>

</head>

<body>

<defs>

</filter>

</defs>

</svg>

</div>

const palette = [

"#00ffaa",

"#ff006f",

"#ff9d00",

"#ffa3fd",

"#f2f794",

"#d9c0fa"

];

function flowerSketch(seed, containerId) {

return p => {

let pts = [];

let ends = [];

p.setup = () => {

p.randomSeed(seed);

const container = document.getElementById(containerId);

p.createCanvas(container.clientWidth, container.clientHeight);

p.noLoop();

generate();

};

p.windowResized = () => {

const container = document.getElementById(containerId);

p.resizeCanvas(container.clientWidth, container.clientHeight);

generate();

};

function generate() {

p.clear();

pts = [];

ends = [];

let n = 25;

for (let i = 0; i < n; i++) {

pts.push({

x: p.random(p.width * 0.2, p.width * 0.8),

y: p.height + 10,

len: p.random(p.height * 0.4, p.height * 0.7),

t: p.random(0.003),

s: p.random(0.02)

});

}

drawBackground();

drawFlowers();

}

function drawBackground() {

for (let i = 0; i < 20; i++) {

let col = p.color(p.random(palette));

col.setAlpha(40);

p.fill(col);

p.noStroke();

p.circle(

p.random(p.width),

p.random(p.height),

p.random(100, 300)

);

}

function drawFlowers() {

pts.forEach(pt => {

p.push();

p.translate(pt.x, pt.y);

p.rotate(p.PI);

let prevX = 0;

let prevY = 0;

for (let i = 0; i < pt.len; i++) {

let x = i * 0.5;

let y = p.sin(i * pt.t) * 30 * p.noise(i * pt.s, pt.t) + p.random(-1, 1);

p.stroke(p.random(palette));

p.strokeWeight(p.map(i, 0, pt.len, 3, 0.5));

p.line(prevX, prevY, x, y);

prevX = x;

prevY = y;

}

ends.push({ x: prevX + pt.x, y: prevY + pt.y });

p.pop();

});

ends.forEach(end => {

p.push();

p.translate(end.x, end.y);

p.rotate(p.PI);

for (let i = 0; i < 6; i++) {

p.rotate(p.PI / 3);

p.stroke(p.random(palette));

p.strokeWeight(1);

p.noFill();

p.beginShape();

for (let a = 0; a < p.PI; a += 0.1) {

let r = p.sin(a) * 20;

let xx = p.cos(a) * r;

let yy = p.sin(a) * r;

p.vertex(xx, yy);

}

p.endShape();

}

p.fill(p.random(palette));

p.noStroke();

p.circle(0, 0, 10);

p.pop();

});

}

};

}

new p5(flowerSketch(100, 'sketch-1'), 'sketch-1');

new p5(flowerSketch(200, 'sketch-2'), 'sketch-2');

new p5(flowerSketch(300, 'sketch-3'), 'sketch-3');

</script>

</body>

</html>

Art génératif : Jardin de fleurs P5.js

Recommandé

mot de passe de connexion

Démo de jeu de combat Ragdoll (HTML, CSS, JS)

Système solaire en cascade

HTML

CSS

JS

Recommandé

mot de passe de connexion

Démo de jeu de combat Ragdoll (HTML, CSS, JS)

Système solaire en cascade

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS