diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index eb6eda9..2b46f36 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -554,6 +554,62 @@ function zeroFill(number, width) { // Retrieved 2026-03-08, License - CC BY-SA 4.0 const delay = ms => new Promise(res => setTimeout(res, ms)); +class RandomPixelCanvas { + constructor(containerElement, options = {}) { + this.container = containerElement; + this.width = options.width || 400; + this.height = options.height || 300; + this.colors = options.colors || ['#000000', '#ffffff']; + this.filter = options.filter || ''; + this.canvas = this.createCanvas(); + + this.fillWithRandomPixels(); + } + + createCanvas() { + const canvas = document.createElement('canvas'); + canvas.width = this.width; + canvas.height = this.height; + canvas.style.filter = this.filter; + + this.container.appendChild(canvas); + + return canvas; + } + + fillWithRandomPixels() { + const ctx = this.canvas.getContext('2d'); + const imageData = ctx.createImageData(this.width, this.height); + const data = imageData.data; + + for (let i = 0; i < data.length; i += 4) { + const color = this.getRandomColor(); + const rgb = this.hexToRgb(color); + + data[i] = rgb.r; // Red + data[i + 1] = rgb.g; // Green + data[i + 2] = rgb.b; // Blue + data[i + 3] = 255; // Alpha + } + + ctx.putImageData(imageData, 0, 0); + } + + getRandomColor() { + return this.colors[Math.floor(Math.random() * this.colors.length)]; + } + + hexToRgb(hex) { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : {r: 0, g: 0, b: 0}; + } +} + // CONCEPTS // NOTE: Benutzt private Zuweisungen diff --git a/source/screens/demo/examples/game/menu.liquid b/source/screens/demo/examples/game/menu.liquid index 7852bdb..34e00e7 100644 --- a/source/screens/demo/examples/game/menu.liquid +++ b/source/screens/demo/examples/game/menu.liquid @@ -3,7 +3,7 @@ title: Menu tags: - game --- -{% assign bodyClass = 'body_game' -%} +{% assign bodyClass = 'body_menu' -%} {% layout 'hippie/simple.liquid' %} {% block body %} @@ -14,7 +14,7 @@ tags:

Additional name