• Parametric Design
• 3D
• Transformationen

Transformationen

Jede Transformation eines 2D- oder 3D-Objekts generiert eine neue Instanz dieses Objektes. Dies bedeutet, dass wenn wir unser Objekt an eine Funktion übergeben, gibt uns diese dann ein neues zurück, welches wir dann in eine Variable speichern können. Dies hat den Vorteil, dass wir ein und das selbe Objekte mehrfach benutzen können (siehe am Ende der Seite einen Input für effizientes Vorgehen bei vielen Transformationen).

Farben

const {colorize, colorNameToRgb} = jscad.colors;

Farben können uns bei der Entwicklung und beim Prototypen helfen, um z.B. verschiedene Teil von einander unterscheiden zu können. Dabei sollte man aber im Hinterkopf haben, dass die Farben in der Regel beim Export verloren gehen und man diese dann eventuell in einer anderen Software erneut anwenden muss.

Wir können entweder RGB-Werte nutzen:

const shape = colorize([R, G, B], cube());

Wichtig: Der RGB-Bereich geht nicht von 0 bis 255, sondern von 0 bis 1.

Oder wir können auch CSS Farbnamen nutzen:

const shape = colorize(colorNameToRgb('black'), cube());

Transformationen

const {translate, rotate, scale, center, align} = jscad.transforms;

Die Dokumentation aller Transformationen gibt es hier.

Ähnlich zu den Transformationen die wir bereits vom p5js Koordinatensystem kennen, können wir bei JSCAD individuelle Objekte transformieren. In JSCAD beziehen sich die Transformation also immer nur auf das Objekt welches wir übergeben und nicht auf alle die wir danach generieren.

Verschieben

Ein Objekt entlang der x/y/z-Achsen verschieben:

const shape = translate([0, 0, 5], cube());

Drehung

Ähnlich wie bei p5js, wird das Objekt um den Nullpunkt gedreht (entlang der x/y/z-Achse). Soll sich das Objekt um sich selber drehen, müssen wir erst eine Rotation durchführen und danach eventuelle Verschiebungen, etc.:

const shape = rotate([0, 0, Math.PI / 2], cube());

Skalieren

Vergrößern oder verkleinern eines Objektes, entlang der 3 Achsen. Die Werte werden mit der aktuellen Größe multipliziert (2 > doppelt so groß, 0.5 > halb so groß):

const shape = scale([0, 2, 0], cube());

Zentrieren

Über die center-Funktion kann ein Objekt auf einer Achse zentriert werden. Werden entsprechend alle Achsen auf true gesetzt, liegt das Objekt nachher auf [0,0,0]:

const shape = center([true, true, true], cube());

Schleifen

Jede Transformation generiert eine neue Instanz, zu Beginn ist es am einfachsten, dies einfach in eine neue Variable zu speichern. Aber umso mehr Transformationen und Objekte generiert werden, umso unübersichtlicher wird dies. Zum einen können wir unsere Objekte natürlich in Arrays & Objects speichern und zum anderen können wir auch Variablen einfach überschreiben und ersparen uns so unnötig viele Variablen:

Zurück zum Anfang