Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve documentation #96

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

Improve documentation #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,10 @@ code {
border-radius: 3px;
}

.comment {
opacity: .5;
}

.rounded {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
Expand Down
38 changes: 26 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,20 @@ <h1>Getting Started</h1>
<p>
And you're ready to start drawing!
</p>

<p>
You may also configure Isomer with an options object as the second argument:
</p>

<div class="code full rounded">
<pre><code class="prettyprint lang-js">var iso = new Isomer(document.getElementById("art"), {
scale: 100, <span class="comment">// Scale or zoom level</span>
originX: 300, <span class="comment">// Origin X coordinate</span>
originY: 400, <span class="comment">// Origin Y coordinate</span>
lightPosition: new Vector(2, -1, 3), <span class="comment">// Angle of lightsource</span>
lightColor: new Color(55, 255, 255), <span class="comment">// Color of lightsource</span>
});</code></pre>
</div>
</div>
</section>

Expand Down Expand Up @@ -228,7 +242,7 @@ <h2>Prism</h2>
<pre><code class="prettyprint lang-js">var Shape = Isomer.Shape;
var Point = Isomer.Point;

/* add() also accepts arrays */
<span class="comment">/* add() also accepts arrays */</span>
iso.add([
Shape.Prism(Point.ORIGIN, 4, 4, 2),
Shape.Prism(new Point(-1, 1, 0), 1, 2, 1),
Expand Down Expand Up @@ -273,8 +287,8 @@ <h1>Colors</h1>
<p>
Isomer makes it easy to add colors to your shapes: simply specify a
color as the second argument to <code>add()</code>. 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.
</p>

<div class="example">
Expand All @@ -283,14 +297,14 @@ <h1>Colors</h1>
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 */
<span class="comment">/* You can leave out the `new` keyword
for most Isomer classes */</span>
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);
</code></pre>
</div>
<canvas width="680" height="500" id="color-example" class="rounded"></canvas>
Expand Down Expand Up @@ -390,8 +404,8 @@ <h2>Translate</h2>
var cube = Shape.Prism(Point.ORIGIN);

iso.add(cube);
/* These methods do not modify the
original shape/path/point */
<span class="comment">/* These methods do not modify the
original shape/path/point */</span>
iso.add(cube.translate(0, 0, 1.1), blue);
iso.add(cube.translate(0, 0, 2.2), red);

Expand Down Expand Up @@ -424,9 +438,9 @@ <h2>Scale</h2>
var cube = Shape.Prism(Point.ORIGIN);
iso.add(cube.scale(Point.ORIGIN, 3, 3, 0.5));
iso.add(cube
/* Grow outward from the origin */
<span class="comment">/* Grow outward from the origin */</span>
.scale(Point.ORIGIN, 3, 3, 0.5)
/* We can chain these transformations */
<span class="comment">/* We can chain these transformations */</span>
.translate(0, 0, 0.6)
, blue);
</code></pre>
Expand Down Expand Up @@ -456,7 +470,7 @@ <h2>RotateZ</h2>
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 */
<span class="comment">/* (1.5, 1.5) is the center of the prism */</span>
.rotateZ(Point(1.5, 1.5, 0), Math.PI / 12)
.translate(0, 0, 1.1)
, blue);
Expand Down
4 changes: 2 additions & 2 deletions js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down