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

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>
<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>
<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>
</body>
<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>
<main>
<h1>P5.js generative art</h1>
<ol>
<li><a class="sketch" href="1/">gradient burst</a></li>
</ol>
</main>
</body>
</html>

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

@ -1,17 +1,21 @@
precision mediump float;
uniform vec2 u_resolution;
uniform float u_alpha;
float random (vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))*
43758.5453123);
highp float random(vec2 co) {
highp float a = 12.9898;
highp float b = 78.233;
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() {
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;
// reused dimensions and a seed
let seed, width, height, maxD, goalInstances, noiseResolution, blurQuality;
// canvas
let canvas;
// offscreen layers
let buffer, pass1, pass2, noise;
// shaders
let blurH, blurV, whiteNoise;
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');
blurV = sketch.loadShader('shaders/base.vert', 'shaders/blur-two-pass.frag');
whiteNoise = sketch.loadShader('shaders/base.vert', 'shaders/white-noise.frag');
blurH = 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');
}
sketch.setup = () => {
@ -31,7 +32,7 @@ new p5(sketch => {
width = sketch.windowWidth;
height = sketch.windowHeight;
sketch.createCanvas(width, height);
canvas = sketch.createCanvas(width, height);
maxD = (width + height) * 1.75 / Math.sqrt(goalInstances);
@ -55,6 +56,8 @@ new p5(sketch => {
if (sketch.key == ' ') {
seed = null;
generate();
} else if (sketch.key == 's') {
sketch.saveCanvas('seigler-p5-1-gradient_burst-' + seed + '.jpg', 'jpg');
}
};
@ -63,6 +66,14 @@ new p5(sketch => {
generate();
};
let resizeTimer;
sketch.windowResized = () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
window.location.reload();
}, 100);
};
function generate() {
if (seed) {
sketch.randomSeed(seed);
@ -155,8 +166,7 @@ new p5(sketch => {
}
noise.shader(whiteNoise);
whiteNoise.setUniform('u_resolution', [width, height]);
whiteNoise.setUniform('u_mean', 0.5);
whiteNoise.setUniform('u_variation', 0.5);
whiteNoise.setUniform('u_alpha', 0.05);
noise.rect(0, 0, width, height);
sketch.blendMode(sketch.OVERLAY);

26
app/styles.css
View file

@ -1,5 +1,10 @@
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
height: 100%;
box-sizing: border-box;
}
body {
@ -9,6 +14,25 @@ body {
display: flex;
align-items: 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 {
@ -17,7 +41,7 @@ footer {
left: 0;
max-width: 100vw;
color: white;
background-color: black;
background-color: rgba(0, 0, 0, 0.8);
padding: 0.5em 1em;
border-top-right-radius: 0.5em;
}