Skip to content

Commit

Permalink
examples update and README
Browse files Browse the repository at this point in the history
  • Loading branch information
@hapticdata
hapticdata committed Jan 10, 2011
1 parent 4bc954a commit 4037866
Show file tree
Hide file tree
Showing 8 changed files with 95 additions and 33 deletions.
9 changes: 9 additions & 0 deletions README
View file
@@ -0,0 +1,9 @@
Toxiclibs.js is a javascript port of Karsten Schmidt's Toxiclibs for Java and Processing. Toxiclibs.js works great with the Processing.js visualization library for <canvas> but is not dependent on it. It can be used with other libraries such as Raphael.js, or by itself.


* Examples of the original library can be found at http://toxiclibs.org
* Examples of toxiclibs.js can be found at http://haptic-data.com/toxiclibsjs



Toxiclibs.js was initiated on 1/5/2011 by Kyle Phillips http://workofkylephillips.com
5 changes: 5 additions & 0 deletions examples/ArcPolarCoordinates_pjs.html
View file
Expand Up @@ -52,6 +52,8 @@
</script>
</head>
<body>
<h1>Arc Polar Coordinates</h1>

<script type="application/processing">
/**
* Quick demo & test for working with 2D polar coordinates, interpolation and
Expand Down Expand Up @@ -137,5 +139,8 @@
<canvas id="myCanvas" width="200" height="200">
your browser doesnt support canvas
</canvas>
<p>original example by <a href="http://postspectacular.com">Karsten Schmidt</a><br/>
Toxiclibs ported to js by <a href="http://workofkylephillips.com">Kyle Phillips</a></p>
<p>Quick demo & test for working with 2D polar coordinates, interpolation and circle segments. Might be useful for some...</p>
</body>
</html>
13 changes: 13 additions & 0 deletions examples/PolarUnravel_pjs.html
View file
Expand Up @@ -52,6 +52,8 @@
</script>
</head>
<body>
<h1>Arc Polar Coordinates</h1>
<p>original example by <a href="http://postspectacular.com">Karsten Schmidt</a></p>
<script type="application/processing">
/**
* PolarUnravel demo combines the following 3 features of toxiclibs:
Expand Down Expand Up @@ -144,5 +146,16 @@
<canvas id="myCanvas" width="200" height="200">
your browser doesnt support canvas
</canvas>
<p>original example by <a href="http://postspectacular.com">Karsten Schmidt</a><br/>
Toxiclibs ported to js by <a href="http://workofkylephillips.com">Kyle Phillips</a></p>
<p>
PolarUnravel demo combines the following 3 features of toxiclibs:
<ul>
<li>Polar-Cartesian coordinate transformation</li>
<li>Vector interpolation to smoothly switch layouts</li>
<li>Use of InterpolateStrategy for easing effects</li>
<li>Use TColor for working with HSV color space</li>
</ul>
</p>
</body>
</html>
11 changes: 10 additions & 1 deletion examples/ShiffmanFlocking_pjs.html
View file
Expand Up @@ -12,9 +12,18 @@
<script type="text/javascript" src="js/processing.js"></script>

<body>

<h1>Shiffman Flocking</h1>
<canvas id="myCanvas" data-processing-sources="flocking/ShiffmanFlocking.pde flocking/Boid.pde flocking/Flock.pde" width="200" height="200">
your browser doesnt support canvas
</canvas>
<p>Flocking by <a href="http://www.shiffman.net">Daniel Shiffman</a>
created for The Nature of Code class, ITP, Spring 2009.<br/>
Ported to toxiclibs by <a href="http://postspectacular.com">Karsten Schmidt</a><br/>
Toxiclibs ported to js by <a href="http://workofkylephillips.com">Kyle Phillips</a></p>

<p>Demonstration of <a href="http://www.red3d.com/cwr/">Craig Reynolds' "Flocking" behavior</a><br/>
<p>Rules: Cohesion, Separation, Alignment</p>

<p><strong>Usage:</strong> Click mouse to add boids into the system</p>
</body>
</html>
6 changes: 5 additions & 1 deletion examples/TColor_pjs.html
View file
Expand Up @@ -50,6 +50,7 @@
</script>
</head>
<body>
<h1>TColor Example</h1>
<script type="application/processing">

TColor c1;
Expand Down Expand Up @@ -114,12 +115,15 @@
fill(1,1,1);
text("step: "+step,width-80,height-10);


}
</script>

<canvas id="myCanvas" width="200" height="200">
your browser doesnt support canvas
</canvas>
<p>example and toxiclibs ported to js by <a href="http://workofkylephillips.com">Kyle Phillips</a></p>
<p>
Works with DOM elements, and any other library as well
</p>
</body>
</html>
14 changes: 13 additions & 1 deletion examples/WheelInsets_pjs.html
View file
Expand Up @@ -2,7 +2,7 @@

<html lang="en">
<head>
<title>PolarUnravel</title>
<title>Wheel Insets</title>
<meta name="author" content="Kyle Phillips">
<!-- Date: 2011-01-09 -->
<script type="text/javascript" src="../src/core/math/MathUtils.js"></script>
Expand Down Expand Up @@ -52,6 +52,7 @@
</script>
</head>
<body>
<h1>Wheel Insets</h1>
<script type="application/processing">
/**
* <p>This example was used for designing the outer rim of some
Expand Down Expand Up @@ -147,5 +148,16 @@
<canvas id="myCanvas" width="200" height="200">
your browser doesnt support canvas
</canvas>
<p>original example by <a href="http://postspectacular.com">Karsten Schmidt</a><br/>
Toxiclibs ported to js by <a href="http://workofkylephillips.com">Kyle Phillips</a></p>
<p>This example was used for designing the outer rim of some
generative wheels. The wheels are designed for laser cutting from
acrylic and the outer rim has a number of cutouts for friction fitting
wire track modules.</p>
<p>The actual generative wheel design is available under GPL v3 and
can be downloaded from:

<a href="http://toxiclibs.org/2010/01/re-inventing-the-wheel/">http://toxiclibs.org/2010/01/re-inventing-the-wheel/</a>
</p>
</body>
</html>
64 changes: 38 additions & 26 deletions src/color/TColor.js
View file
Expand Up @@ -13,15 +13,16 @@ function TColor(tcolor){
this.rgb = new Array(3);
this.hsv = new Array(3);
this.cmyk = new Array(4);
this.alpha = 1.0;
this._alpha = 1.0;
if(tcolor !== undefined && tcolor != null)
{
var buffer = tcolor.toCMYKAArray();
this.cmyk = buffer.splice(0,4);
this.hsv = tcolor.toHSVAArray().splice(0,3);
this.rgb = tcolor.toRGBAArray().splice(0,3);
this.alpha = tcolor.alpha;
this._alpha = tcolor.alpha;
}

}


Expand Down Expand Up @@ -77,6 +78,9 @@ TColor.prototype = {
return this.setRGB([this.rgb[0] + r, this.rgb[1] + g, this.rgb[2] + b]);
},

alpha:function(){
return this._alpha;
},

/**
* Rotates this color by a random amount (not exceeding the one specified)
Expand All @@ -94,12 +98,12 @@ TColor.prototype = {
this.rotateRYB(angle * MathUtils.normalizedRandom());
this.hsv[1] += delta * MathUtils.normalizedRandom();
this.hsv[2] += delta * MathUtils.normalizedRandom();
return this.setHSV(hsv);
return this.setHSV(this.hsv);
},

//shouldnt this be this.cmyk[3]?
black: function(){
return this.cmyk[0];
return this.cmyk[3];
},
/**
* Blends the color with the given one by the stated amount
Expand All @@ -116,7 +120,7 @@ TColor.prototype = {
this.rgb[0] += (crgb[0] - this.rgb[0]) * t;
this.rgb[1] += (crgb[1] - this.rgb[1]) * t;
this.rgb[2] += (crgb[2] - this.rgb[2]) * t;
this.alpha += (c.alpha - this.alpha) * t;
this._alpha += (c.alpha - this._alpha) * t;
return this.setRGB(this.rgb);
},

Expand All @@ -141,8 +145,8 @@ TColor.prototype = {
},

darken: function(step){
this.hsv[2] = MathUtils.clip(this.hsv[2] - step, 0, 1);
return this.setHSV(hsv);
this.hsv[2] = MathUtils.clip((this.hsv[2] -step), 0, 1);
return this.setHSV(this.hsv);
},
/**
* Reduced the color's saturation by the given amount.
Expand All @@ -151,7 +155,7 @@ TColor.prototype = {
* @return itself
*/
desaturate: function(step) {
this.hsv[1] = MathUtils.clip(this.hsv[1] - step, 0, 1);
this.hsv[1] = MathUtils.clip((this.hsv[1] - step), 0, 1);
return this.setHSV(this.hsv);
},

Expand Down Expand Up @@ -349,14 +353,14 @@ TColor.prototype = {
},

setAlpha: function(alpha) {
this.alpha = alpha;
this._alpha = alpha;
return this;
},

setARGB: function(argb) {
this.setRGB(((argb >> 16) & 0xff) * TColor.INV8BIT, ((argb >> 8) & 0xff) * TColor.INV8BIT,
(argb & 0xff) * TColor.INV8BIT);
this.alpha = (argb >>> 24) * TColor.INV8BIT;
this._alpha = (argb >>> 24) * TColor.INV8BIT;
return this;
},

Expand Down Expand Up @@ -388,7 +392,9 @@ TColor.prototype = {
this.cmyk[1] = m;
this.cmyk[2] = y;
this.cmyk[3] = k;
return this.setCMYK(this.cmyk);
this.rgb = TColor.cmykToRGB(this.cmyk[0],this.cmyk[1],this.cmyk[2],this.cmyk[3]);
this.hsv = TColor.rgbToHSV(this.rgb[0],this.rgb[1],this.rgb[2]);
return this;
},

/*setComponent(AccessCriteria criteria, float val) {
Expand All @@ -413,10 +419,16 @@ TColor.prototype = {
v = h[2];
h = h[0];
}
this.hsv[0] = h;
this.hsv[1] = s;
this.hsv[2] = v;
return this.setHSV(this.hsv);
var newHSV = [h,s,v];
this.hsv[0] = newHSV[0] % 1;
if (this.hsv[0] < 0) {
this.hsv[0]++;
}
this.hsv[1] = MathUtils.clip(newHSV[1], 0, 1);
this.hsv[2] = MathUtils.clip(newHSV[2], 0, 1);
this.rgb = TColor.hsvToRGB(this.hsv[0], this.hsv[1], this.hsv[2]);
this.cmyk = TColor.rgbToCMYK(this.rgb[0], this.rgb[1], this.rgb[2]);
return this;
},

setHue: function(hue) {
Expand Down Expand Up @@ -445,11 +457,11 @@ TColor.prototype = {
b = r[2];
r = r[0];
}
this.rgb[0] = r;
this.rgb[1] = g;
this.rgb[2] = b;
this.cmyk = TColor.rgbToCMYK(this.rgb[0], this.rgb[1], this.rgb[2], this.cmyk);
this.hsv = TColor.rgbToHSV(this.rgb[0], this.rgb[1], this.rgb[2], this.hsv);
this.rgb[0] = MathUtils.clip(r,0,1);
this.rgb[1] = MathUtils.clip(g,0,1);
this.rgb[2] = MathUtils.clip(b,0,1);
this.cmyk = TColor.rgbToCMYK(this.rgb[0], this.rgb[1], this.rgb[2]);
this.hsv = TColor.rgbToHSV(this.rgb[0], this.rgb[1], this.rgb[2]);
return this;
},

Expand All @@ -476,7 +488,7 @@ TColor.prototype = {

toARGB: function() {
return parseInt((this.rgb[0] * 255)) << 16 | parseInt(this.rgb[1] * 255) << 8
| parseInt(this.rgb[2] * 255) | parseInt(this.alpha * 255) << 24;
| parseInt(this.rgb[2] * 255) | parseInt(this._alpha * 255) << 24;
},

toCMYKAArray: function(cmyka) {
Expand All @@ -486,7 +498,7 @@ TColor.prototype = {
cmyka[0] = this.cmyk[0];
cmyka[1] = this.cmyk[1];
cmyka[2] = this.cmyk[2];
cmyka[3] = this.alpha;
cmyka[3] = this._alpha;
return cmyka;
},

Expand All @@ -505,7 +517,7 @@ TColor.prototype = {
hsva[0] = this.hsv[0];
hsva[1] = this.hsv[1];
hsva[2] = this.hsv[2];
hsva[3] = this.alpha;
hsva[3] = this._alpha;
return hsva;
},

Expand All @@ -523,15 +535,15 @@ TColor.prototype = {
rgba[offset++] = this.rgb[0];
rgba[offset++] = this.rgb[1];
rgba[offset++] = this.rgb[2];
rgba[offset] = this.alpha;
rgba[offset] = this._alpha;
return rgba;
},

toString: function(){
return "TColor: rgb: "+this.rgb[0] + ", " +this.rgb[1] + ", "+this.rgb[2]+
" hsv: "+ this.hsv[0] + ","+this.hsv[1]+","+this.hsv[2]+
" cmyk: "+this.cmyk[0] + ", "+this.cmyk[1]+","+this.cmyk[2]+","+this.cmyk[3]+
" alpha: "+this.alpha;
" alpha: "+this._alpha;
},

yellow: function() {
Expand Down Expand Up @@ -629,12 +641,12 @@ TColor.hexToRGB = function(hexRGB,rgb) {
* @return rgb array
*/
TColor.hsvToRGB = function(h, s, v,rgb) {
if(rgb == null)rgb = [];
if(s == 0.0)
{
rgb[0] = rgb[1] = rgb[2] = v;
}
else {
if(rgb == null)rgb = [];
h /= TColor.INV60DEGREES;
var i = parseInt(h);
var f = h - i;
Expand Down
6 changes: 2 additions & 4 deletions src/core/geom/AABB.js
View file
Expand Up @@ -30,15 +30,14 @@ function AABB(a,b)
this.parent.set(new Vec3D());
extent = new Vec3D();
}
if(typeof(a) == "number")
if(a instanceof Number)
{
console.log("Numb");
this.x = 0.0;
this.y = 0.0;
this.z = 0.0;
extent = new Vec3D(b,b,b);
}
if(typeof(b) == "number")
if(b instanceof Number)
{
extent = new Vec3D(b,b,b);
}
Expand Down Expand Up @@ -394,7 +393,6 @@ AABB.prototype.planeBoxOverlap = function(normal, d, maxbox) {


AABB.prototype.setExtent = function(extent) {
console.log("extent typeof: "+typeof(extent));
this.extent = extent.copy();
return this.updateBounds();
}
Expand Down

0 comments on commit 4037866

Please sign in to comment.