mirror of
https://github.com/seigler/generative
synced 2025-07-26 22:56:10 +00:00
refinements
This commit is contained in:
parent
23828113b2
commit
df579cead2
3 changed files with 67 additions and 39 deletions
|
@ -5,10 +5,9 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Generative Art - seigler.github.io</title>
|
<title>Generative Art - seigler.github.io</title>
|
||||||
<link rel="stylesheet" href="DIGEST(app.css)">
|
<link rel="stylesheet" href="DIGEST(app.css)">
|
||||||
<style>footer { position: fixed; bottom: 0; left: 0; right: 0; color: white; } </style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<footer>space or double click for a new one</footer>
|
<footer>Press space or double click for a new one</footer>
|
||||||
<script src="modules/p5.min.js"></script>
|
<script src="modules/p5.min.js"></script>
|
||||||
<script src="modules/p5.sound.min.js"></script>
|
<script src="modules/p5.sound.min.js"></script>
|
||||||
<script src="DIGEST(app.js)"></script>
|
<script src="DIGEST(app.js)"></script>
|
||||||
|
|
|
@ -26,8 +26,8 @@ new p5(sketch => {
|
||||||
sketch.noStroke();
|
sketch.noStroke();
|
||||||
sketch.colorMode(sketch.HSB, 100);
|
sketch.colorMode(sketch.HSB, 100);
|
||||||
|
|
||||||
width = document.documentElement.scrollWidth;
|
width = sketch.windowWidth;
|
||||||
height = document.documentElement.scrollHeight;
|
height = sketch.windowHeight;
|
||||||
maxD = (width + height) * 1.75 / Math.sqrt(goalInstances);
|
maxD = (width + height) * 1.75 / Math.sqrt(goalInstances);
|
||||||
|
|
||||||
sketch.createCanvas(width, height);
|
sketch.createCanvas(width, height);
|
||||||
|
@ -78,10 +78,15 @@ new p5(sketch => {
|
||||||
let rows = Math.max(1, Math.round(height / unit)) + 1;
|
let rows = Math.max(1, Math.round(height / unit)) + 1;
|
||||||
let cols = Math.max(1, Math.round(width / unit)) + 1;
|
let cols = Math.max(1, Math.round(width / unit)) + 1;
|
||||||
let noiseOffset = sketch.random(0, 1000);
|
let noiseOffset = sketch.random(0, 1000);
|
||||||
|
let indices = [];
|
||||||
|
for (let i = 0; i < rows * cols; i++) {
|
||||||
|
indices[i] = i;
|
||||||
|
}
|
||||||
|
shuffle(indices);
|
||||||
for (let i = 0; i < rows * cols; i++) {
|
for (let i = 0; i < rows * cols; i++) {
|
||||||
// calculate row and col from i
|
// calculate row and col from i
|
||||||
let col = i % cols;
|
let col = indices[i] % cols;
|
||||||
let row = Math.floor(i / cols);
|
let row = Math.floor(indices[i] / cols);
|
||||||
|
|
||||||
buffer.noStroke();
|
buffer.noStroke();
|
||||||
buffer.background('#000');
|
buffer.background('#000');
|
||||||
|
@ -96,35 +101,36 @@ new p5(sketch => {
|
||||||
buffer.fill(c);
|
buffer.fill(c);
|
||||||
buffer.circle(maxD / 2, maxD / 2, d); // always at the center of the buffer
|
buffer.circle(maxD / 2, maxD / 2, d); // always at the center of the buffer
|
||||||
|
|
||||||
// giant, lo-fi blur
|
let iterations = 2;
|
||||||
pass1.shader(blurH);
|
let blurSize = maxD / 80;
|
||||||
blurH.setUniform('tex0', buffer);
|
for (let pass = 0; pass < iterations; pass++) {
|
||||||
blurH.setUniform('texelSize', [8.0/maxD, 8.0/maxD]);
|
let radius = (iterations - pass) * blurSize / iterations;
|
||||||
blurH.setUniform('direction', [1.0, 0.0]);
|
pass1.shader(blurH);
|
||||||
pass1.rect(0,0,maxD, maxD);
|
blurH.setUniform('tex0', pass == 0 ? buffer : pass2);
|
||||||
pass2.shader(blurV);
|
blurH.setUniform('texelSize', [radius/maxD, radius/maxD]);
|
||||||
blurV.setUniform('tex0', pass1);
|
blurH.setUniform('direction', [1.0, 0.0]);
|
||||||
blurV.setUniform('texelSize', [8.0/maxD, 8.0/maxD]);
|
pass1.rect(0,0,maxD, maxD);
|
||||||
blurV.setUniform('direction', [0.0, 1.0]);
|
pass2.shader(blurV);
|
||||||
pass2.rect(0,0,maxD, maxD);
|
blurV.setUniform('tex0', pass1);
|
||||||
|
blurV.setUniform('texelSize', [radius/maxD, radius/maxD]);
|
||||||
// regular blur to hide artifacts
|
blurV.setUniform('direction', [0.0, 1.0]);
|
||||||
pass1.shader(blurH);
|
pass2.rect(0,0,maxD, maxD);
|
||||||
blurH.setUniform('tex0', pass2);
|
}
|
||||||
blurH.setUniform('texelSize', [1.0/maxD, 1.0/maxD]);
|
|
||||||
blurH.setUniform('direction', [1.0, 0.0]);
|
|
||||||
pass1.rect(0,0,maxD, maxD);
|
|
||||||
pass2.shader(blurV);
|
|
||||||
blurV.setUniform('tex0', pass1);
|
|
||||||
blurV.setUniform('texelSize', [1.0/maxD, 1.0/maxD]);
|
|
||||||
blurV.setUniform('direction', [0.0, 1.0]);
|
|
||||||
pass2.rect(0,0,maxD, maxD);
|
|
||||||
|
|
||||||
buffer.image(pass2, 0, 0, maxD, maxD);
|
buffer.image(pass2, 0, 0, maxD, maxD);
|
||||||
|
|
||||||
buffer.fill('#000');
|
if (sketch.random() > 0.5) {
|
||||||
let cutoutAngle = sketch.random(2 * Math.PI);
|
buffer.fill('#000');
|
||||||
buffer.circle(d * Math.cos(cutoutAngle), d * Math.sin(cutoutAngle), sketch.random(0.3, 0.5) * d);
|
let cutoutAngle = sketch.random(2 * Math.PI);
|
||||||
|
let cutoutDiameter = sketch.random(0.1, 1.5) * d / 2;
|
||||||
|
let cutoutAdjustment = cutoutDiameter * sketch.random(-0.7, 0.3);
|
||||||
|
buffer.circle(
|
||||||
|
(maxD + (cutoutAdjustment + d) * Math.cos(cutoutAngle)) / 2,
|
||||||
|
(maxD + (cutoutAdjustment + d) * Math.sin(cutoutAngle)) / 2,
|
||||||
|
cutoutDiameter * 2
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
do {
|
do {
|
||||||
let a1 = sketch.random(2 * Math.PI);
|
let a1 = sketch.random(2 * Math.PI);
|
||||||
let a2 = sketch.random(2 * Math.PI);
|
let a2 = sketch.random(2 * Math.PI);
|
||||||
|
@ -144,4 +150,16 @@ new p5(sketch => {
|
||||||
sketch.image(buffer, w - maxD / 2, h - maxD / 2);
|
sketch.image(buffer, w - maxD / 2, h - maxD / 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function shuffle(array) { // Fisher-Yates shuffle
|
||||||
|
var i = 0, j = 0, temp = null;
|
||||||
|
|
||||||
|
for (i = array.length - 1; i > 0; i -= 1) {
|
||||||
|
j = Math.floor(sketch.random() * (i + 1));
|
||||||
|
temp = array[i];
|
||||||
|
array[i] = array[j];
|
||||||
|
array[j] = temp;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,12 +1,23 @@
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
max-width: 100vw;
|
||||||
|
color: white;
|
||||||
|
background-color: black;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
border-top-right-radius: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue