Does Processing have something that is similar to Unity FixedUpdate

Processing Libraries
1

Hi my friends,

I am trying to follow Daniel’s Chaos Game and adding a P5 control to control values on runtime. But it seems I have to move some setups to the draw part, because codes in setup part only update once before draw. So I move codes to draw part but points will not keep accumulating due to some reasons. I wonder if the Processing have something like the unity ‘fixedupdate’ which will check about update in certain time.

Here is the code I try to achieve this effect; but when I update the slide the points will not accumulate. if I comment the background on draw part, the point just keeps duplicating and overlaying on the new shape, so how to do a reset on this only when it is a new shape.

import controlP5.*;

ControlP5 cp1;

ArrayList<PVector> points;
PVector current;
PVector previous;
final float precent = 0.5;
int n;

void setup()
{
  size(800, 800);  
   //background(0);
  n = 6;
  
  cp1 = new ControlP5(this);
  cp1.addSlider("n")
     .setPosition(0, 0)
     .setRange(0, 10);
       
  points = new ArrayList<PVector>();
  
  for(int i = 0; i < n; i++)
  {
    float angle = i * (TWO_PI / n);
    
    //PVector v = new PVector(random(width), random(height));
    PVector v = PVector.fromAngle(angle);
    v.mult(width/2);
    v.add(width/2, height/2);
    points.add(v);
  }
  
  Setpts();  
}

void Setpts()
{
  //printArray(points);
  current = new PVector(random(width), random(height));
  
  background(0);
  stroke(250);
  strokeWeight(8);
  for(PVector p : points)
  {
    point(p.x, p.y);
  }  
}

void draw()
{
  
  //if(frameCount % 100 == 0)
  //{
    //reset();
  //}
  
  if(n != 6)
  {
    points.removeAll(points);
    
    for(int i = 0; i < n; i++)
    {
      float angle = i * (TWO_PI / n);
      
      //PVector v = new PVector(random(width), random(height));
      PVector v = PVector.fromAngle(angle);
      v.mult(width/2);
      v.add(width/2, height/2);
      points.add(v);
    }
    
    Setpts();
  
  
  }
  
  for(int i = 0; i < 5000; i++)
  {
    strokeWeight(1);
    stroke(250, 160, 0, 200);
    //stroke(250, 160, 0);
        
    int index = floor(random(points.size()));    
    PVector next = points.get(index);
    if(next != previous)
    {
      current.x = lerp(current.x, next.x, precent);
      current.y = lerp(current.y, next.y, precent);
      point(current.x, current.y);
    }
    previous = next;
  }
1 Like
2

The slider n has a Function that gets called automatically

Check out the reference for controlp5

see https://www.sojamo.de/libraries/controlP5/examples/controllers/ControlP5slider/ControlP5slider.pde

Brief Example

as you can see the function slider gets called upon changes.
In your program the function is called “n” I guess.
Put in it the stuff you need upon changes.

//https://www.sojamo.de/libraries/controlP5/examples/controllers/ControlP5slider/ControlP5slider.pdehttps://www.sojamo.de/libraries/controlP5/examples/controllers/ControlP5slider/ControlP5slider.pdehttps://www.sojamo.de/libraries/controlP5/examples/controllers/ControlP5slider/ControlP5slider.pde

import controlP5.*;

ControlP5 cp5;
int myColor = color(0, 0, 0);

void setup() {
  size(700, 400);
  noStroke();
  cp5 = new ControlP5(this);

  // add a vertical slider
  cp5.addSlider("slider")
    .setPosition(100, 305)
    .setSize(200, 20)
    .setRange(0, 200)
    .setValue(128)
    ;

  // reposition the Label for controller 'slider'
  cp5.getController("slider").getValueLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);
  cp5.getController("slider").getCaptionLabel().align(ControlP5.RIGHT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);
  // use Slider.FIX or Slider.FLEXIBLE to change the slider handle
  // by default it is Slider.FIX
}

void draw() {
  background(0);

  fill(myColor);
  rect(0, 280, width, 70);
}

void slider(float theColor) {
  // This gets called automatically
  println("Here");
  myColor = color(theColor);
  println("a slider event. setting background to "+theColor);
}
1 Like
3

Hi Chrisir,
Thanks for your reply and valuable comment. I will try to incorporate with this. Before I saw this, actually I had a very wired solution, but it works somehow :joy:lol

The idea is based on click event. When the mouse gets clicked and released, it calls the background redrawing again to remove previous graphic on the canvas. When the mouse is being dragging, it constantly calls the background redrawing to remove graphics again. So this time the graphic looks flashing. The arrow left and right key is to increase and decrease the base points. So it is kind of mimic Fixedupdate function in Unity :joy:

Here is the code

ArrayList<BasePoint> points;
BasePoint current;

int n = 3;

void setup()
{
  size(800, 800);
  background(0);
   
 
  points = new ArrayList<BasePoint>();
  current = new BasePoint(random(width), random(height));
  
  for(int i = 0; i < n; i++)
  {
    points.add(new BasePoint(random(width), random(height)));  
  }  
}

void mousePressed()
{
  for(int i = 0; i < points.size(); i++)
  {
    points.get(i).clicked(mouseX, mouseY);
    
  }
  background(0);
  redraw();
}

void mouseReleased()
{
  for(int i = 0; i < points.size(); i++)
  {
    points.get(i).stopDragging();
  }
  
  background(0);
  redraw();
  
}

void keyPressed()
{
  if(key == CODED)
  {
    if(keyCode == RIGHT)
    {
      n++;
    }
  }
  
  if(key == CODED)
  {
    if(keyCode == LEFT)
    {
      n--;
    }
  }
  
  points = new ArrayList<BasePoint>();
  current = new BasePoint(random(width), random(height));
  
  for(int i = 0; i < n; i++)
  {
    points.add(new BasePoint(random(width), random(height)));  
  } 
  
  background(0);
  redraw();
}

void mouseDragged()
{
   background(0);
   redraw();
}


void draw()
{
  //background(0);

  
  for(int i = 0; i < points.size(); i++)
  {
    points.get(i).display();
    points.get(i).drag();
    points.get(i).rollover(mouseX, mouseY);
  }
  
  for(int i = 0; i < 5000; i++)
  {
    strokeWeight(1);
    stroke(250, 160, 0, 20);
    
    int index = floor(random(points.size()));
    BasePoint next = points.get(index);
    current.position.x = lerp(current.position.x, next.position.x, 0.5);
    current.position.y = lerp(current.position.y, next.position.y, 0.5);
    point(current.position.x, current.position.y);
  }

}

class BasePoint
{
  PVector position;
  float radius;
  boolean dragging = false;
  boolean rollover = false;
  PVector drag;

  BasePoint(float bpx, float bpy)
  {
    position = new PVector(bpx, bpy);
    radius = 5;
    drag = new PVector(0.0, 0.0);
  }
  
  void display()
  {
    ellipseMode(CENTER);
    strokeWeight(1);
    stroke(250, 0, 0);
    if(dragging) { fill(0, 0, 250); }
    else if (rollover) { fill(30, 150, 30); }
    else { fill(250, 150, 0); }
    ellipse(position.x, position.y, radius * 2, radius * 2);
  }
  

  void clicked(float mx, float my)
  {
    float d = dist(mx, my, position.x, position.y);
    if(d < radius)
    {
      dragging = true;

      drag.x = position.x - mx;
      drag.y = position.y - my;
    }
  }

  void rollover(float mx, float my)
  {
    float d = dist(mx, my, position.x, position.y);
    if(d < radius)
    {
      rollover = true;
    }
    else
    {
      rollover = false;
    }
  }
  
  void stopDragging()
  {
    dragging = false;
  }

  void drag()
  {
    if(dragging)
    {
      position.x = mouseX + drag.x;
      position.y = mouseY + drag.y;
    }
  }

}