Webleb - कोड स्निपेट्स - जनरेटिव आर्ट: 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>

जनरेटिव आर्ट: p5.js फ्लावर गार्डन

अनुशंसित

P5.js और CSS के साथ HTML टेम्पलेट

पौधे बनाम ज़ोंबी गार्डनलेस

HTML

CSS

JS

अनुशंसित

P5.js और CSS के साथ HTML टेम्पलेट

पौधे बनाम ज़ोंबी गार्डनलेस

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS