# P5 convert to Processing problem

hello guys!
Recently I am rewriting a p5js code to Processing but there is a strange problem. I have checked that the data is normal, but Processing cannot update the status of the screen in real time. It seems that the status will only change once a second. Can you help me?

p5js code

``````// By Roni Kaufman

let kMax; // maximal value for the parameter "k" of the blobs
let step = 0.01; // difference in time between two consecutive blobs
let n = 100; // total number of blobs
let inter = 0.05; // difference of base radii of two consecutive blobs
let maxNoise = 500; // maximal value for the parameter "noisiness" for the blobs

//let noiseProg = (x) => (x);

function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 1);
angleMode(DEGREES);
noFill();
//noLoop();
kMax = random(0.6, 1.0);
noStroke();
}

function draw() {
background(0, 0, 0);
let t = frameCount/100;
for (let i = n; i > 0; i--) {
let alpha = 1 - (i / n);
fill((alpha/5 + 0.75)%1, 1, 1, alpha);
let size = radius + i * inter;
let k = kMax * sqrt(i/n);
//console.log(sqrt(i/n) );
let noisiness = maxNoise * (i / n);
//  console.log(t - i * step);
blob(size, width/2, height/2, k, t - i * step, noisiness);
}
}

// Creates and draws a blob
// size is the radius (before noise) of the base circle
// (xCenter, yCenter) is the position of the center of the blob
// k is the tightness of the blob (0 = perfect circle, higher = more spiky)
// t is the time
// noisiness is the magnitude of the noise (i.e. how far it streches out)
function blob(size, xCenter, yCenter, k, t, noisiness) {
beginShape();
//stroke(255,0,0);
let angleStep = 360 / 10;
for (let theta = 0; theta <= 360 + 2 * angleStep; theta += angleStep) {
let r1, r2;
/*
if (theta < PI / 2) {
r1 = cos(theta);
r2 = 1;
} else if (theta < PI) {
r1 = 0;
r2 = sin(theta);
} else if (theta < 3 * PI / 2) {
r1 = sin(theta);
r2 = 0;
} else {
r1 = 1;
r2 = cos(theta);
}
*/
r1 = cos(theta)+1;

r2 = sin(theta)+1; // +1 because it has to be positive for the function noise
console.log(r1,r2);
let r = size + noise(k * r1,  k * r2, t) * noisiness;
let x = xCenter + r * cos(theta);
let y = yCenter + r * sin(theta);
curveVertex(x, y);

}
endShape();
}
``````

processing code

``````// By Roni Kaufman

float kMax; // maximal value for the parameter "k" of the blobs
float step = 0.01; // difference in time between two consecutive blobs
int n = 100; // total number of blobs
float inter = 0.05; // difference of base radii of two consecutive blobs
float maxNoise = 500; // maximal value for the parameter "noisiness" for the blobs

//let noiseProg = (x) => (x);

void setup() {
size(1000, 1000,P3D);
colorMode(HSB, 1);
//angleMode(DEGREES);
noFill();

//noLoop();
kMax = random(0.6, 1.0);
noStroke();
}

void draw() {
// println(frameRate);
background(0.6, 0.75, 0.25);
int t = frameCount/100;
for (int i = n; i > 0; i--) {
float alpha = 1 - ((float)i/n);
fill((alpha/5 + 0.75)%1, 1, 1, alpha);
float size = radius + (float)i * inter;
float k = kMax * (float)sqrt((float)i/n);
float noisiness = maxNoise * ((float)i / n);
//println( t - i * step);
blob(size, width/2, height/2, k, t - i * step, noisiness);
}
// println(frameCount);
}

// Creates and draws a blob
// size is the radius (before noise) of the base circle
// (xCenter, yCenter) is the position of the center of the blob
// k is the tightness of the blob (0 = perfect circle, higher = more spiky)
// t is the time
// noisiness is the magnitude of the noise (i.e. how far it streches out)
void blob(float size, float xCenter, float yCenter, float k, float t, float noisiness) {

beginShape();
//stroke(255,0,0);
int angleStep = 360 / 10;
for (int theta = 0; theta <= 360 + 2 * angleStep; theta += angleStep) {
float r1, r2;
/*
if (theta < PI / 2) {
r1 = cos(theta);
r2 = 1;
} else if (theta < PI) {
r1 = 0;
r2 = sin(theta);
} else if (theta < 3 * PI / 2) {
r1 = sin(theta);
r2 = 0;
} else {
r1 = 1;
r2 = cos(theta);
}
*/

r1 = cos(degrees(theta))+1;
r2 = sin(degrees(theta))+1; // +1 because it has to be positive for the function noise
float r = size + noise(k * r1,  k * r2, t) * noisiness;
float x = xCenter + r * cos(degrees(theta));
float y = yCenter + r * sin(degrees(theta));
curveVertex(x, y);
if(theta ==36)
println(x,y);
}
endShape(CLOSE);
}
``````

Maybe b/c you’re dividing frameCount by an integer here?

In Java if both division’s operands are whole values, the result is also a whole value. The fractional part is removed from the result!

As a workaround, declare variable t as float and place a trailing dot at the number `100`, so it becomes a fractional value, and thus we have a fractional division:
`float t = frameCount/100.;`

2 Likes

thank you very much! These details are a real headache. . .