Calling a String in Processing

Question

I'm new to processing/java/code but was hoping for some help with my sketch.

I am trying to create an ink-looking sketch, with letters/characters displayed, then faded out instead of particles themselves. Inspired by https://openprocessing.org/sketch/1576908 I've run into errors with the entire particle constructor with an error on the line void update(p):

  //update the velocity and location of particle
  void update(p){
    this.acceleration.add(createVector((noise(this.location.x)*2-1), (noise(this.location.y)*2-1)));
    this.velocity.add(this.acceleration);
    this.acceleration.set(0,0);
    this.location.add(this.velocity);
    this.alpha -= this.rate ;
    // here is the recursion condition
    if(this.alpha<=this.palpha*0.25 && this.palpha>10) {
      p.push(new particle(this.location.x, this.location.y, this.rate*0.25, this.palpha*0.5));
    }
  }

Here is my full code

Thank you!

String[] particles = {"a", "b", "c", "d"} ; //string of particles
int velocity;
int acceleration;
int location;
int alpha;
int p;

void setup() {
  size(600, 600);
  background(255);
}

void draw() {
  if(mousePressed)  {
    // spawn a new particle and add it to the array
    particles.push(text(particles, mouseX, mouseY, 75)); 
    textSize(random(20, 40));
  }
  // update and show the particles
  for(int i=particles.length-2; i>=0; i--) {
    particles[i].update(particles);
    particles[i].show();
     if(particles[i].alpha<=2) particles.splice(i, 5); // remove the dead particle
  }
}

//particle class
class particle{
  
  //constructor called when creating an instance of this class
  // x & y are the location, r is the rate of decay, a is the starting alpha value
  particle(float x, float y, float r, float a){
    this.location = createVector(x,y) ;
    this.velocity = createVector(random(-1,1),random(-1,1));
    this.acceleration = createVector();
    this.alpha = this.palpha=a ;
    this.amp=4; // size of the particle
    this.rate = r;
  }
  
  //update the velocity and location of particle
   void update(p){
    this.acceleration.add(createVector((noise(this.location.x)*2-1), (noise(this.location.y)*2-1)));
    this.velocity.add(this.acceleration);
    this.acceleration.set(0,0);
    this.location.add(this.velocity);
    this.alpha -= this.rate ;
    // here is the recursion condition
    if(this.alpha<=this.palpha*0.25 && this.palpha>10) {
      p.push(new particle(this.location.x, this.location.y, this.rate*0.25, this.palpha*0.5));
    }
  }
  
  //show the particles
  void show(){
    noStroke() ;
    fill(0,35,25, this.alpha) ;
    ellipse(this.location.x, this.location.y, this.amp);
  }
} // end particle class```

Answer 1

You have at least two separate questions here:

• how to port the p5.js sketch to Processing ?
• how to add text for each particle ?

In the future I recommend breaking the problem down to simpler/shorter problems that can be tackle independently.

How let's look at the syntax errors Processing presents:

1.

particles.push(text(particles, mouseX, mouseY, 75)); 
    

errors with

The function "text()" expects parameters like: "text(int, float, float, float)"

The issue here is slightly masked. It looks like instead of calling text(yourTextString, yourTextX, yourTextY); you have different parameters. In reality there are two issues here:

• push() is JavaScript Array's function. You need to use an ArrayList and its add() method instead in Processing (Java).
• currently the particle class doesn't handle text. You can add a String text property which you can supply with a modified contructor: Particle(float x, float y, float r, float a, String text) (and you'd assign the constructor argument to the instance property (e.g. this.text = textl)

2. createVector exists in p5.js. In Processing you can switch this to new PVector(). Additionally you need to declare the variables initialised in the constructor as part of the class (e.g. location, velocity, acceleration, alpha, palpha, amp, rate).
3. ellipse(this.location.x, this.location.y, this.amp); is missing the last argument: ellipse(this.location.x, this.location.y, this.amp, this.amp);

This is a modified version of your code with the above notes applied:

// original sketch by OpenProcessing user Prasad
// https://openprocessing.org/sketch/1576908

String[] particlesText = {"a", "b", "c", "d"} ; //string of text
// array of particles
ArrayList<Particle> particles = new ArrayList<Particle>();
int velocity;
int acceleration;
int location;
int alpha;
int p;

void setup() {
  size(600, 600);
  background(255);
}

void draw() {
  if(mousePressed)  {
    // spawn a new particle and add it to the array
    // use % to loop over text (e.g .a,b,c,d,a...etc)
    int textIndex = particles.size() % particlesText.length;
    // grab the text from the array
    String text = particlesText[textIndex];
    // add a new particle providing text as well 
    particles.add(new Particle((float)mouseX, (float)mouseY,5.0, 75.0, text)); 
    textSize(random(20, 40));
  }
  // update and show the particles
  for(int i=particles.size()-2; i>=0; i--) {
    Particle particle = particles.get(i);
    particle.update(particles);
    particle.show();
     if(particle.alpha<=2) particles.remove(i); // remove the dead particle
  }
}

//particle class
class Particle{
  
  PVector location;
  PVector velocity;
  PVector acceleration;
  
  float alpha;
  float palpha;
  float amp;
  float rate;
  String text = "";
  
  //constructor called when creating an instance of this class
  // x & y are the location, r is the rate of decay, a is the starting alpha value
  Particle(float x, float y, float r, float a, String text){
    this.location = new PVector(x,y) ;
    this.velocity = new PVector(random(-1,1),random(-1,1));
    this.acceleration = new PVector();
    this.alpha = this.palpha=a ;
    this.amp=4; // size of the particle
    this.rate = r;
    this.text = text;
  }
  
  //update the velocity and location of particle
   void update(ArrayList<Particle> p){
    this.acceleration.add(new PVector((noise(this.location.x)*2-1), (noise(this.location.y)*2-1)));
    this.velocity.add(this.acceleration);
    this.acceleration.set(0,0);
    this.location.add(this.velocity);
    this.alpha -= this.rate ;
    // here is the recursion condition
    if(this.alpha<=this.palpha*0.25 && this.palpha>10) {
      p.add(new Particle(this.location.x, this.location.y, this.rate*0.25, this.palpha*0.5, this.text));
    }
  }
  
  //show the particles
  void show(){
    noStroke() ;
    fill(0,35,25, this.alpha);
    //render the ellipse
    ellipse(this.location.x, this.location.y, this.amp, this.amp);
    // render the text
    textSize(this.amp * 6);
    text(this.text, this.location.x, this.location.y);
  }
} // end particle class

(Note that you can choose not to render the ellipses and you can tweak the text size to something that makes more sense aesthetically. Also, when you're using other people's code, always credit them.)