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 @@

Getting Started

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
+});
+
@@ -228,7 +242,7 @@

Prism

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 @@

RotateZ

var cube = Shape.Prism(Point.ORIGIN, 3, 3, 1); iso.add(cube); iso.add(cube - /* (1.5, 1.5) is the center of the prism */ + /* (1.5, 1.5) is the center of the prism */ .rotateZ(Point(1.5, 1.5, 0), Math.PI / 12) .translate(0, 0, 1.1) , blue); diff --git a/js/script.js b/js/script.js index e34fa2d..9906c98 100644 --- a/js/script.js +++ b/js/script.js @@ -230,11 +230,11 @@ Example.pyramid = function () { Example.color1 = function () { var iso = new Isomer(document.getElementById("color-example")); 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)); 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); }; Example.path = function () {