parthkapoor15/skill-library

Hairline: Eine Figur erstellen

Sie erstellen eine Figur im Hairline-Stil: eine isometrische Strichzeichnung, aufgebaut aus abgerundeten Körpern in einem einzigen Strich, die auf den Zeiger antwortet. Sie wird als eine HTML-Datei ausgeliefert, die nichts zu installieren hat. Die sechs Figuren von @lucasmarkes/hairline sind der Maßstab; examples/terrain.js und examples/riffle.js sind zwei davon, in dem Format, das Sie schreiben werden.

Sie schreiben nur eines: die Figur. Die Engine (kernel.js) und die Seite (bench.html) sind fest. Bearbeiten Sie sie nie, fügen Sie nie eine geänderte Kopie davon ein und schreiben Sie nie etwas, das der Kernel bereits bereitstellt.

Jede unten genannte Datei befindet sich in diesem Fertigkeitsordner. Die Figur und die Seite werden im Arbeitsverzeichnis der Person geschrieben: Führen Sie build.mjs, validate.mjs und look.mjs von dort aus, mit ihrem Pfad in diesem Ordner.

0. Quelle

Nur wenn die Anfrage mit einer .svg-Datei kam. Führen Sie node read.mjs <datei.svg> aus: Es schreibt das SVG als Bild und eine Karte mit den gemessenen Werten, beide im Arbeitsverzeichnis. Lesen Sie dann source.md und beantworten Sie deren Fragen. Das Objekt und seine Teile sind jetzt festgelegt: Jedes Konzept in Schritt 1 behält sie bei.

1. Konzept

Lesen Sie concepts.md. Es gibt einen Abschnitt für einen leeren Zustand und einen für eine Figur, die aus einer Markierung gezeichnet wurde. Bieten Sie dann zwei oder drei Konzepte an, jeweils eine Zeile:

Name. Das Objekt. Was der Zeiger damit macht. Was die Anzeige sagt. Wo der Rundgang anhält.

Warten Sie, bis die Person auswählt. Überspringen Sie diesen Schritt nur, wenn sie bereits mit dem Objekt und der Geste ankamen. Wenn es niemanden gibt, den man fragen kann, nehmen Sie das Konzept mit der stärksten Ruhepose und sagen Sie, welches Sie genommen haben.

Mit einer Quelle (Schritt 0) behält jedes Konzept das Objekt und seine Teile bei: Sie unterscheiden sich in der Geste, oder, wenn die Geste mit der Anfrage kam, in der Form und der Anzeige.

Eine Figur, eine Idee. Ein Konzept, das ein Label braucht, um verstanden zu werden, ist noch kein Konzept.

2. Bauen

1. Lesen Sie rules.md. Die zehn Regeln sind kein Ratschlag: Eine Figur, die eine bricht, ist nicht fertig.
2. Lesen Sie den Index am Anfang von kernel.js: den Kommentar unter der Hash-Zeile, hinunter bis var HL. Er listet alles auf, was Sie aufrufen dürfen. Lesen Sie nicht den Code darunter.
3. Lesen Sie das Beispiel, das Ihrem Konzept näher ist: examples/terrain.js für ein kontinuierliches Feld, examples/riffle.js für diskrete Elemente.
4. Schreiben Sie die Figur als <name>.js im Arbeitsverzeichnis der Person, in der Form der Beispiele: Nehmen Sie, was Sie von HL brauchen, definieren Sie mount({ stage, svg, read }, value), das { set, destroy } zurückgibt, und beenden Sie die Datei mit hairline({ name, means, rules, range, tour, mount }).
   • name: Kleinbuchstaben, ein Wort oder mit Bindestrich.
   • means: Ein Satz, höchstens 140 Zeichen, der sagt, was die Figur zeigt. Es ist die Zeile unter der Bühne.
   • rules: Die Nummern der Regeln, auf die sich diese Figur am meisten stützt.
   • range: Die eine Zahl, die der Schieberegler antreibt, bei Intensität 0, 0.5 und 1. Die mittlere ist der Standard, und die drei bewegen sich in eine Richtung. mounts value und der value, den set(value) erhält, wenn sich der Schieberegler bewegt, ist diese Zahl: die eigene der Figur, gelesen auf range, nicht 0 bis 1.
   • tour: Die drei bis sechs viewBox-Punkte, die der unsichtbare Zeiger besucht, wenn die Seite abgespielt wird, oder null zum Verlassen; die Runde, die ein Fremder sieht, ohne eine Hand auf der Seite. Wörtliche [x, y]-Zahlen, mindestens einer davon ein Punkt. Die Figur spielt sich nie selbst ab: Der Abspielknopf der Seite und das Paket tun das.
5. Bauen Sie es zusammen: node build.mjs <name>.js schreibt hairline-<name>.html, und das tut auch jeder Lauf von look.mjs in Schritt 3. Ohne Node: Kopieren Sie bench.html und fügen Sie den Inhalt von kernel.js dort ein, wo /*KERNEL*/ steht, und Ihre Figur dort, wo /*FIGURE*/ steht, durch Dateioperation, ohne etwas anderes zu ändern.

3. Prüfen

1. node look.mjs <name>.js --answer x,y,z --edge x,y,z, und --source <datei.svg>, wenn es eine gibt, wobei die Punkte Weltpunkte Ihrer Figur sind, wie look.md sagt. Es baut die Seite, validiert sie, macht die acht Bilder auf einem Blatt, hairline-<name>-look.png, und prüft den Rahmen, die Anzeige und die Konsole. Korrigieren Sie jede Zeile, die als fehlgeschlagen ausgegeben wird, und führen Sie es erneut aus, bis es mit 0 beendet wird.
2. Lesen Sie look.md, dann das Blatt, und beantworten Sie dessen Fragen. Korrigieren Sie, was fehlschlägt, und gehen Sie zurück zu 1.

look.mjs benötigt einen Browser und installiert playwright-core einmalig außerhalb dieses Ordners. Ohne einen Browser: Prüfen Sie mit node validate.mjs hairline-<name>.html nach jedem Bau und führen Sie die Prüfung durch, wie look.md unter „Ohne Browser“ sagt. Ohne Node: Lesen Sie die Liste der Prüfungen am Anfang von validate.mjs und beantworten Sie jede einzelne aus Ihrem Code.

Geben Sie keine Seite weiter, die der Validierer ablehnt. Sagen Sie nicht, dass die Prüfung abgeschlossen ist, wenn Sie nicht geprüft haben.

4. Übergeben

Veröffentlichen Sie hairline-<name>.html als Artefakt, wenn Sie können. Wenn Sie nicht können, hinterlassen Sie die Datei dort, wo die Person sie öffnen kann, und sagen Sie, wo sie ist. Sagen Sie dann, eine Zeile pro Punkt:

• die Metapher: was das Objekt ist und was der Zeiger damit macht;
• die Regeln, auf die es sich stützt;
• der Rundgang: wo er anhält, in der Reihenfolge;
• alles, was Sie nicht verifizieren konnten (kein Node, kein Browser), deutlich.

Bitten Sie dann die Person, auf der Seite auf Abspielen zu drücken oder sie mit ?play=1 zu öffnen, und zu sagen, ob die Runde die Geschichte der Figur erzählt. Wenn es niemanden gibt, den man fragen kann, sagen Sie, dass der Rundgang nicht beurteilt wurde.

5. Anpassen

Wenn die Person eine Änderung wünscht, bearbeiten Sie nur <name>.js, führen Sie dann look.mjs erneut aus und lesen Sie das neue Blatt. Die zehnte Version wird an derselben Messlatte gemessen wie die erste. Eine Änderung der Runde ist eine Änderung nur an tour.

Was schiefgeht

Wenn Sie sich dabei ertappen	Tun Sie stattdessen dies
der Zeichnung ein Label, eine Zahl oder einen Buchstaben hinzuzufügen	sagen Sie es mit Geometrie (Regel 10); Namen gehen in read.textContent
nach einer Farbe, einer Füllung oder einem Glühen zu greifen	verschieben Sie einen Strich von sil nach hi (Regel 04)
einen Timer, eine requestAnimationFrame oder eine CSS-Animation zu schreiben	register(stage, tick), mit Federn oder Tweens (Regeln 07 und 08)
den Zeiger gegen das zu testen, was gerade gezeichnet ist	testen Sie ihn gegen die Ruhe- oder Zielpose (Regel 01)
eine Box mit zwölf Kanten zu zeichnen	prism aus zwei abgerundeten Ringen: einer Silhouette und einer Falte (Regel 09)
ein Teil als einfachen abgerundeten Block zu zeichnen	geben Sie ihm die Merkmale, die es zu dem machen, was es ist, die Sie im Konzept benannt haben (concepts.md)
die Ruhe flach, leer oder symmetrisch zu lassen, weil das einfach war	setzen Sie sie zusammen: Ruhe ist das Thumbnail (Regel 05)
eine Markierung auf eine Box zu stempeln, um zu sagen, wem sie gehört	bauen Sie die Markierung als das Objekt, oder lassen Sie es weg (concepts.md, „Von einer Markierung“)
den Kernel oder die Bank zu bearbeiten, um etwas zum Laufen zu bringen	die Figur ist falsch; ändern Sie die Figur
den Rundgang jedes Teil der Reihe nach besuchen zu lassen	drei Stopps, die jeweils eine andere Antwort zeigen, dann ein Verlassen: Eine Runde ist ein Satz, kein Inventar
eine zweite Idee hereinzulassen	schneiden Sie sie ab: eine Figur, eine Idee
einen Pfad aus dem SVG zu verfolgen oder seine Koordinaten zu kopieren	bauen Sie das Teil als Körper mit den Proportionen, die die Karte angibt (source.md)
einen Teil des SVG zu behalten, der Dekoration ist	werfen Sie es weg: zwei oder drei Teile machen das Objekt aus