Toxiclibsjs
Toxiclibsjs is a library for computational design tasks with JavaScript. This library is a port of http://toxiclibs.org for java and processing.
Install / Use
/learn @hapticdata/ToxiclibsjsREADME
Toxiclibsjs
an open-source library for computational design tasks with JavaScript.
Toxiclibs.js is a port of Karsten Schmidt's Toxiclibs for Java and Processing. Toxiclibs.js provides powerful datatypes for the browser and node. It works well for manipulating any DOM element, including Canvas and SVG.
The plethora of examples demonstrate its use for geometry and color manipulation as well as physics, automata and more. The examples pair with such fine libraries as: Processing.js, Three.js, D3.js or Raphael.js.
What it is…
- 2D/3D geometry
- Mesh generation and subdivision
- Interpolation / Mapping
- Wave Generators
- 2D physics simulation
- Color theory sorting and conversion
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 or Browserify applications, through NPM as commonjs modules.
Use the build
copy the file build/toxiclibs.js:
<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>
Use with RequireJS or other AMD loader
copy the contents of lib/:
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);
});
Use with Node.js:
npm install toxiclibsjs
then:
var toxi = require('toxiclibsjs'),
myVector = new toxi.geom.Vec2D(0.5,0.5),
myColor = toxi.color.TColor.newRGB(128/255,64/255,32/255);
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 (view doc)
- 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
Creating Builds
Run make to generate new versions of the existing builds. There are additional targets defined in the Makefile
Custom builds
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 save 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"
Run the tests
Run make test to run the suite of tests.
Contributing
Contributions to toxiclibs.js are appreciated, please read more here
Toxiclibs.js was initiated on 1/5/2011 by Kyle Phillips http://haptic-data.com
This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version.
http://creativecommons.org/licenses/LGPL/2.1/
This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301, USA
Related Skills
diffs
337.1kUse the diffs tool to produce real, shareable diffs (viewer URL, file artifact, or both) instead of manual edit summaries.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
1.8kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
ui-ux-pro-max-skill
51.5kAn AI SKILL that provide design intelligence for building professional UI/UX multiple platforms



