We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Hi everybody,
A few months ago, I create a processing code I want to put it into the web.
It works very nice on sketch so I try to transform it for the web, but it doesn't work.
there is the code that I transform:
var gridw=200;
var gridh=100;
var numpoints=gridw*gridh;
GridPoint [] points=new GridPoint[numpoints];
function setup(){
fullScreen();
background(240,242,242);
for (var i=0;i<gridh;i++){
for(var h=0;h<gridw;h++){
var index=(i*gridw)+h;
points[index]=new GridPoint(new PVector((h*10),i*10));
}
}
fill(0);
noStroke();
}
function draw(){
background(240,242,242);
push();
for (var i=0;i<numpoints;i++){
points[i].update();
points[i].drawPoint();
}
pop();
}
function keyPressed(){
for (var i=0;i<numpoints;i++){
points[i].moveRandom();
}
}
function mouseIsPressed(){
for (var i=0;i<numpoints;i++){
points[i].evadePoint(new PVector(mouseX, mouseY));
}
}
function mouseMoved(){
for (var i=0;i<numpoints;i++){
points[i].evadePoint(new PVector(mouseX,mouseY));
}
}
class GridPoint{
PVector origloc=new PVector();
PVector loc=new PVector();
PVector vel=new PVector();
PVector acc=new PVector();
GridPoint(PVector _origloc){
origloc.set(_origloc);
loc.set(origloc);
vel.set(0,0);
}
function update(){
acc.set(origloc);
acc.sub(loc);
acc.mult(0.01);
//acc.set(loc.sub(origloc));
acc.mult(1);
vel.add(acc);
vel.mult(0.9);
loc.add(vel);
}
function drawPoint(){
push();
translate(loc.x, loc.y);
rect(0,0,5,5);
pop();
}
function moveRandom(){
PVector randomvec=new PVector(random(1,20),0);
randomvec.rotate(random(2*PI));
vel.set(randomvec);
}
function evadePoint(PVector _evadefrom){
PVector evadedir=new PVector();
evadedir.set(loc);
evadedir.sub(_evadefrom);
float newmag=100-evadedir.mag();
if(newmag<0){
newmag=0;
return;
}
evadedir.setMag(newmag);
vel.set(evadedir);
}
}
It's the first time that I try to transform a processing code for the web. So if somebody could help me I would be very nice :)
Thank you!
Answers
Edit your post and get the code formatted properly. At the moment no-one is going to be able to test it ;)
You also need to specify what the problem is with the posted code: does it not run? if so with what error message? or does it just not do what you expect?
thank you blindfish :) I'm sorry for this basic mistake, it's the first time I'm going into a forum...
It's just doesn't run... I really don't know where is the problem!
It'd help immensely if you had posted the original Java Mode code too. ~O)
Classes in JS:
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
A Java Mode sketch example:
https://forum.Processing.org/two/discussion/15064/how-to-avoid-crossing-borders-in-a-random-polygon#Item_12
And its corresponding p5.js converted version:
https://forum.Processing.org/two/discussion/15064/how-to-avoid-crossing-borders-in-a-random-polygon#Item_16
You can watch it online too:
http://p5js.ProcessingTogether.com/sp/pad/export/ro.RmWK6w2aY9t
@flouflou92: are you trying to get this to run with p5js? You've still got a lot of Java style variable declarations in your code - e.g. GridPoint [] points=new GridPoint[numpoints];
With p5js you're going to have to rewrite all those in JS syntax...
Almost forgot it: This tutorial is extremely useful: :-B
https://GitHub.com/processing/p5.js/wiki/Processing-transition
Thank you very much! I will check every links... :)