KachelKunst

1. Was ist KachelKunst?

KachelKunst ist eine kleine Kreativ-App: Du gestaltest Muster, Bilder und Aufgaben in einem 8×8 Raster.

• Das Raster besteht aus 8 × 8 Kacheln.
• In jede Kachel kannst du eine Form setzen – z. B. Quadrat, Kreis, Dreieck.
• Jede Form kann eine beliebige Farbe bekommen.
• Am Ende kannst du dein Design als PNG-Bild exportieren oder als JSON-Datei speichern und wieder laden.

2. Aufbau der Oberfläche

Die App besteht aus drei Bereichen:

• Links: Werkzeuge Formen, Farben, Zoom, Raster ein/aus, Moduswahl (Freies Gestalten / Aufgabenmodus).
• Mitte: Raster Das 8×8 Feld, in dem du klickst und deine Formen setzt.
• Rechts: Export & Import JSON-Export/-Import und PNG-Download.

Tipp: Für den Einstieg eignet sich der Modus Freies Gestalten. Wenn alles klar ist, probiere den Aufgabenmodus aus.

3. Formen auswählen & platzieren

So setzt du Formen ins Raster:

1. Wähle im Bereich Grundformen eine Form (z. B. Quadrat, Kreis, Dreieck).
2. Wähle darunter ggf. eine Spezialform (Rechteck, Ellipse, Halbkreis usw.).
3. Beim Dreieck kannst du im Feld Ausrichtung festlegen, ob die Spitze nach oben, unten, links oder rechts zeigen soll.
4. Klicke anschließend auf eine Kachel im Raster – dort erscheint deine Form in der aktuell gewählten Farbe.
5. Wähle die Form Feld löschen, wenn du eine Kachel wieder leeren möchtest.

Hinweis: Jede Kachel kann immer nur eine Form enthalten. Beim erneuten Klicken wird die alte Form überschrieben.

4. Farben & Schnellfarben

Du kannst mit einem Farbwähler arbeiten oder mit benannten Schnellfarben.

• Über den Farbwähler stellst du jede beliebige Farbe ein.
• Darunter findest du Schnellfarben wie „Schwarz“, „Weiß“, „Rot“, „Blau“, „Gelb“ – alle sind benannt, damit sie barriereärmer nutzbar sind.
• Klickst du auf eine Schnellfarbe, wird sie sofort als aktive Zeichenfarbe übernommen.

5. Zoom & Raster-Anzeige

Alles gut zu sehen – oder ganz klein für den Überblick.

• Mit dem Zoom-Regler stellst du die Kachelgröße ein (z. B. 40 px).
• Je größer der Zoom, desto größer wird das Raster auf dem Bildschirm.
• Über Raster anzeigen kannst du die Gitterlinien ein- oder ausblenden.
• Beim PNG-Export kannst du entscheiden, ob das Raster mit ausgegeben wird (abhängig vom Häkchen).

6. Moduswahl: Freies Gestalten vs. Aufgabenmodus

Freies Gestalten

• Wähle oben links den Modus Freies Gestalten.
• Alle Formen und Farben sind frei nutzbar, du kannst beliebige Muster, Logos, Pixelgrafiken und Figuren legen.
• Perfekt für Kreativphasen oder zum Planen eigener Aufgaben.

Aufgabenmodus

• Wähle den Modus Aufgabenmodus – dadurch wird der Aufgabenbereich aktiviert.
• In der Auswahlliste Aufgabe kannst du eines der vorgegebenen Muster wählen (z. B. „Smiley“, „Herz“, „Spirale“).
• Klicke auf „Aufgabe laden“:
  • Das eigene Raster wird geleert.
  • Im kleinen Vorschau-Canvas erscheint die Zielgrafik.
  • Eine Kurzbeschreibung der Aufgabe wird im Textfeld angezeigt.
• Lege nun das Muster im großen Raster nach.
• Mit „Lösung prüfen“ wird jede Kachel mit der Vorlage verglichen:
  • Stimmen Form, Farbe (und ggf. Dreiecks-Ausrichtung) nicht,
  • wird die Kachel rot markiert.
• Sind alle Kacheln richtig, erscheint eine Gratulationsmeldung.

7. JSON-Export & Import

JSON ist der „Speicher-Code“ für dein Raster – ideal für Vorlagen, Aufgaben und weitere Bearbeitung.

JSON exportieren

1. Lege dein Muster im Raster an.
2. Klicke rechts auf „JSON exportieren“.
3. Im großen Textfeld darunter erscheint ein JSON-Code mit deinem Design.
4. Markiere den Text und kopiere ihn in eine Datei, z. B. mein-muster.json oder haus.txt.
5. Diese Datei kannst du später wieder in die App einfügen oder z. B. im Unterricht als Vorlage teilen.

JSON importieren

1. Kopiere einen gültigen JSON-Code in das Textfeld (z. B. aus einer Datei oder aus einer Aufgabe).
2. Klicke auf „JSON importieren“.
3. Das Raster wird automatisch mit den gespeicherten Formen und Farben gefüllt.
4. Wenn die Rastergröße nicht passt, versucht die App, die Daten so sinnvoll wie möglich in das 8×8 Raster zu übernehmen.

Fehlerhafte JSON-Eingaben werden mit einer Fehlermeldung abgefangen. Dann bitte prüfen, ob alle Klammern und Anführungszeichen korrekt sind.

8. Export als PNG-Bild

So baust du aus deinem Raster ein Bild für Arbeitsblätter oder Präsentationen.

1. Stelle den gewünschten Zoom ein.
2. Entscheide, ob das Raster sichtbar sein soll (Häkchen „Raster anzeigen“).
3. Lege dein Muster fertig an.
4. Klicke auf „Als PNG herunterladen“.
5. Der Browser lädt eine Datei, z. B. kachelkunst.png.
6. Dieses Bild kannst du in Textdokumente, Präsentationen, Arbeitsblätter oder Webseiten einfügen.

Der PNG-Export verwendet das gleiche Raster wie auf dem Bildschirm – je nach Zoom wirkt die Grafik pixeliger oder detailreicher.

9. Raster leeren & neu beginnen

• Mit „Raster leeren“ werden alle Kacheln vollständig zurückgesetzt.
• Bestehende JSON- oder Aufgabeninformationen im Textfeld bleiben erhalten, bis du sie überschreibst.

Ideal, wenn Schüler:innen mehrere Versuche brauchen oder ein neues Design starten wollen.