diff --git a/app/assets/1/index.html b/app/assets/1/index.html
new file mode 100644
index 0000000..849fd85
--- /dev/null
+++ b/app/assets/1/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+ Generative Art - seigler.github.io
+
+
+
+
+
+
+
+
+
diff --git a/app/assets/index.html b/app/assets/index.html
index b517994..f1aa6dd 100644
--- a/app/assets/index.html
+++ b/app/assets/index.html
@@ -1,15 +1,17 @@
-
-
-
- Generative Art - seigler.github.io
-
-
-
-
-
-
-
-
+
+
+
+ Generative Art - seigler.github.io
+
+
+
+
+ P5.js generative art
+
+ - gradient burst
+
+
+
diff --git a/app/assets/shaders/white-noise.frag b/app/assets/shaders/white-noise.frag
index 4ee26c9..4446705 100644
--- a/app/assets/shaders/white-noise.frag
+++ b/app/assets/shaders/white-noise.frag
@@ -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);
}
diff --git a/app/sketches/1.js b/app/sketches/1.js
index 241ad91..c2d8da1 100644
--- a/app/sketches/1.js
+++ b/app/sketches/1.js
@@ -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);
diff --git a/app/styles.css b/app/styles.css
index 9c93676..3e2dc6c 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -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;
}