P5 convert to Processing problem

p5.js Beginners
1

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 radius = 0; // radius of the base circle
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 radius = 0; // radius of the base circle
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);
}
2

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
3

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