Exporting a processing sketch with fisica to a processing.js sketch with box2d

hajraa

Exporting a processing sketch with fisica to a processing.js sketch with box2d

in Processing with Other Languages • 3 months ago

Hi there!

I am completely new to processing.js and wanted to make a sketch for my portfolio website. I made a skech using fisica, only to later find out that external libraries such as fisica are not supported in processing.js. And this is a problem. Luckily fisica is a port for processing from the popular box2d physics, and a port for javascript exists as well!

Unfortunately, I am very unexperienced in javascript, and although my numerous google searches have resulted in some examples of processing.js working with box2d.js ( here and here ), I have absolutely no idea how to change my code to utilize box2d.js to get it to work in a browser...

This question links to a tutorial on the processingjs.org website, which unfortunately does not work anymore...

Is there anyone who can help me out to a good start?

Kind regards,

Nikolai

This is my code:

import fisica.*;
FWorld world;
PFont font;
ArrayList<Competency> competencies = new ArrayList<Competency>();
ArrayList<LearningActivity> learningActivities = new ArrayList<LearningActivity>();
String[] competencyNames =
{
"I&C", "IT", "UFP", "SCA", "DBP", "F&S", "T&C", "DRP", "SDCL", "DMM"
};
// int numCompetencies = 10;
// int numLearningActivities = 10;
// int competencySize = 50;
// int learningActivitySize = 50;
int learningActivityID;
void setup()
{
font = loadFont("Futura-20.vlw");
textFont(font, 20);
size(600, 600);
Fisica.init(this);
world = new FWorld();
world.setEdges();
world.setGravity(0, 0);
createCompetencies();
loadData();
createLearningActivities();
textAlign(CENTER);
}
void draw()
{
background(255);
world.step();
world.draw();
for (int i = 0; i<competencies.size(); i++)
{
competencies.get(i).update();
}
for (int i = 0; i<learningActivities.size(); i++)
{
learningActivities.get(i).update();
}
}
void loadData()
{
String[] lines = loadStrings("competencies.csv");
for(String line : lines)
{
String[] pieces = split(line, ';');
String name = pieces[0];
String type = pieces[1];
int[] data = new int[(pieces.length - 2)];
for (int i = 2; i<pieces.length; i++)
{
int j = i - 2;
data[j] = int(pieces[i]);
}
learningActivities.add(new LearningActivity(name, type, data));
}
}
void createLearningActivities()
{
for (int i = 0; i<learningActivities.size(); i++)
{
learningActivities.get(i).addJoints();
}
}
void createCompetencies()
{
for (int i = 0; i<competencyNames.length; i++)
{
competencies.add(new Competency(competencyNames[i]));
}
}
class LearningActivity
{
FBox main;
ArrayList<FDistanceJoint> joints = new ArrayList<FDistanceJoint>();
int[] competencyStrenghts;
float x = random(100, 400);
float y = random(100, 400);
float vX = random(-20, 20);
float vY = random(-20, 20);
String type;
String name;
boolean isCentered = false;
LearningActivity(String laName, String laType, int[] strenghts)
{
main = new FBox(50, 50);
name = laName;
type = laType;
main.setPosition(x, y);
main.setVelocity(vX, vY);
main.setNoStroke();
main.setFill(255, 0, 0);
competencyStrenghts = strenghts;
world.add(main);
}
void addJoints()
{
for (int i = 0; i<competencies.size(); i++)
{
FDistanceJoint j = new FDistanceJoint(main, competencies.get(i).main);
if (competencyStrenghts[i] == 0)
{
j.setNoStroke();
joints.add(j);
}
else
{
j.setStrokeWeight(competencyStrenghts[i]);
j.setStroke(255, 0, 0, 10);
joints.add(j);
}
j.setDrawable(true);
j.setFrequency(0.3);
j.setLength(250);
j.setNoFill();
world.add(j);
}
}
void update()
{
x = main.getX();
y = main.getY() + 8;
textSize(18);
fill(0);
text(name, x, y);
}
void hover()
{
for (int i = 0; i<joints.size(); i++)
{
if (competencyStrenghts[i] > 0)
{
joints.get(i).setStroke(255, 0, 0);
competencies.get(i).main.setFill(255, 255, 0);
competencies.get(i).circleColor = color(255, 255, 0);
competencies.get(i).textColor = color(0);
}
else
{
joints.get(i).setNoStroke();
competencies.get(i).main.setFill(0);
competencies.get(i).circleColor = color(0);
competencies.get(i).textColor = color(255);
}
}
main.setStrokeWeight(5);
main.setStroke(255, 0, 0);
}
void unhover()
{
for (int i = 0; i<joints.size(); i++)
{
if (competencyStrenghts[i] > 0)
{
joints.get(i).setStroke(255, 0, 0, 10);
}
}
main.setNoStroke();
}
}
void mouseMoved()
{
FBody hovered = world.getBody(mouseX, mouseY);
for (int i=0; i<learningActivities.size(); i++)
{
FBody other = (FBody)learningActivities.get(i).main;
if (hovered == other)
{
learningActivities.get(i).hover();
}
else
{
learningActivities.get(i).unhover();
}
}
if (hovered == null)
{
for (int i = 0; i<competencies.size(); i++)
{
competencies.get(i).circleColor = color(0);
competencies.get(i).textColor = color(255);
competencies.get(i).main.setFill(0);
}
}
}
class Competency
{
FCircle main;
float x = random(100, 400);
float y = random(100, 400);
float vX = random(-20, 20);
float vY = random(-20, 20);
String name;
color circleColor;
color textColor = color(255);
Competency(String competencyName)
{
name = competencyName;
main = new FCircle(50);
main.setPosition(x, y);
main.setVelocity(vX, vY);
main.setFill(0);
main.setNoStroke();
world.add(main);
}
void update()
{
x = main.getX();
y = main.getY() + 8;
noStroke();
fill(circleColor);
ellipse(x, y - 8, 50, 50);
textSize(20);
fill(textColor);
text(name, x, y);
}
}

Replies(1)

antony74

Re: Exporting a processing sketch with fisica to a processing.js sketch with box2d

3 months ago

One piece at a time, starting with an empty .pde file and getting the simpliest box2d sketch your can think of running in your web-browser, then gradually porting little bits of your original sketch accross until finally you have the whole thing working. I'm afraid I find processing.js a lot harder to debug than regular java-mode Processing.

I have done this before:

http://www.openprocessing.org/sketch/74982

https://github.com/Antony74/sketches/tree/master/YinYang

But because I was trying to write something that also ran in java-mode with Rhino, that probably isn't the best place to start.

Best wishes,

Antony

Top Reply