Webleb - fragmentos de código - Arte generativo: Jardín de flores 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>

Arte generativo: Jardín de flores P5.js

Recomendado

Barra de navegación

Formulario de registro de inicio de sesión giratorio 3D HTML CSS

Concepto de reloj React

HTML

CSS

JS

Recomendado

Barra de navegación

Formulario de registro de inicio de sesión giratorio 3D HTML CSS

Concepto de reloj React

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS