From d0803fb9ac5ce25406ed593d523f50d735ca0535 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Mon, 18 Nov 2019 12:38:56 -0500 Subject: [PATCH] Remove webgl from two sketches for compatibility with KDE Plasma HTMLWallpaper --- app/7/index.js | 22 +++++++++++----------- app/8/index.js | 22 +++++++++++----------- app/layouts/sketch.hbs | 10 ++++++++++ app/styles.css | 9 +++++++++ 4 files changed, 41 insertions(+), 22 deletions(-) diff --git a/app/7/index.js b/app/7/index.js index 4488885..60a67cc 100644 --- a/app/7/index.js +++ b/app/7/index.js @@ -10,10 +10,10 @@ new p5(sketch => { const assets = {}; // fonts, images, sound files sketch.preload = () => { - shaders.whiteNoise = sketch.loadShader( - '../shaders/base.vert', - '../shaders/white-noise.frag' - ); + // shaders.whiteNoise = sketch.loadShader( + // '../shaders/base.vert', + // '../shaders/white-noise.frag' + // ); // shaders.blurH = sketch.loadShader( // '../shaders/base.vert', // '../shaders/blur-two-pass.frag' @@ -45,7 +45,7 @@ new p5(sketch => { layers.stars = sketch.createGraphics(width, height); 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.blur2 = sketch.createGraphics(width, height, sketch.WEBGL); @@ -96,13 +96,13 @@ new p5(sketch => { sketch.blendMode(sketch.BLEND); sketch.background(0); - layers.noise.shader(shaders.whiteNoise); - shaders.whiteNoise.setUniform('u_resolution', [width, height]); - shaders.whiteNoise.setUniform('u_alpha', 0.05); - layers.noise.rect(0, 0, width, height); + // layers.noise.shader(shaders.whiteNoise); + // shaders.whiteNoise.setUniform('u_resolution', [width, height]); + // shaders.whiteNoise.setUniform('u_alpha', 0.05); + // layers.noise.rect(0, 0, width, height); sketch.image(layers.stars, Math.round(-width * overdraw/2), Math.round(-height * overdraw/2)); - sketch.blendMode(sketch.OVERLAY); - sketch.image(layers.noise, 0, 0); + // sketch.blendMode(sketch.OVERLAY); + // sketch.image(layers.noise, 0, 0); } function addStars(layer) { diff --git a/app/8/index.js b/app/8/index.js index 6fa070f..d378c08 100644 --- a/app/8/index.js +++ b/app/8/index.js @@ -8,10 +8,10 @@ new p5(sketch => { const assets = {}; // fonts, images, sound files sketch.preload = () => { - shaders.whiteNoise = sketch.loadShader( - "../shaders/base.vert", - "../shaders/white-noise.frag" - ); + // shaders.whiteNoise = sketch.loadShader( + // "../shaders/base.vert", + // "../shaders/white-noise.frag" + // ); assets.stroke = sketch.loadImage("./brush-100x30.png"); }; @@ -36,7 +36,7 @@ new p5(sketch => { layers.contours = sketch.createGraphics(width, height); 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.blur2 = sketch.createGraphics(width, height, sketch.WEBGL); @@ -85,17 +85,17 @@ new p5(sketch => { sketch.blendMode(sketch.BLEND); sketch.background(0); - layers.noise.shader(shaders.whiteNoise); - shaders.whiteNoise.setUniform("u_resolution", [width, height]); - shaders.whiteNoise.setUniform("u_alpha", 0.05); - layers.noise.rect(0, 0, width, height); + // layers.noise.shader(shaders.whiteNoise); + // shaders.whiteNoise.setUniform("u_resolution", [width, height]); + // shaders.whiteNoise.setUniform("u_alpha", 0.05); + // layers.noise.rect(0, 0, width, height); sketch.image( layers.contours, Math.round((-width * overdraw) / 2), Math.round((-height * overdraw) / 2) ); - sketch.blendMode(sketch.OVERLAY); - sketch.image(layers.noise, 0, 0); + // sketch.blendMode(sketch.OVERLAY); + // sketch.image(layers.noise, 0, 0); } function drawContours(layer) { diff --git a/app/layouts/sketch.hbs b/app/layouts/sketch.hbs index 6e6bd21..0c6d819 100644 --- a/app/layouts/sketch.hbs +++ b/app/layouts/sketch.hbs @@ -21,6 +21,16 @@ +
+ diff --git a/app/styles.css b/app/styles.css index d4b3323..b9067bc 100644 --- a/app/styles.css +++ b/app/styles.css @@ -40,6 +40,15 @@ ul { padding-left: 0; } +header { + position: fixed; + top: 0; + left: 0; + right: 0; + text-align: left; + z-index: 10; +} + footer { position: fixed; bottom: 0;