Webleb - fragmentos de código - Arte generativo: p5.js Jardín de flores

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>

Arte generativo: p5.js Jardín de flores

Recomendado

Un código de alejandrokundrah

escalada de montaña

Clon de Spotify

HTML

CSS

JS

Recomendado

Un código de alejandrokundrah

escalada de montaña

Clon de Spotify

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS