Toxiclibs was originally written by Karsten Schmidt for Java and Processing and is being ported to javascript by Kyle Phillips.
Toxiclibs.js works great with Canvas, SVG or any DOM element. Examples below pair with such fine libraries as: Processing.js, Three.js, or Raphael.js for SVG.
Toxiclibs.js can be used in the following ways:
toxiclibs.js in your page and access with a global toxi object.build/ :<script type="text/javascript" src="js/toxiclibs.min.js"></script>
<script type="text/javascript">
var myVector = new toxi.geom.Vec2D( 2, 3 ).scaleSelf(0.5);
var myColor = toxi.color.TColor.newRGB(128/255,64/255,32/255);
</script>lib/:require([
'toxi/geom/Vec2D',
'toxi/color/TColor'
],function( Vec2D, TColor ){
var myVector = new Vec2D( 2, 3 ).scaleSelf(0.5);
var myColor = TColor.newRGB(128/255,64/255,32/255);
});npm install toxiclibsjs
var toxi = require('toxiclibsjs'),
myVector = new toxi.geom.Vec2D(0.5,0.5),
myColor = toxi.color.TColor.newRGB(128/255,64/255,32/255);
The top-level of toxi contains the following objects:
color - the color utils packagegeom - the geometry packageinternals - functionality used within the librarymath - the math utils packagephysics2d - the Verlet Physics 2D packageprocessing - the processing package, eases use with Processing.jsTHREE - features to ease use with Three.jsutil - the util packageFor comprehensive documentation, read the original javadocs.
If you are working with the build/ files you may wish to create a custom build
that only includes the modules you are using in order to reduce file size.
If you are using the files as AMD modules there is no need for this.
To generate a custom build, space-delimit the modules you want:
./bin/toxiclibsjs --include "toxi/geom/Vec2D toxi/physics2d" --minify --out "./build/toxiclibsjs-custom.min.js"
There are several areas where toxiclibs.js stands apart to remain more idiomatic and helpful in the javascript environment. For a complete description of the conveniences added to toxiclibs.js, read the sugar file in the repository. Some examples of these differences are:
instanceof tests are ever usedtoxi.THREE.ToxiclibsSupport for easing work with Three.jstoxi.color.TColor additions for complete interoperability with CSS and X11 color names.toxi.geom.mesh.OBJWriter‘s getOutput() for getting OBJ contents back as a string (helpful in js environments that don’t have file system access).The Java version frequently uses Collections, Iterators, and java-specific for-loops[2]. In toxiclibs.js you will see a standard JavaScript usage of arrays. Below is an example of accessing the faces from a TriangleMesh:
var len = mesh.faces.length, i = 0;
for(i = 0; i < len; i++){
doSomething( mesh.faces[i] );
}This section will occassionally be expanded on. If you have a suggestion, or have a question on how something works, feel free to leave an issue and I am quick to respond.
Many of the constructors and other functions have additional support for option objects. For example:
//any object with an `x` and `y` will work
var vec = new toxi.geom.Vec2D({ x: 0.5, y: 0.25 });
var map = new toxi.math.ScaleMap({
input: { min: 0, max: 100 },
output: { min: -1, max: 1}
});
var mesh = sphere.toMesh({
mesh: new toxi.geom.mesh.TriangleMesh('sphere'),
resolution: 20
});