refinements

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

View file

@ -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>

View file

@ -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;
}
}
}); });

View file

@ -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;
} }