diff --git a/css/style.css b/css/style.css index 3307600..44f348f 100644 --- a/css/style.css +++ b/css/style.css @@ -169,6 +169,10 @@ code { border-radius: 3px; } +.comment { + opacity: .5; +} + .rounded { -webkit-border-radius: 5px; -moz-border-radius: 5px; diff --git a/index.html b/index.html index 3c06ce5..0cfdb69 100644 --- a/index.html +++ b/index.html @@ -200,6 +200,20 @@
And you're ready to start drawing!
+ ++ You may also configure Isomer with an options object as the second argument: +
+ +var iso = new Isomer(document.getElementById("art"), {
+ scale: 100, // Scale or zoom level
+ originX: 300, // Origin X coordinate
+ originY: 400, // Origin Y coordinate
+ lightPosition: new Vector(2, -1, 3), // Angle of lightsource
+ lightColor: new Color(55, 255, 255), // Color of lightsource
+});
+ var Shape = Isomer.Shape;
var Point = Isomer.Point;
-/* add() also accepts arrays */
+/* add() also accepts arrays */
iso.add([
Shape.Prism(Point.ORIGIN, 4, 4, 2),
Shape.Prism(new Point(-1, 1, 0), 1, 2, 1),
@@ -273,8 +287,8 @@ Colors
Isomer makes it easy to add colors to your shapes: simply specify a
color as the second argument to add(). Colors are built
- using three arguments: a red, green, and blue component respectively –
- the RGB representation of the color.
+ using four arguments: a red, green, and blue component respectively –
+ the RGB representation of the color, and the optional alpha transparency.
@@ -283,14 +297,14 @@ Colors
var Point = Isomer.Point;
var Color = Isomer.Color;
var red = new Color(160, 60, 50);
-var blue = new Color(50, 60, 160);
+var water = new Color(50, 60, 160, 0.5);
iso.add(Shape.Prism(Point.ORIGIN, 3, 3, 1));
-/* You can leave out the `new` keyword
- for most Isomer classes */
+/* You can leave out the `new` keyword
+ for most Isomer classes */
iso.add(Shape.Pyramid(Point(0, 2, 1)), red);
-iso.add(Shape.Prism(Point(2, 0, 1)), blue);
+iso.add(Shape.Prism(Point(2, 0, 1)), water);
@@ -390,8 +404,8 @@ Translate
var cube = Shape.Prism(Point.ORIGIN);
iso.add(cube);
-/* These methods do not modify the
- original shape/path/point */
+/* These methods do not modify the
+ original shape/path/point */
iso.add(cube.translate(0, 0, 1.1), blue);
iso.add(cube.translate(0, 0, 2.2), red);
@@ -424,9 +438,9 @@ Scale
var cube = Shape.Prism(Point.ORIGIN);
iso.add(cube.scale(Point.ORIGIN, 3, 3, 0.5));
iso.add(cube
- /* Grow outward from the origin */
+ /* Grow outward from the origin */
.scale(Point.ORIGIN, 3, 3, 0.5)
- /* We can chain these transformations */
+ /* We can chain these transformations */
.translate(0, 0, 0.6)
, blue);
@@ -456,7 +470,7 @@