Erzähl-/Musik-/Tanz-Theater für alle ab 3 Jahren
nach dem gleichnamigen Bilderbuch von Magda Hassan und Raffaela Schöbitz
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 – 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, - 3, 249 selbst groß und stark und alles sein kann – und du auch.
+ 3, 249 selbst groß und stark und alles sein kann – und du auch.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 Punkt für Punkt das einfühlsame und kunstvoll illustrierte Bilderbuch WAS ZÄHLT, BIST DU von Magda diff --git a/htdocs/kleinesbuero.css b/htdocs/kleinesbuero.css index ec21ffb..562a7c4 100644 --- a/htdocs/kleinesbuero.css +++ b/htdocs/kleinesbuero.css @@ -49,7 +49,7 @@ FOOTER H2 { color: var(--primary-color); } -#header { +#banner { margin: 0 auto; display: block; } @@ -57,7 +57,7 @@ FOOTER H2 { .content { margin: 0 auto; max-width: 1024px; - padding: 4px; + padding: 4px 32px; } NAV { diff --git a/htdocs/kleinesbuero.js b/htdocs/kleinesbuero.js index 731a952..4b9ce19 100644 --- a/htdocs/kleinesbuero.js +++ b/htdocs/kleinesbuero.js @@ -4,15 +4,21 @@ class Wiggler { this.canvas = canvas; this.ctx = canvas.getContext("2d"); - this.target = target; this.width = this.canvas.width; 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.initCorners(); - this.current = this.initEdges(); + this.current = this.initEdges(maxx, maxy); } initRandom() { @@ -140,18 +146,23 @@ class Wiggler { } mash() { - // randomize completely - // this.current = this.current.map(l => l.map(p => [p[0] + Math.random() * 300 - 150, p[1] + Math.random() * 300 - 150])); + // replace target lines randomly + 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 => { - const px = l[0][0] + this.mv(this.width / 5); - 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; + let l0 = this.target[c0][0] + let l1 = this.target[c0][1] - 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) { this.running = true; @@ -180,21 +191,13 @@ const textToCoords = (text, scale, alphabet) => { }); 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', () => { console.log("kleines büro ready ..."); - const canvas = document.getElementById("header"); - const target = textToCoords("KLEINES BÜRO", 10, alphabet); + const canvas = document.getElementById("banner"); + const target = textToCoords("KLEINES BÜRO", 20, alphabet); const wiggler = new Wiggler(canvas, target); wiggler.start();