joshua/generative
1
0
Fork 0
mirror of https://github.com/seigler/generative synced 2025-07-26 06:46:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refinements

Browse source
This commit is contained in:
Joshua Seigler 2019-11-05 08:40:54 -05:00 • committed by Joshua Seigler
parent 23828113b2
commit df579cead2
3 changed files with 67 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/assets/index.html
View file

@ -5,10 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generative Art - seigler.github.io</title>
<link rel="stylesheet" href="DIGEST(app.css)">
<style>footer { position: fixed; bottom: 0; left: 0; right: 0; color: white; } </style>
</head>
<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.sound.min.js"></script>
<script src="DIGEST(app.js)"></script>

78
app/sketches/1.js
View file

@ -26,8 +26,8 @@ new p5(sketch => {
sketch.noStroke();
sketch.colorMode(sketch.HSB, 100);
width = document.documentElement.scrollWidth;
height = document.documentElement.scrollHeight;
width = sketch.windowWidth;
height = sketch.windowHeight;
maxD = (width + height) * 1.75 / Math.sqrt(goalInstances);
sketch.createCanvas(width, height);
@ -78,10 +78,15 @@ new p5(sketch => {
let rows = Math.max(1, Math.round(height / unit)) + 1;
let cols = Math.max(1, Math.round(width / unit)) + 1;
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++) {
// calculate row and col from i
let col = i % cols;
let row = Math.floor(i / cols);
let col = indices[i] % cols;
let row = Math.floor(indices[i] / cols);
buffer.noStroke();
buffer.background('#000');
@ -96,35 +101,36 @@ new p5(sketch => {
buffer.fill(c);
buffer.circle(maxD / 2, maxD / 2, d); // always at the center of the buffer
// giant, lo-fi blur
pass1.shader(blurH);
blurH.setUniform('tex0', buffer);
blurH.setUniform('texelSize', [8.0/maxD, 8.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', [8.0/maxD, 8.0/maxD]);
blurV.setUniform('direction', [0.0, 1.0]);
pass2.rect(0,0,maxD, maxD);
// regular blur to hide artifacts
pass1.shader(blurH);
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);
let iterations = 2;
let blurSize = maxD / 80;
for (let pass = 0; pass < iterations; pass++) {
let radius = (iterations - pass) * blurSize / iterations;
pass1.shader(blurH);
blurH.setUniform('tex0', pass == 0 ? buffer : pass2);
blurH.setUniform('texelSize', [radius/maxD, radius/maxD]);
blurH.setUniform('direction', [1.0, 0.0]);
pass1.rect(0,0,maxD, maxD);
pass2.shader(blurV);
blurV.setUniform('tex0', pass1);
blurV.setUniform('texelSize', [radius/maxD, radius/maxD]);
blurV.setUniform('direction', [0.0, 1.0]);
pass2.rect(0,0,maxD, maxD);
}
buffer.image(pass2, 0, 0, maxD, maxD);
buffer.fill('#000');
let cutoutAngle = sketch.random(2 * Math.PI);
buffer.circle(d * Math.cos(cutoutAngle), d * Math.sin(cutoutAngle), sketch.random(0.3, 0.5) * d);
if (sketch.random() > 0.5) {
buffer.fill('#000');
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 {
let a1 = 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);
}
}
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;
}
}
});

25
app/styles.css
View file

@ -1,12 +1,23 @@
html, body {
height: 100%;
height: 100%;
}
body {
background-color: #000;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
margin: 0;
padding: 0;
display: flex;
align-items: 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;
}