We are about to switch to a new forum software. Until then we have removed the registration on this forum.
**Hey there, I'm quite new to coding, i started with processing half a year ago, here i'm trying to get a p3 sketch working in p5.js,
I replaced ints and floats by "var", PVector by "Vector" and "createVector". The editor didn't return any error but still it's not working.
It didn't seem that hard to me and it probably isn't, heres the working sketch in p3: Any suggestions?**
int numPoints = 10;
PVector[] points = new PVector[numPoints];
PVector[] targetPoints = new PVector[numPoints];
float ease = 0.07;
void setup()
{
size(displayWidth, displayHeight);
for(int i = 0; i < numPoints; i++)
{
points[i] = new PVector(random(width), random(height));
targetPoints[i] = new PVector(random(width), random(height));
}
}
void draw() {
smooth();
background(243,239,232,1);
fill(255, 0, 0, 100);
noStroke();
strokeWeight(0.5);
for(int i = 0; i < numPoints; i++) {
float xdist = targetPoints[i].x - points[i].x;
float ydist = targetPoints[i].y - points[i].y;
points[i].x += xdist/2 * ease;
points[i].y += ydist/2 * ease;
float distance = xdist/2*xdist/2 + ydist/2*ydist/2;
if(distance <= 20)
{
points[i].x = targetPoints[i].x;
points[i].y = targetPoints[i].y;
targetPoints[i].x = (mouseX + random(-150, 150));
targetPoints[i].y = (mouseY + random(-150, 150));
}
fill(205,106,104, 200 - distance*ease);
ellipse(points[i].x, points[i].y, 10, 10);
}
for(int i = 0; i < numPoints - 1; i++)
{
for(int j = i + 1; j < numPoints; j++)
{
float dst = dist( points[i].x, points[i].y, points[j].x, points[j].y );
if ( dst < 255 ) {
stroke( 205,106,104, 255 - dst );
line(points[i].x, points[i].y, points[j].x, points[j].y);
}
}
}
}
Answers
https://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text
https://GitHub.com/processing/p5.js/wiki/Processing-transition
It's easier if you also post the one you've tried to convert so we can see if you forgot something.
I've tried to convert to p5.js and it seems to work fine. What do you mean by it's not working, it's not drawing anything or the result is different from the Processing one?
If the result is different it's probably because of the background alpha.
On processing, background replaces all of the pixels with the chosen color, so it will always cover everything that was on the screen. And it isn't possible to apply transparency to the main drawing surface so the 1 is not doing anything.
On p5.js, background covers all of the pixels with the chosen color, so if you apply transparency it won't completely cover what was on the screen.
By the way, smooth() is active by default on p5.js so you don't need it. And it should be right after size on Processing 3.
Hey, thanks for the detailed answer, i'm suretheres a lot of mistakes in what i tried:
i actually wasn't sure how to fix the first 4 lines
could you show me the version you did?
Just change lines 2 and 3 to:
It will create the variables as empty arrays.
Well, I've made some tweaks at the original Java Mode sketch. You can watch it online below: =P~
http://studio.ProcessingTogether.com/sp/pad/export/ro.9lMOG-RZX8JDk
Just finished transpiling my tweaked version to p5.js. You can watch it at both these links: :-bd
And lastly, for completeness' sake, the same sketch now in Python Mode: >-)
Dude, this is really cool, thanks! Still a bit embarrassing considering the fact that it took me two weeks to make this (my first) working p3 sketch.
Hey Barbara, thanks for the detailed suggestions, it's really constructive, i'll try it out now.