mirror of
https://github.com/seigler/generative
synced 2025-07-26 22:56:10 +00:00
begin sketch 3
This commit is contained in:
parent
bae99d6acb
commit
d1af61ebb6
6 changed files with 250 additions and 2265 deletions
1
app/assets/3/index.html
Symbolic link
1
app/assets/3/index.html
Symbolic link
|
@ -0,0 +1 @@
|
||||||
|
../../sketch-template.html
|
|
@ -12,6 +12,7 @@
|
||||||
<ol>
|
<ol>
|
||||||
<li><a class="sketch" href="1/">gradient burst</a></li>
|
<li><a class="sketch" href="1/">gradient burst</a></li>
|
||||||
<li><a class="sketch" href="2/">gradient jungle</a></li>
|
<li><a class="sketch" href="2/">gradient jungle</a></li>
|
||||||
|
<li><a class="sketch" href="3/">untitled</a></li>
|
||||||
</ol>
|
</ol>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
149
app/sketches/3.js
Normal file
149
app/sketches/3.js
Normal file
|
@ -0,0 +1,149 @@
|
||||||
|
new p5(sketch => {
|
||||||
|
sketch.disableFriendlyErrors = false;
|
||||||
|
// reused dimensions and a seed
|
||||||
|
let seed, width, height, goalInstances, noiseResolution;
|
||||||
|
// offscreen layers
|
||||||
|
let buffer, pass1, noise;
|
||||||
|
// shaders
|
||||||
|
let whiteNoise;
|
||||||
|
|
||||||
|
sketch.preload = () => {
|
||||||
|
whiteNoise = sketch.loadShader(
|
||||||
|
'../shaders/base.vert',
|
||||||
|
'../shaders/white-noise.frag'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
sketch.setup = () => {
|
||||||
|
filenamePrefix = 'seigler-p5-3-untitled';
|
||||||
|
goalInstances = 40000;
|
||||||
|
noiseResolution = [2, 2, 2, 2];
|
||||||
|
|
||||||
|
window.onhashchange = () => {
|
||||||
|
seed = window.location.hash.substr(1);
|
||||||
|
generate();
|
||||||
|
};
|
||||||
|
|
||||||
|
seed = window.location.hash.substr(1);
|
||||||
|
sketch.noStroke();
|
||||||
|
sketch.colorMode(sketch.HSL, 1);
|
||||||
|
|
||||||
|
width = sketch.windowWidth;
|
||||||
|
height = sketch.windowHeight;
|
||||||
|
|
||||||
|
sketch.createCanvas(width, height);
|
||||||
|
|
||||||
|
// buffer = sketch.createGraphics(maxD, maxD);
|
||||||
|
// pass1 = sketch.createGraphics(maxD, maxD, sketch.WEBGL);
|
||||||
|
noise = sketch.createGraphics(width, height, sketch.WEBGL);
|
||||||
|
|
||||||
|
// buffer.noStroke();
|
||||||
|
// pass1.noStroke();
|
||||||
|
noise.noStroke();
|
||||||
|
|
||||||
|
generate();
|
||||||
|
};
|
||||||
|
|
||||||
|
sketch.draw = () => {
|
||||||
|
};
|
||||||
|
|
||||||
|
sketch.keyPressed = () => {
|
||||||
|
if (sketch.key == ' ') {
|
||||||
|
seed = null;
|
||||||
|
generate();
|
||||||
|
} else if (sketch.key == 's') {
|
||||||
|
sketch.saveCanvas(filenamePrefix + seed + '.jpg', 'jpg');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
sketch.doubleClicked = () => {
|
||||||
|
seed = null;
|
||||||
|
generate();
|
||||||
|
};
|
||||||
|
|
||||||
|
let resizeTimer;
|
||||||
|
sketch.windowResized = () => {
|
||||||
|
clearTimeout(resizeTimer);
|
||||||
|
resizeTimer = setTimeout(() => {
|
||||||
|
window.location.reload();
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
function generate() {
|
||||||
|
if (seed) {
|
||||||
|
sketch.randomSeed(seed);
|
||||||
|
} else {
|
||||||
|
let seed = Math.floor(sketch.random(1000000000000));
|
||||||
|
window.location.hash = seed;
|
||||||
|
sketch.randomSeed(seed);
|
||||||
|
}
|
||||||
|
|
||||||
|
sketch.noiseSeed(sketch.random(0, 1000000000));
|
||||||
|
sketch.blendMode(sketch.BLEND);
|
||||||
|
sketch.background('#777');
|
||||||
|
|
||||||
|
// square pixels per circle, helps with gridding
|
||||||
|
let sqpxEach = width * height / goalInstances;
|
||||||
|
let unit = Math.sqrt(sqpxEach);
|
||||||
|
let rows = Math.max(1, Math.round(height / unit)) + 1;
|
||||||
|
let cols = Math.max(1, Math.round(width / unit)) + 1;
|
||||||
|
let noiseOffset = 1000.37;
|
||||||
|
let gridPoints = [];
|
||||||
|
for (let index = 0; index < rows * cols; index++) {
|
||||||
|
let col = index % cols;
|
||||||
|
let row = Math.floor(index / cols);
|
||||||
|
let noise = noiseResolution.map(
|
||||||
|
(resolution, noiseIndex) => (
|
||||||
|
sketch.noise(
|
||||||
|
noiseOffset * noiseIndex + row / rows * resolution,
|
||||||
|
noiseOffset * noiseIndex + col / cols * resolution
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
gridPoints.push({
|
||||||
|
row,
|
||||||
|
col,
|
||||||
|
noise
|
||||||
|
});
|
||||||
|
}
|
||||||
|
shuffle(gridPoints);
|
||||||
|
gridPoints.forEach(({row, col, noise: [n0, n1, n2, n3]}) => {
|
||||||
|
if (sketch.random() > 1.25 * n0 - 0.25) { return; }
|
||||||
|
let x = width / (cols - 1) * col - unit / 2;
|
||||||
|
let y = height / (rows - 1) * row - unit / 2;
|
||||||
|
let angle = 2 * Math.PI * n2;
|
||||||
|
let length = (4 * n3* n3 + 1) * unit;
|
||||||
|
sketch.stroke(
|
||||||
|
27/360, // hue
|
||||||
|
0.27, // saturation
|
||||||
|
0.9 * n1 + 0.1 * Math.pow(sketch.random(), 2) - 0.05 // lightness
|
||||||
|
);
|
||||||
|
sketch.strokeWeight(unit * (1 + 1 * n3 * n3));
|
||||||
|
sketch.line(
|
||||||
|
x - length * Math.cos(angle),
|
||||||
|
y - length * Math.sin(angle),
|
||||||
|
x + length * Math.cos(angle),
|
||||||
|
y + length * Math.sin(angle)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
// noise.shader(whiteNoise);
|
||||||
|
// whiteNoise.setUniform('u_resolution', [width, height]);
|
||||||
|
// whiteNoise.setUniform('u_alpha', 0.05);
|
||||||
|
// noise.rect(0, 0, width, height);
|
||||||
|
|
||||||
|
// sketch.blendMode(sketch.OVERLAY);
|
||||||
|
// sketch.image(noise, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
|
@ -14,10 +14,6 @@ exports.modules = {
|
||||||
};
|
};
|
||||||
|
|
||||||
exports.plugins = {
|
exports.plugins = {
|
||||||
babel: {
|
|
||||||
presets: ['env'],
|
|
||||||
ignore: /^node_modules/
|
|
||||||
},
|
|
||||||
uglify: {
|
uglify: {
|
||||||
ignored: /^node_modules/
|
ignored: /^node_modules/
|
||||||
},
|
},
|
||||||
|
|
2353
package-lock.json
generated
2353
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -5,9 +5,9 @@
|
||||||
"repository": "",
|
"repository": "",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "brunch watch --server",
|
"start": "brunch watch --server",
|
||||||
"build": "rm -rf public/ && brunch build --production",
|
"build": "rm -rf dist/ && brunch build --production",
|
||||||
"deploy": "npm run build && npm run push-gh-pages",
|
"deploy": "npm run build && npm run push-gh-pages",
|
||||||
"push-gh-pages": "git-directory-deploy --directory public/"
|
"push-gh-pages": "git-directory-deploy --directory dist/"
|
||||||
},
|
},
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -15,9 +15,8 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"auto-reload-brunch": "^2.7.1",
|
"auto-reload-brunch": "^2.7.1",
|
||||||
"babel-brunch": "^7.0.1",
|
|
||||||
"babel-preset-env": "^1.6.1",
|
|
||||||
"brunch": "^2.10.17",
|
"brunch": "^2.10.17",
|
||||||
|
"buble-brunch": "^2.0.0",
|
||||||
"clean-css-brunch": "^2.10.0",
|
"clean-css-brunch": "^2.10.0",
|
||||||
"copycat-brunch": "^1.1.1",
|
"copycat-brunch": "^1.1.1",
|
||||||
"digest-brunch": "^1.6.0",
|
"digest-brunch": "^1.6.0",
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue