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

make room for future sketches

Browse source
This commit is contained in:
Joshua Seigler 2019-11-05 16:57:43 -05:00
parent 0e271449a6
commit 7c824da05e
5 changed files with 81 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

15
app/assets/1/index.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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)">
</head>
<body>
<script src="../modules/p5.min.js"></script>
<script src="../modules/p5.sound.min.js"></script>
<script src="DIGEST(../app.js)"></script>
<footer><code>Space</code> or double click for a new one. <code>S</code> to save.</footer>
</body>
</html>

26
app/assets/index.html
View file

@ -1,15 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<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)">
</head> </head>
<body> <body>
<footer>Press space or double click for a new one</footer> <main>
<script src="modules/p5.min.js"></script> <h1>P5.js generative art</h1>
<script src="modules/p5.sound.min.js"></script> <ol>
<script src="DIGEST(app.js)"></script> <li><a class="sketch" href="1/">gradient burst</a></li>
</body> </ol>
</main>
</body>
</html> </html>

16
app/assets/shaders/white-noise.frag
View file

@ -1,17 +1,21 @@
precision mediump float; precision mediump float;
uniform vec2 u_resolution; uniform vec2 u_resolution;
uniform float u_alpha;
float random (vec2 st) { highp float random(vec2 co) {
return fract(sin(dot(st.xy, highp float a = 12.9898;
vec2(12.9898,78.233)))* highp float b = 78.233;
43758.5453123); highp float c = 43758.5453;
highp float dt= dot(co.xy, vec2(a, b));
highp float sn= mod(dt, 3.14);
return fract(sin(sn) * c);
} }
void main() { void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy; vec2 st = gl_FragCoord.xy/u_resolution.xy;
float rnd = random( st ); float rnd = random(st);
gl_FragColor = vec4(vec3(rnd),0.05); gl_FragColor = vec4(vec3(rnd), u_alpha);
} }

24
app/sketches/1.js
View file

@ -2,16 +2,17 @@ new p5(sketch => {
sketch.disableFriendlyErrors = true; sketch.disableFriendlyErrors = true;
// reused dimensions and a seed // reused dimensions and a seed
let seed, width, height, maxD, goalInstances, noiseResolution, blurQuality; let seed, width, height, maxD, goalInstances, noiseResolution, blurQuality;
// canvas
let canvas;
// offscreen layers // offscreen layers
let buffer, pass1, pass2, noise; let buffer, pass1, pass2, noise;
// shaders // shaders
let blurH, blurV, whiteNoise; let blurH, blurV, whiteNoise;
sketch.preload = () => { sketch.preload = () => {
// shaders, we will use the same vertex shader and frag shaders for both passes blurH = sketch.loadShader('../shaders/base.vert', '../shaders/blur-two-pass.frag');
blurH = sketch.loadShader('shaders/base.vert', 'shaders/blur-two-pass.frag'); blurV = sketch.loadShader('../shaders/base.vert', '../shaders/blur-two-pass.frag');
blurV = sketch.loadShader('shaders/base.vert', 'shaders/blur-two-pass.frag'); whiteNoise = sketch.loadShader('../shaders/base.vert', '../shaders/white-noise.frag');
whiteNoise = sketch.loadShader('shaders/base.vert', 'shaders/white-noise.frag');
} }
sketch.setup = () => { sketch.setup = () => {
@ -31,7 +32,7 @@ new p5(sketch => {
width = sketch.windowWidth; width = sketch.windowWidth;
height = sketch.windowHeight; height = sketch.windowHeight;
sketch.createCanvas(width, height); canvas = sketch.createCanvas(width, height);
maxD = (width + height) * 1.75 / Math.sqrt(goalInstances); maxD = (width + height) * 1.75 / Math.sqrt(goalInstances);
@ -55,6 +56,8 @@ new p5(sketch => {
if (sketch.key == ' ') { if (sketch.key == ' ') {
seed = null; seed = null;
generate(); generate();
} else if (sketch.key == 's') {
sketch.saveCanvas('seigler-p5-1-gradient_burst-' + seed + '.jpg', 'jpg');
} }
}; };
@ -63,6 +66,14 @@ new p5(sketch => {
generate(); generate();
}; };
let resizeTimer;
sketch.windowResized = () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
window.location.reload();
}, 100);
};
function generate() { function generate() {
if (seed) { if (seed) {
sketch.randomSeed(seed); sketch.randomSeed(seed);
@ -155,8 +166,7 @@ new p5(sketch => {
} }
noise.shader(whiteNoise); noise.shader(whiteNoise);
whiteNoise.setUniform('u_resolution', [width, height]); whiteNoise.setUniform('u_resolution', [width, height]);
whiteNoise.setUniform('u_mean', 0.5); whiteNoise.setUniform('u_alpha', 0.05);
whiteNoise.setUniform('u_variation', 0.5);
noise.rect(0, 0, width, height); noise.rect(0, 0, width, height);
sketch.blendMode(sketch.OVERLAY); sketch.blendMode(sketch.OVERLAY);

26
app/styles.css
View file

@ -1,5 +1,10 @@
*, *:before, *:after {
box-sizing: inherit;
}
html, body { html, body {
height: 100%; height: 100%;
box-sizing: border-box;
} }
body { body {
@ -9,6 +14,25 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: white;
font-family: sans-serif;
}
main {
text-align: left;
}
a {
color: inherit;
}
a:hover, a:focus {color: #66F;}
code {
display: inline-block;
font-size: 1.2em;
line-height: 1;
padding: 0.5em 0.5em 0.2em;
background-color: #222;
} }
footer { footer {
@ -17,7 +41,7 @@ footer {
left: 0; left: 0;
max-width: 100vw; max-width: 100vw;
color: white; color: white;
background-color: black; background-color: rgba(0, 0, 0, 0.8);
padding: 0.5em 1em; padding: 0.5em 1em;
border-top-right-radius: 0.5em; border-top-right-radius: 0.5em;
} }