Improves wiggler and adds padding

This commit is contained in:
Stefan Schallerl 2024-12-17 13:33:08 +01:00
parent 4879cb268f
commit eb1e44f533
4 changed files with 31 additions and 29 deletions

View file

@ -13,7 +13,7 @@
<body> <body>
<div style="background-color: var(--contrast);"> <div style="background-color: var(--contrast);">
<div class="content"> <div class="content">
<canvas id="header" width="400" height="100" alt="Kleines Büro"></canvas> <canvas id="banner" width="800" height="200" alt="Kleines Büro"></canvas>
<nav> <nav>
<a href="/index.html">Zurück zur Hauptseite</a> <a href="/index.html">Zurück zur Hauptseite</a>
</nav> </nav>

View file

@ -15,8 +15,7 @@
<body> <body>
<div style="background-color: var(--contrast);"> <div style="background-color: var(--contrast);">
<div class="content"> <div class="content">
<canvas id="banner" width="800" height="200" alt="Kleines Büro"></canvas>
<canvas id="header" width="400" height="100" alt="Kleines Büro"></canvas>
<nav> <nav>
<a href="#waszaehltbistdu">Was zählt, bist du</a> | <a href="#werwirsind">Wer wir sind</a> <a href="#waszaehltbistdu">Was zählt, bist du</a> | <a href="#werwirsind">Wer wir sind</a>
</nav> </nav>
@ -60,9 +59,9 @@
<p>Erzähl-/Musik-/Tanz-Theater für alle ab 3 Jahren</p> <p>Erzähl-/Musik-/Tanz-Theater für alle ab 3 Jahren</p>
<p>nach dem gleichnamigen Bilderbuch von Magda Hassan und Raffaela Schöbitz</p> <p>nach dem gleichnamigen Bilderbuch von Magda Hassan und Raffaela Schöbitz</p>
<p>Spür mal, hinter den Bäumen, zwischen den Blättern wartet ein Tier. Es ist groß und stark und <p>Spür mal, hinter den Bäumen, zwischen den Blättern wartet ein Tier. Es ist groß und stark und
ungeheuerlich ich glaube: Es ist wie ich. Schau mal, ich möchte dir von uns erzählen. Von tanzenden ungeheuerlich &ndash; ich glaube: Es ist wie ich. Schau mal, ich möchte dir von uns erzählen. Von tanzenden
Tatzen. Vom Ausruhen in weichem Fell. Von springenden Punkten. Von dem, wie ich zähle. Und wie ich 1, 2, Tatzen. Vom Ausruhen in weichem Fell. Von springenden Punkten. Von dem, wie ich zähle. Und wie ich 1, 2,
3, 249 selbst groß und stark und alles sein kann und du auch.</p> 3, 249 selbst groß und stark und alles sein kann &ndash; und du auch.</p>
<p>Ein Kind, eine Tänzerin und ein Musiker begegnen auf einer Bühne einem Gepard. Spielerisch, musikalisch, <p>Ein Kind, eine Tänzerin und ein Musiker begegnen auf einer Bühne einem Gepard. Spielerisch, musikalisch,
in poetischen Bildern und Sprachen und immer mit Unterstützung der (jungen) Zuschauer:innen erwecken sie in poetischen Bildern und Sprachen und immer mit Unterstützung der (jungen) Zuschauer:innen erwecken sie
Punkt für Punkt das einfühlsame und kunstvoll illustrierte Bilderbuch WAS ZÄHLT, BIST DU von Magda Punkt für Punkt das einfühlsame und kunstvoll illustrierte Bilderbuch WAS ZÄHLT, BIST DU von Magda

View file

@ -49,7 +49,7 @@ FOOTER H2 {
color: var(--primary-color); color: var(--primary-color);
} }
#header { #banner {
margin: 0 auto; margin: 0 auto;
display: block; display: block;
} }
@ -57,7 +57,7 @@ FOOTER H2 {
.content { .content {
margin: 0 auto; margin: 0 auto;
max-width: 1024px; max-width: 1024px;
padding: 4px; padding: 4px 32px;
} }
NAV { NAV {

View file

@ -4,15 +4,21 @@ class Wiggler {
this.canvas = canvas; this.canvas = canvas;
this.ctx = canvas.getContext("2d"); this.ctx = canvas.getContext("2d");
this.target = target;
this.width = this.canvas.width; this.width = this.canvas.width;
this.height = this.canvas.height; this.height = this.canvas.height;
let maxx = Math.max(...target.flatMap(l => l.map(k => k[0])));
let maxy = Math.max(...target.flatMap(l => l.map(k => k[1])))
let offsx = (this.width - maxx) / 2
let offsy = (this.height - maxy) / 2
this.target = target.map(c => c.map(l => [l[0] + offsx, l[1] + offsy]));
// this.initRandom(); // this.initRandom();
// this.initCorners(); // this.initCorners();
this.current = this.initEdges(); this.current = this.initEdges(maxx, maxy);
} }
initRandom() { initRandom() {
@ -140,18 +146,23 @@ class Wiggler {
} }
mash() { mash() {
// randomize completely // replace target lines randomly
// this.current = this.current.map(l => l.map(p => [p[0] + Math.random() * 300 - 150, p[1] + Math.random() * 300 - 150])); for (let i = 0; i < this.target.length; i++) {
let c0, c1;
do {
c0 = i
c1 = Math.floor(Math.random() * this.target.length)
} while (c0 == c1);
this.current = this.current.map(l => { let l0 = this.target[c0][0]
const px = l[0][0] + this.mv(this.width / 5); let l1 = this.target[c0][1]
const py = l[0][1] + this.mv(this.height / 5);
const r = Math.PI * 2;
const tx = px + Math.cos(r) * 10;
const ty = py + Math.sin(r) * 10;
return [[px, py], [px, py]]; this.target[c0][0] = this.target[c1][0]
}); this.target[c0][1] = this.target[c1][1]
this.target[c1][0] = l0
this.target[c1][1] = l1
}
if (!this.running) { if (!this.running) {
this.running = true; this.running = true;
@ -180,21 +191,13 @@ const textToCoords = (text, scale, alphabet) => {
}); });
return output; return output;
/*
for (var i = 0; i < text.length; i++) {
const char = text[i];
const co = alphabet[char];
co.forEach(l => output.push(l.map(p => p.map())));
}
*/
}; };
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
console.log("kleines büro ready ..."); console.log("kleines büro ready ...");
const canvas = document.getElementById("header"); const canvas = document.getElementById("banner");
const target = textToCoords("KLEINES BÜRO", 10, alphabet); const target = textToCoords("KLEINES BÜRO", 20, alphabet);
const wiggler = new Wiggler(canvas, target); const wiggler = new Wiggler(canvas, target);
wiggler.start(); wiggler.start();