I saw someone ask this question 2 years ago.

Is the 3D part now ported into js?

Hi, I was wondering if importing and exporting to STL are supported in toxiclibs.js?
Thanks!

Hi!
When I initialize a ParticleString2D this way:
ParticleString2D(VerletPhysics2D physics, java.util.List<VerletParticle2D> plist, float strength)

Then println(physics.particles.length); or println(physics.springs.length); returns 0.
Is the constructor not yet implemented or am I doing something wrong?

The other way works perfectly:
ParticleString2D(VerletPhysics2D physics, toxi.geom.Vec2D pos, toxi.geom.Vec2D step, int num, float mass, float strength)

Why do I want to use this constructor? The particles in java.util.List<VerletParticle2D> plist have specific coordinates. This way i'm not constricted to using toxi.geom.Vec2D step and toxi.geom.Vec2D pos for the positioning of the particles.

Cheers

I can't seem to find toxiclibs voronoi in the package, is there a plan to add this to the library?

I've ported over the GeometryInStyle from toxiclibs examples (http://www.openprocessing.org/sketch/8914), and got it mostly working in toxiclibsjs by simply fetching the correct function prototypes/objects.

It does partially work in Chrome, but Firefox and Safari won't run due to some null points or missing objects.

In Chrome, it rotates, but the surface isn't shaded, or when it does, it is inconsistent. Could have more to do with processing.js (1.4.1) that toxiclibs.js, but I think it's a good focus point to help resolve browser issues, and inconsistencies. I can zip up the entire folder/site, but for now, below is the pjs code port, and screen attachment.

}


Hey,

it would be great to have the namespaces of the JS and Java versions be in sync. That way you could easily wander between worlds without much changes.

Currently you have:
toxi.Line2D --> JS
toxi.geom.Line2D --> Java

This is especially important when using Processing.js which is supposed to run the exact same (core API) code that runs in standard Processing.

Thanks
F

i cant seem to find parts of the original toxiclibs like volumetricbrush, boxbrush, volumetricspacearray etc. if you dont know what I'm talking about ill elaborate.
[[selfie-placeholder-0]]

Only 2D version seemed to be implemented.

Hi,

Usually people want packages maintained even for websites. Please, include build/ directory in the npm package, so people can use it with web.

TColor

• can't implement alpha() because property alpha exists
• how to implement analog(int angle, float delta) when there is already analog(float theta, float delta)
• shouldnt black() be this.cmyk[3]?
• how to implement getAnalog() same problem
• getHue() requires Hue class implemented
• getRotateRYB() theta or angle?
• hashCode()?
• isPrimary() requires Hue
• rotateRYB() theta / angle
• setComponent() requires AccessCriteria class

I am trying to debug my modified version of the example ''Attraction2D_pjs.html'.[https://github.com/hapticdata/toxiclibsjs/blob/master/examples/Attraction2D_pjs.html] using firebug console in web browser.
I can access the processing instance using the global variable 'Processing.instances[0]' as stated in [http://processingjs.org/articles/jsQuickStart.html#accessingprocessingfromjs].
I can access all the functions as Processing.instances[0].setup, but can't access the top level variables like 'VerletPhysics2D physics'.

Can you explain or where can I read about how processing.js converts processing code to javascript ?

To be specific, I need to check some properties for some particles at specific times. Using console.log floods the console.
How did you debug the examples you have written?

I think processing js is awesome! But I can't see what I'm doing wrong, maybe it's a bug? I'm using Chrome on a Mac and writing my code into a .pde.
This won't work:

var ColorGradient = toxi.color.ColorGradient;
ColorGradient grad = new ColorGradient();

I get the error: "Uncaught Processing.js: Unable to execute pjs sketch: TypeError: undefined is not a function processing.js:13
X processing.js:13
R.V.onreadystatechange"

But sth. like this works just fine:

var Vec2D = toxi.geom.Vec2D;
Vec2D v = new Vec2D(2.0,3.0);

Is there any fix?

It looks like maybe the second level of arrays in the 2d array also needs to be initialized before they are accessed. otherwise they are undefined.

var BezierPatch = function(points){
this.points = (points === undefined)?[] : points;
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
this.points[i][j] = new Vec3D();
}
}
};

Have you ever thought to add typing for Typescript?

The following code does not appear to work. A particle that encounters a RectConstraint appears in a seemingly random spot.

import processing.opengl.*;

import toxi.physics2d.constraints.*;
import toxi.physics2d.*;
import toxi.physics2d.behaviors;

import toxi.geom.*;
import toxi.math.*;

VerletPhysics2D physics;
VerletParticle2D p1;
Rect rect1;


void setup() {
  size(960,720);
  smooth();
  physics = new toxi.physics2d.VerletPhysics2D();
  physics.setWorldBounds(new toxi.Rect(0, 0, width, height));
  physics.addBehavior(new toxi.physics2d.GravityBehavior(new toxi.Vec2D(0, 1)));
  physics.setDrag(0.5);

  p1 = new toxi.physics2d.VerletParticle2D(20, 20, 1);

  // CircularConstraint works
  physics.addParticle(p1);
  p1.addForce(new toxi.Vec2D(.5,.5));
  toxi.physics2d.VerletPhysics2D.addConstraintToAll(new toxi.physics2d.CircularConstraint(new toxi.Vec2D(100,100),45), physics.particles);

  // RectConstraint does not 
  rect1 = new toxi.Rect(10, 200, 200, 100);
  RectConstraint rectConstraint = new toxi.physics2d.RectConstraint(rect1);
  rectConstraint.setBox(rect1);
  toxi.physics2d.VerletPhysics2D.addConstraintToAll(rectConstraint, physics.particles);
}

void draw() {
  physics.update();
  background(0);

  stroke(255, 100);
  noFill();
  ellipse(100, 100, 90, 90);
  rect(rect1.x, rect1.y, rect1.width, rect1.height);

  fill(255, 0, 0);
  ellipse(p1.x,p1.y,10,10);
}

void mousePressed() {
  p1.set(mouseX, mouseY).clearVelocity();
}

An working example can be seen at http://www.fisharefriends.us/demo/webgl/2d_2.html

I am new to require.js. Can you provide some guidelines on how to build toxiclibsjs ?

Is it possible to create a grid like the one here? http://www.openprocessing.org/visuals/?visualID=9151

What i want is the same camera view, the grid itself without the planet. Instead of collapses at the surface i will use elevations instead? If it is possible which classes will help me to construct it? Thank you.

I'm trying to use toxiclibs with processing.
I'm writing processing javascript code so I'm not using pde files but javascript.
Like in this exemple https://gist.github.com/1428008 taken from the processing website.

How can I integrate toxiclibs in there ?
I added the toxiclibs.js file but when doing

new toxi.Rect(x * cell_size, y * cell_size, cell_size, cell_size);

nothing happens.

I suspect I need to initialize toxi but nothing worked so far.

Any idea ?

May want to help you port that over, traer.js is frustrating.

Currently there is a circular dependency issue between toxi.geom.mesh.SurfaceMeshBuilder and toxi.geom.Sphere in the toxiclibs.js or toxiclibs.min.js builds. This can cause toxi.geom.Sphere#toMesh to fail.

Hey,

Found this odd result while working on a simple canvas game.

var line1 = new toxi.geom.Line2D(
  new toxi.geom.Vec2D({x: 280, y: 319}),
  new toxi.geom.Vec2D({x: 280, y: 332}));

var line2 = new toxi.geom.Line2D(
  new toxi.geom.Vec2D({x: 280, y: 75}),
  new toxi.geom.Vec2D({x: 280, y: 325}));

var intersection = line1.intersectLine(line2);

console.log(intersection);

intersection.type is null.

Looking at the Line2D code on line 149 there's the following:

isec = new Line2D.LineIntersection(Type.COINCIDENT_NO_INTERSECT, undefined);

but Type.COINCIDENT_NO_INTERSECT isn't declared. I'd guess that's where the null is coming from.

The javascript version of TriangleMesh behaves differently then the Java version. It contains duplicate vertices. The checkVertex command is functioning differently. In Java it used the Vertex.equals method to know something is the same when placing it into the vertices property. This checks that if x,y,z of two vertices are equal. It looks like the javacript version is checking the id.

This leads to objects with many more vertices then necessary so they render slower. But it doesn't seem to cause any visual problems.

I haven't thought of a good solution besides a linear search through the vertices. Java used a LinkedHashMap to solve this. My Javascript is not terribly strong so I don't know if the language has a similar construct already available.

Hi
I'm trying to removeBehavior of a particle but don't find the way to call the function properly.
physics.removeBehavior(this.AttractionBehavior());

How can I find this Attractor?
Thanks for the help
David

getComponent()
how to implement hasCode()?
setComponent()?

because properties x,y and z exist, x(), y() and z() can not be implemented

Hi there,

I've been having some troubles with Ellipse.containsPoint today. It doesn't seem to be working in 0.3.2. Same result in the latest of both chrome and firefox.

let ellipse = new toxi.geom.Ellipse(100, 100, 20, 50);
console.log(ellipse.containsPoint(new toxi.geom.Vec2D(100, 100)));
console.log(ellipse.containsPoint(new toxi.geom.Vec2D(110, 110)));
console.log(ellipse.containsPoint(new toxi.geom.Vec2D(90, 90)));
console.log(ellipse.containsPoint(new toxi.geom.Vec2D(100, 60)));

Output:

false
false
false
false

After calling toPolygon2D on that ellipse, and using the poly result the other hand:

let asPoly = ellipse.toPolygon2D(20);
console.log(asPoly.containsPoint(new toxi.geom.Vec2D(100, 100)));
console.log(asPoly.containsPoint(new toxi.geom.Vec2D(110, 110)));
console.log(asPoly.containsPoint(new toxi.geom.Vec2D(90, 90)));
console.log(asPoly.containsPoint(new toxi.geom.Vec2D(100, 60)));

Output:

true
true
true
true

Vec3D

• getComponent()? does it need to be there? means creating Axis class
• how to implement hasCode()?
• setComponent()?
• toArray and toArray4 could use typed arrays
• cant implement x() y() or z() because properties x,y,z exist

creating a ZoomLensInterpolation objects generates the following error:

Processing.js: Unable to execute pjs sketch: ReferenceError: Can't find variable: lenPos.

was looking to port word histogram to toxiclibs.js

The current version of require.js loads modules asynchronously meaning all tests executed before toxi has been populated by index.js.

Best, Ross

RectConstraint constructor gives Uncaught ReferenceError.
Solved adding

var Vec2D = require('../../geom/Vec2D');
var Ray2D = require('../../geom/Ray2D');

and modifying:

this.intersectRay = new Ray2D(this.rect.getCentroid(), new Vec2D());

Works for me.

Spline3D.computeVertices method produces duplicate vertices at spline's control points unlike Java version. Another difference is the number of segments in between control points, which is one less then resolution.

AABB

• fromMinMax requires Vec3D.interpolateTo
• getNormalForPoint requires Vec3D.X_AXIS
• includePoint() requires Vec3D.interpolateTo()
• intersectsRay() requires Ray3D
• intersectsSphere() requires Sphere
• intersectsTriangle3D() requires Triangle3d()
• toMesh() requires Mesh3D()

Hello,
Seeing the title and examples, I was hoping this library would support operatings on 3D geometry such as polyhedra. I'm excited to see that operations like subdivision are supported.
However, it seems that the only kind of 3D polygons supported are triangles.
Is there any plan to support meshes (surfaces) with squares, pentagons, or n-gons in general?

Thanks...

Hi!
I'm wondering how to extend a taxi class. My reference is something like this:
How can I replicate this on processing.js? (I know is a very basic question)
Thanks

David

class Particle extends VerletParticle2D {

float r = 40;
String name = new String("name");
String myText = new String("no text");
String geo = "none";

String nCat = new String(" ");
String nCas= new String(" ");
String nEng= new String(" ");
String tCat= new String(" ");
String tCas= new String(" ");
String tEng= new String(" ");
String iCat= new String("Empty");
String iCas= new String("Empty");
String iEng= new String("Empty");

int id;
int subId;
int myGroup;
Boolean on = true;
float thisAlpha = 255;
Boolean hide = false;
Boolean dragged = false;
PVector min;
PVector max;
Vec2D velChange;
float easing = 0.25;
float change;
float w;
float h;
Boolean active = true;
Boolean hub = false;
color myColor = color(0, 183, 234);
color hubColor = color(250, 150, 50);
ArrayList myNodes;

Particle (Vec2D loc) {
super(loc);
change = 0.5;
myNodes = new ArrayList();
}

void display() {
textAlign(CENTER);
if (lenguages == 1) {
name = nEng;
myText = tEng;
}
if (lenguages == 2) {
name = nCat;
myText = tCat;
}
if (lenguages == 3) {
name = nCas;
myText = tCas;
}
float ch = (hide)? 0:255.0;
thisAlpha += (ch-thisAlpha)_easing;
r = map(thisAlpha, 0.0, 255, 1, 37);
textFont(myFont, 23);
if (thisAlpha > 0.01) {
pushMatrix();
translate(x, y, 0);
noStroke();
//fill(200, 50);
//rect(-name.length()_4-14, -h/2, w, h, 10);
color paiting = ((hub)? hubColor:myColor);
fill(red(paiting), green(paiting), blue(paiting), thisAlpha*0.85);
ellipse(0, 0, r, r);
fill(255, thisAlpha);
text(name, 0, 7);
//text(id, 0, -26);
popMatrix();
}
}

void setName(String inName) {
name = inName;
w = name.length()*10+5;
h = 18;
}

void setText(String inText) {
myText = inText;
}

void setGeo(String inGeo) {
geo = inGeo;
}
void move() {
velChange = new Vec2D(random(-0.15, 0.15), random(-0.15, 0.15));
this.addVelocity(velChange);
stroke(255, 150, 0, thisAlpha);
pushMatrix();
translate(x, y, 0);
noFill();
//rect(-name.length()*4-14, -h/2, w, h, 10);
popMatrix();
}

void contact(Particle b) {
if (active) {
// Calculate the bottom-right corners of the boxes.
float myX2 = x + w;
float myY2 = y + h;
float otherX2 = b.x + b.w;
float otherY2 = b.y + b.h;
// If this box is entirely to the left of box b, then there is no collision.
if (x < b.x && myX2 < b.x) return;
// If this box is entirely to the right of box b, then there is no collision.
if (x > otherX2 && myX2 > otherX2) return;
// If this box is entirely above box b, then there is no collision.
if (y < b.y && myY2 < b.y) return;
// If this box is entirely below box b, then there is no collision.
if (y > otherY2 && myY2 > otherY2) return;
// If we reach this point, the boxes haven't missed each other.
// Therefore, there must be a collision.
move();
}
}

void setName(float inName) {
String oneName = nf(inName, 2, 2);
name = oneName;
}

void setRadio(float myRadio) {
r = myRadio;
}

void setColor(color inColor) {
myColor = inColor;
}
void isClicked() {
on =! on;
}

int getId() {
return id;
}
}

as referenced in #24 with require.js v2.0+ in node, the loaded modules are being added asynchronously causing a delay before the objects are available and making tests fail.

For the time being require.js is version-locked at 1.0 and continues to work. Another solution is needed for making the modules synchronously available in node. Perhaps using millermedeiros/nodefy