toxiclibs.js

Toxiclibs.js is an open-source computational design library ported to javascript by Kyle Phillips originally written by Karsten Schmidt for Java and Processing. Examples of the original library can be found at http://toxiclibs.org

Toxiclibs.js works great with Canvas, with SVG or any ordinary DOM element. Examples below pair with such fine libraries as: Processing.js, Three.js, or Raphael.js for SVG.

I will be creating an exhibition section soon, if you have used toxiclibs.js and would like it to be included, e-mail information to kyle [at] haptic-data.com, or tweet me.

Examples

Getting Started with Toxiclibs.js

Toxiclibs.js can be used in the following ways:

  • As a single javascript file loaded into a webpage, with the contents of the entire library within a global toxi object.
  • As AMD modules that can be loaded independently or in packages, via RequireJS
  • In Node.js applications, as AMD modules that require the 'requirejs' library for Node.js.

To use as a single javascript file:

//copy the file build/toxiclibs.js into your javascript folder
<script type="text/javascript" src="js/toxiclibs.js"></script>
<script type="text/javascript">
    var myVector = new toxi.geom.Vec2D(window.innerWidth,window.innerHeight).scaleSelf(0.5);
    var myColor = toxi.color.TColor.newRGB(128/255,64/255,32/255);
</script>

To use with RequireJS :

//copy the lib/ contents into your projects folder for loading modules
require(['toxi/geom/Vec2D', toxi/color/TColor], function(Vec2D, TColor){
    var myVector = new Vec2D(window.innerWidth,window.innerHeight).scaleSelf(0.5);
    var myColor = TColor.newRGB(128/255,64/255,32/255);
});

To use with Node.js :

npm install toxiclibsjs

then:

var toxi = require('toxiclibsjs'),
    myVector = new toxi.geom.Ve2D(0.5,0.5),
    myColor = toxi.color.TColor.newRGB(128/255,64/255,32/255);

There are many different ways to use toxiclibs.js. Most of the examples currently use Processing.js and are created using the java-syntax style of the original Processing . This can be helpful to those that are making the transition from Java, but can be confusing to others. I will explain the basics of using toxiclibs.js and the few differences between it and the original toxiclibs .

For comprehensive documentation, read the original libraries javadocs . As the library is still growing, you can compare that documentation to this list of implemented classes.

Toxiclibs.js follows the original package structure

The following objects are returned when loading the entire library

  • color - the color utils package
  • geom - the geometry utils package
  • internals - functionality used within the library
  • math - the math utils package
  • physics2d - the Verlet Physics 2D package
  • processing - the processing package, eases use with Processing.js
  • THREE - features to ease use with Three.js
  • utils - the utils package

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.