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

Add noise

Browse source
This commit is contained in:
Joshua Seigler 2019-11-05 14:40:42 -05:00
parent df579cead2
commit 0e271449a6
4 changed files with 47 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

0
app/assets/shaders/blur-two-pass/base.vert → app/assets/shaders/base.vert
View file

0
app/assets/shaders/blur-two-pass/blur.frag → app/assets/shaders/blur-two-pass.frag
View file

17
app/assets/shaders/white-noise.frag Normal file
View file

@ -0,0 +1,17 @@
precision mediump float;
uniform vec2 u_resolution;
float random (vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))*
43758.5453123);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
float rnd = random( st );
gl_FragColor = vec4(vec3(rnd),0.05);
}

44
app/sketches/1.js
View file

@ -1,21 +1,23 @@
new p5(sketch => { new p5(sketch => {
sketch.disableFriendlyErrors = true;
// reused dimensions and a seed // reused dimensions and a seed
let seed, width, height, maxD, goalInstances; let seed, width, height, maxD, goalInstances, noiseResolution, blurQuality;
// offscreen layers // offscreen layers
let buffer, pass1, pass2; let buffer, pass1, pass2, noise;
// shaders // shaders
let blurH, blurV; let blurH, blurV, whiteNoise;
sketch.preload = () => { sketch.preload = () => {
// shaders, we will use the same vertex shader and frag shaders for both passes // shaders, we will use the same vertex shader and frag shaders for both passes
blurH = sketch.loadShader('shaders/blur-two-pass/base.vert', 'shaders/blur-two-pass/blur.frag'); blurH = sketch.loadShader('shaders/base.vert', 'shaders/blur-two-pass.frag');
blurV = sketch.loadShader('shaders/blur-two-pass/base.vert', 'shaders/blur-two-pass/blur.frag'); blurV = sketch.loadShader('shaders/base.vert', 'shaders/blur-two-pass.frag');
whiteNoise = sketch.loadShader('shaders/base.vert', 'shaders/white-noise.frag');
} }
sketch.setup = () => { sketch.setup = () => {
goalInstances = 100; noiseResolution = 2;
blurQuality = 2;
goalInstances = 70;
window.onhashchange = () => { window.onhashchange = () => {
seed = window.location.hash.substr(1); seed = window.location.hash.substr(1);
@ -28,17 +30,20 @@ new p5(sketch => {
width = sketch.windowWidth; width = sketch.windowWidth;
height = sketch.windowHeight; height = sketch.windowHeight;
maxD = (width + height) * 1.75 / Math.sqrt(goalInstances);
sketch.createCanvas(width, height); sketch.createCanvas(width, height);
maxD = (width + height) * 1.75 / Math.sqrt(goalInstances);
buffer = sketch.createGraphics(maxD, maxD); buffer = sketch.createGraphics(maxD, maxD);
pass1 = sketch.createGraphics(maxD, maxD, sketch.WEBGL); pass1 = sketch.createGraphics(maxD, maxD, sketch.WEBGL);
pass2 = sketch.createGraphics(maxD, maxD, sketch.WEBGL); pass2 = sketch.createGraphics(maxD, maxD, sketch.WEBGL);
noise = sketch.createGraphics(width, height, sketch.WEBGL);
buffer.noStroke(); buffer.noStroke();
pass1.noStroke(); pass1.noStroke();
pass2.noStroke(); pass2.noStroke();
noise.noStroke();
generate(); generate();
}; };
@ -71,13 +76,12 @@ new p5(sketch => {
sketch.blendMode(sketch.BLEND); sketch.blendMode(sketch.BLEND);
sketch.background('#000'); sketch.background('#000');
sketch.blendMode(sketch.ADD); sketch.blendMode(sketch.ADD);
let resolution = 2;
let sqpxEach = width * height / goalInstances; // square pixels per circle, helps with gridding let sqpxEach = width * height / goalInstances; // square pixels per circle, helps with gridding
let unit = Math.sqrt(sqpxEach); let unit = Math.sqrt(sqpxEach);
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, noiseResolution * 1000);
let indices = []; let indices = [];
for (let i = 0; i < rows * cols; i++) { for (let i = 0; i < rows * cols; i++) {
indices[i] = i; indices[i] = i;
@ -93,18 +97,18 @@ new p5(sketch => {
// perlin noise "intensity" // perlin noise "intensity"
let intensity = sketch.noise( let intensity = sketch.noise(
noiseOffset + row / rows * resolution, noiseOffset + row / rows * noiseResolution,
noiseOffset + col / cols * resolution noiseOffset + col / cols * noiseResolution
); );
let d = maxD * intensity; // diameter let d = maxD * intensity; // diameter
let c = sketch.color(100 * sketch.random(), 100, intensity * 90 + 10, intensity * 70 + 10); // color let c = sketch.color(100 * sketch.random(), 100, intensity * 90 + 10, intensity * 70 + 10); // color
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
let iterations = 2;
let blurSize = maxD / 80; let blurSize = maxD / 80;
for (let pass = 0; pass < iterations; pass++) { // blurQuality is number of blur iterations
let radius = (iterations - pass) * blurSize / iterations; for (let pass = 0; pass < blurQuality; pass++) {
let radius = (blurQuality - pass) * blurSize / blurQuality;
pass1.shader(blurH); pass1.shader(blurH);
blurH.setUniform('tex0', pass == 0 ? buffer : pass2); blurH.setUniform('tex0', pass == 0 ? buffer : pass2);
blurH.setUniform('texelSize', [radius/maxD, radius/maxD]); blurH.setUniform('texelSize', [radius/maxD, radius/maxD]);
@ -149,6 +153,14 @@ new p5(sketch => {
sketch.image(buffer, w - maxD / 2, h - maxD / 2); sketch.image(buffer, w - maxD / 2, h - maxD / 2);
} }
noise.shader(whiteNoise);
whiteNoise.setUniform('u_resolution', [width, height]);
whiteNoise.setUniform('u_mean', 0.5);
whiteNoise.setUniform('u_variation', 0.5);
noise.rect(0, 0, width, height);
sketch.blendMode(sketch.OVERLAY);
sketch.image(noise, 0, 0);
} }
function shuffle(array) { // Fisher-Yates shuffle function shuffle(array) { // Fisher-Yates shuffle