Remove webgl from two sketches for compatibility with KDE Plasma HTMLWallpaper

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

View file

@ -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) {

View file

@ -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) {

View file

@ -21,6 +21,16 @@
<script src="../modules/rhill-voronoi-core.min.js"></script>
<script src="../modules/simplex-noise.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>
<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>
</html>

View file

@ -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;