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

Remove webgl from two sketches for compatibility with KDE Plasma HTMLWallpaper

Browse source
This commit is contained in:
Joshua Seigler 2019-11-18 12:38:56 -05:00
parent 57ac17c916
commit d0803fb9ac
4 changed files with 41 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

22
app/7/index.js
View file

@ -10,10 +10,10 @@ new p5(sketch => {
const assets = {}; // fonts, images, sound files const assets = {}; // fonts, images, sound files
sketch.preload = () => { sketch.preload = () => {
shaders.whiteNoise = sketch.loadShader( // shaders.whiteNoise = sketch.loadShader(
'../shaders/base.vert', // '../shaders/base.vert',
'../shaders/white-noise.frag' // '../shaders/white-noise.frag'
); // );
// shaders.blurH = sketch.loadShader( // shaders.blurH = sketch.loadShader(
// '../shaders/base.vert', // '../shaders/base.vert',
// '../shaders/blur-two-pass.frag' // '../shaders/blur-two-pass.frag'
@ -45,7 +45,7 @@ new p5(sketch => {
layers.stars = sketch.createGraphics(width, height); layers.stars = sketch.createGraphics(width, height);
layers.stars.colorMode(sketch.HSL, 1); layers.stars.colorMode(sketch.HSL, 1);
layers.noise = sketch.createGraphics(width, height, sketch.WEBGL); // layers.noise = sketch.createGraphics(width, height, sketch.WEBGL);
// layers.blur1 = sketch.createGraphics(width, height, sketch.WEBGL); // layers.blur1 = sketch.createGraphics(width, height, sketch.WEBGL);
// layers.blur2 = sketch.createGraphics(width, height, sketch.WEBGL); // layers.blur2 = sketch.createGraphics(width, height, sketch.WEBGL);
@ -96,13 +96,13 @@ new p5(sketch => {
sketch.blendMode(sketch.BLEND); sketch.blendMode(sketch.BLEND);
sketch.background(0); sketch.background(0);
layers.noise.shader(shaders.whiteNoise); // layers.noise.shader(shaders.whiteNoise);
shaders.whiteNoise.setUniform('u_resolution', [width, height]); // shaders.whiteNoise.setUniform('u_resolution', [width, height]);
shaders.whiteNoise.setUniform('u_alpha', 0.05); // shaders.whiteNoise.setUniform('u_alpha', 0.05);
layers.noise.rect(0, 0, width, height); // layers.noise.rect(0, 0, width, height);
sketch.image(layers.stars, Math.round(-width * overdraw/2), Math.round(-height * overdraw/2)); sketch.image(layers.stars, Math.round(-width * overdraw/2), Math.round(-height * overdraw/2));
sketch.blendMode(sketch.OVERLAY); // sketch.blendMode(sketch.OVERLAY);
sketch.image(layers.noise, 0, 0); // sketch.image(layers.noise, 0, 0);
} }
function addStars(layer) { function addStars(layer) {

22
app/8/index.js
View file

@ -8,10 +8,10 @@ new p5(sketch => {
const assets = {}; // fonts, images, sound files const assets = {}; // fonts, images, sound files
sketch.preload = () => { sketch.preload = () => {
shaders.whiteNoise = sketch.loadShader( // shaders.whiteNoise = sketch.loadShader(
"../shaders/base.vert", // "../shaders/base.vert",
"../shaders/white-noise.frag" // "../shaders/white-noise.frag"
); // );
assets.stroke = sketch.loadImage("./brush-100x30.png"); assets.stroke = sketch.loadImage("./brush-100x30.png");
}; };
@ -36,7 +36,7 @@ new p5(sketch => {
layers.contours = sketch.createGraphics(width, height); layers.contours = sketch.createGraphics(width, height);
layers.contours.colorMode(sketch.HSL, 1); layers.contours.colorMode(sketch.HSL, 1);
layers.noise = sketch.createGraphics(width, height, sketch.WEBGL); // layers.noise = sketch.createGraphics(width, height, sketch.WEBGL);
// layers.blur1 = sketch.createGraphics(width, height, sketch.WEBGL); // layers.blur1 = sketch.createGraphics(width, height, sketch.WEBGL);
// layers.blur2 = sketch.createGraphics(width, height, sketch.WEBGL); // layers.blur2 = sketch.createGraphics(width, height, sketch.WEBGL);
@ -85,17 +85,17 @@ new p5(sketch => {
sketch.blendMode(sketch.BLEND); sketch.blendMode(sketch.BLEND);
sketch.background(0); sketch.background(0);
layers.noise.shader(shaders.whiteNoise); // layers.noise.shader(shaders.whiteNoise);
shaders.whiteNoise.setUniform("u_resolution", [width, height]); // shaders.whiteNoise.setUniform("u_resolution", [width, height]);
shaders.whiteNoise.setUniform("u_alpha", 0.05); // shaders.whiteNoise.setUniform("u_alpha", 0.05);
layers.noise.rect(0, 0, width, height); // layers.noise.rect(0, 0, width, height);
sketch.image( sketch.image(
layers.contours, layers.contours,
Math.round((-width * overdraw) / 2), Math.round((-width * overdraw) / 2),
Math.round((-height * overdraw) / 2) Math.round((-height * overdraw) / 2)
); );
sketch.blendMode(sketch.OVERLAY); // sketch.blendMode(sketch.OVERLAY);
sketch.image(layers.noise, 0, 0); // sketch.image(layers.noise, 0, 0);
} }
function drawContours(layer) { function drawContours(layer) {

10
app/layouts/sketch.hbs
View file

@ -21,6 +21,16 @@
<script src="../modules/rhill-voronoi-core.min.js"></script> <script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="../modules/simplex-noise.js"></script> <script src="../modules/simplex-noise.js"></script>
<script src="DIGEST(../app.js)"></script> <script src="DIGEST(../app.js)"></script>
<header id="errors"></header>
<footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer> <footer><a href="../">Back</a> | <code>Space</code> or double click for a new one. <code>S</code> to save.</footer>
<script>
window.onerror = function(error) {
var text = document.createTextNode(error);
var box = document.createElement("div");
box.className = "error"
box.appendChild(text);
document.body.querySelector('#errors').appendChild(box);
}
</script>
</body> </body>
</html> </html>

9
app/styles.css
View file

@ -40,6 +40,15 @@ ul {
padding-left: 0; padding-left: 0;
} }
header {
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: left;
z-index: 10;
}
footer { footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;