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:

2. import fisica.*;
3. 
   
4. FWorld world;
5. PFont font;
6. 
   
7. ArrayList<Competency> competencies = new ArrayList<Competency>();
8. ArrayList<LearningActivity> learningActivities = new ArrayList<LearningActivity>();
9. 
   
10. String[] competencyNames = 
11. { 
12. "I&C", "IT", "UFP", "SCA", "DBP", "F&S", "T&C", "DRP", "SDCL", "DMM" 
13. };
14. 
    
15. // int numCompetencies = 10;
16. // int numLearningActivities = 10;
17. 
    
18. // int competencySize = 50;
19. // int learningActivitySize = 50;
20. 
    
21. int learningActivityID;
22. 
    
23. void setup()
24. {
25. font = loadFont("Futura-20.vlw");
26. textFont(font, 20);
27. 
    
28. size(600, 600);
29. 
    
30. Fisica.init(this);
31. 
    
32. world = new FWorld();
33. world.setEdges();
34. world.setGravity(0, 0);
35. 
    
36. createCompetencies();
37. loadData();
39. createLearningActivities();
40. 
    
41. textAlign(CENTER);
42. }
43. 
    
44. void draw()
45. {
46. background(255);
47. 
    
48. world.step();
49. world.draw();
50. 
    
51. for (int i = 0; i<competencies.size(); i++)
52. {
53. competencies.get(i).update();
54. }
55. 
    
56. for (int i = 0; i<learningActivities.size(); i++)
57. {
58. learningActivities.get(i).update();
59. }
60. }
61. 
    
62. void loadData()
63. {
64. String[] lines = loadStrings("competencies.csv");
65. for(String line : lines)
66. {
67. String[] pieces = split(line, ';');
68. 
    
69. String name = pieces[0];
70. String type = pieces[1];
71. 
    
72. int[] data = new int[(pieces.length - 2)];
73. 
    
74. for (int i = 2; i<pieces.length; i++)
75. {
76. int j = i - 2;
77. data[j] = int(pieces[i]);
78. }
79. 
    
80. learningActivities.add(new LearningActivity(name, type, data));
81. }
82. }
83. 
    
84. void createLearningActivities()
85. {
86. for (int i = 0; i<learningActivities.size(); i++)
87. {
88. learningActivities.get(i).addJoints();
89. }
90. }
91. 
    
92. void createCompetencies()
93. {
94. for (int i = 0; i<competencyNames.length; i++)
95. {
96. competencies.add(new Competency(competencyNames[i]));
97. }
98. }
99. 
    
100. 
     
101. 
     
102. class LearningActivity
103. {
104. FBox main;
105. ArrayList<FDistanceJoint> joints = new ArrayList<FDistanceJoint>();
106. 
     
107. int[] competencyStrenghts;
108. 
     
109. float x = random(100, 400);
110. float y = random(100, 400);
111. 
     
112. float vX = random(-20, 20);
113. float vY = random(-20, 20);
114. 
     
115. String type;
116. String name;
117. 
     
118. boolean isCentered = false;
119. 
     
120. LearningActivity(String laName, String laType, int[] strenghts)
121. {
122. main = new FBox(50, 50);
123. 
     
124. name = laName;
125. type = laType;
126. 
     
127. main.setPosition(x, y);
128. main.setVelocity(vX, vY);
129. main.setNoStroke();
130. 
     
131. main.setFill(255, 0, 0);
132. 
     
133. competencyStrenghts = strenghts;
134. 
     
135. world.add(main);
136. }
137. 
     
138. void addJoints()
139. {
140. for (int i = 0; i<competencies.size(); i++)
141. {
142. FDistanceJoint j = new FDistanceJoint(main, competencies.get(i).main);
143. 
     
144. if (competencyStrenghts[i] == 0)
145. {
146. j.setNoStroke();
147. joints.add(j);
148. }
149. else 
150. {
151. j.setStrokeWeight(competencyStrenghts[i]);
152. j.setStroke(255, 0, 0, 10);
153. joints.add(j);
154. }
155. 
     
156.    j.setDrawable(true);
157.    j.setFrequency(0.3);
158.    j.setLength(250);
159.    j.setNoFill();
160.    world.add(j);
161. }
162. }
163. 
     
164. void update()
165. {
166. x = main.getX();
167. y = main.getY() + 8;
168. 
     
169. textSize(18);
170. fill(0);
171. text(name, x, y);
172. }
173. 
     
174. void hover()
175. {
176. for (int i = 0; i<joints.size(); i++)
177. {
178. if (competencyStrenghts[i] > 0)
179. {
180. joints.get(i).setStroke(255, 0, 0);
181. competencies.get(i).main.setFill(255, 255, 0);
182. competencies.get(i).circleColor = color(255, 255, 0);
183. competencies.get(i).textColor = color(0);
184. }
185. else 
186. {
187. joints.get(i).setNoStroke();
188. competencies.get(i).main.setFill(0);
189. competencies.get(i).circleColor = color(0);
190. competencies.get(i).textColor = color(255);
191. }
192. }
193. 
     
194. main.setStrokeWeight(5);
195. main.setStroke(255, 0, 0);
196. }
197. 
     
198. void unhover()
199. {
200. for (int i = 0; i<joints.size(); i++)
201. {
202. if (competencyStrenghts[i] > 0)
203. {
204. joints.get(i).setStroke(255, 0, 0, 10);
205. }
206. }
207. 
     
208. main.setNoStroke();
209. }
210. 
     
211. }
212. 
     
213. void mouseMoved() 
214. {
215.   FBody hovered = world.getBody(mouseX, mouseY);
216. 
     
217.   for (int i=0; i<learningActivities.size(); i++) 
218.   {
219.     FBody other = (FBody)learningActivities.get(i).main;
220. 
     
221.     if (hovered == other) 
222.     {
223.       learningActivities.get(i).hover();
224.     } 
225.     else 
226.     {
227.       learningActivities.get(i).unhover();
228.     }
229.   }
230. 
     
231.   if (hovered == null)
232.   {
233.   for (int i = 0; i<competencies.size(); i++)
234.   {
235.   competencies.get(i).circleColor = color(0);
236.   competencies.get(i).textColor = color(255);
237.   competencies.get(i).main.setFill(0);
238.   }
239.   }
240. }
241. 
     
242. class Competency
243. {
244. FCircle main;
245. 
     
246. float x = random(100, 400);
247. float y = random(100, 400);
248. 
     
249. float vX = random(-20, 20);
250. float vY = random(-20, 20);
251. 
     
252. String name;
253. 
     
254. color circleColor;
255. color textColor = color(255);
256. 
     
257. Competency(String competencyName)
258. {
259. name = competencyName;
261. main = new FCircle(50);
262. main.setPosition(x, y);
263. main.setVelocity(vX, vY);
264. main.setFill(0);
265. main.setNoStroke();
266. world.add(main);
267. }
268. 
     
269. void update()
270. {
271. x = main.getX();
272. y = main.getY() + 8;
273. 
     
274. noStroke();
275. fill(circleColor);
276. ellipse(x, y - 8, 50, 50);
277. 
     
278. textSize(20);
279. fill(textColor);
280. text(name, x, y);
281. }
282. }

Like many, I have trouble with making a timer using Processing. I have searched the forum, but could not find an answer that suited my question. (I am quite new to Processing)

I am making a kinect application, and I want to create a button that you can trigger by holding one of your hands over it for two seconds. I have made the following function that checks wether your hand overlaps a specified target area (this is not really important, but good for knowing the context):

2. boolean handOverlapCheck(float targetX, float targetY, float targetWidth, float targetHeight)
3. {
4.   // Check the position of the left hand    
5.   PVector leftHandPos = new PVector();
6.   kinect.getJointPositionSkeleton(userId, SimpleOpenNI.SKEL_LEFT_HAND, leftHandPos);
7.   PVector convertedLeftHandPos = new PVector();
8.   kinect.convertRealWorldToProjective(leftHandPos, convertedLeftHandPos);
9. 
   
10.   // Check the position of the right hand
11.   PVector rightHandPos = new PVector();
12.   kinect.getJointPositionSkeleton(userId, SimpleOpenNI.SKEL_RIGHT_HAND, rightHandPos);
13.   PVector convertedRightHandPos = new PVector();
14.   kinect.convertRealWorldToProjective(rightHandPos, convertedRightHandPos);
15. 
    
16.   if (targetX < convertedLeftHandPos.x && convertedLeftHandPos.x < (targetX + targetWidth) && targetY < convertedLeftHandPos.y && convertedLeftHandPos.y < (targetY + targetWidth))
17.   {
18.     return true;
19.   } else if (targetX < convertedRightHandPos.x && convertedRightHandPos.x < (targetX + targetWidth) && targetY < convertedRightHandPos.y && convertedRightHandPos.y < (targetY + targetWidth))
20.   {
21.     return true;
22.   } else
23.   {
24.     return false;
25.   }
26. }

Now I want to make a check wether the above function is triggered for two seconds without interruption. (Later, I want to accompany that with some visual feedback of this timer-event):

2. if (handOverlapCheck(menuButtonX, menuButtonY, menuButtonWidth, menuButtonHeight) == true)
3.   { 
4.       // magic check wether this event happens for 2 seconds
5.       backgroundLevel = 3;
6.   }  

All I can think of is something along the lines of the following:

2. if (handOverlapCheck(menuButtonX, menuButtonY, menuButtonWidth, menuButtonHeight) == true)
3.   {
4.       int newTimer = millis();
5.       if (mills() - newTimer = 2000)
6.       {
7.           backgroundLevel = 3;
8.       }
9.   }  

But, obviously this won't work, since this keeps updating the newTimer value to the current time. All the variations that I can think of do this. 

And now I find myself thinking in circles... Could someone please help me in a forward direction?

Kind regards,

hajraa