Processing Example - Simple Particles | Algorithms, Blockchain and Cloud

The language of Processing is intuitive. It is very similar to Java/Javascript and very few lines of code is needed to make something fabulous. Processing is platform independent. And it is interpreted. Browsers can interpret this language by the ProcessingJS library.

Let’s create some random particles. Please note that the following example has some similarities with the balls bouncing example where the movement of objects and how it is dealt when they cross the borders are similar.

Processing Example – Simple Particles

Let’s create a class (object template) for these particles.

class Dot {
    float x = 0.0;
    float y = 0.0;
    float vx = 0.0;
    float vy = 0.0;
    
    void update(){
      // update the velocity
      this.vx += random(2.0) - 1.0;
      this.vx *= .96;
      this.vy += random(2.0) - 1.0;
      this.vy *= .96;
      // update the position
      this.x += this.vx;
      this.y += this.vy;
      // handle boundary collision
      if (this.x > width) { this.x = width; this.vx *= -1.0; }
      if (this.x < 0) { this.x = 0; this.vx *= -1.0; }
      if (this.y > height) { this.y = height; this.vy *= -1.0; }
      if (this.y < 0) { this.y = 0; this.vy *= -1.0; }
    }
}

class Dot {
    float x = 0.0;
    float y = 0.0;
    float vx = 0.0;
    float vy = 0.0;
    
    void update(){
      // update the velocity
      this.vx += random(2.0) - 1.0;
      this.vx *= .96;
      this.vy += random(2.0) - 1.0;
      this.vy *= .96;
      // update the position
      this.x += this.vx;
      this.y += this.vy;
      // handle boundary collision
      if (this.x > width) { this.x = width; this.vx *= -1.0; }
      if (this.x < 0) { this.x = 0; this.vx *= -1.0; }
      if (this.y > height) { this.y = height; this.vy *= -1.0; }
      if (this.y < 0) { this.y = 0; this.vy *= -1.0; }
    }
}

It has four attributes: the current position (x, y) and the direction vector (vx and vy). The update method will move this particle and change randomly (slightly) the direction so every time it looks like the particle is bouncing and wandering. When the object hits the border, it is reverted in the opposite direction.

The rest are then simple and straightforward. First we need to initialize the objects and inside the draw() we just need to loop them and make them move. The colours are also randomized so it looks perfect for a screen save.

The complete Processing Code is as follows, you can go to this URL https://helloacm.com/processing/simple-dots/ for a live demo as long as you have Javascript enabled for your modern browser.

// helloacm.com
int totalDots = 100;
Dot[] dots = new Dot[totalDots];
 
int width, height;
color fillColor;
float diameter = 12.0;
 
void setup() {
    // initialization
    width = 480;
    height = 400;
    size(width, height);
    // initial fill colour
    fillColor = color(255, 0, 0);
    fill(fillColor);
    noStroke();
    // array of dots
    for (int i = 0; i < totalDots; i++) {
        Dot d = new Dot();
        d.x = random(width);
        d.y = random(height);
        d.vx = random(2.0) - 1.0;
        d.vy = random(2.0) - 1.0;
        dots[i] = d;
    }
    background(0);
};
 
void draw() {
    fill(0, 25);
    rect(0, 0, width, height);
 
    float r = 255;
    float g = 255;
    float b = 255;
 
    for (int i = 0; i < totalDots; i++) {
        r = map(dots[i].x, 0, width, 0, 255);
        g = map(dots[i].y, 0, height, 0, 255);
        fill(r, g, b);
        dots[i].update();
        ellipse(dots[i].x, dots[i].y, diameter, diameter);
    }
};
 
class Dot {
    float x = 0.0;
    float y = 0.0;
    float vx = 0.0;
    float vy = 0.0;
    
    void update(){
      // update the velocity
      this.vx += random(2.0) - 1.0;
      this.vx *= .96;
      this.vy += random(2.0) - 1.0;
      this.vy *= .96;
      // update the position
      this.x += this.vx;
      this.y += this.vy;
      // handle boundary collision
      if (this.x > width) { this.x = width; this.vx *= -1.0; }
      if (this.x < 0) { this.x = 0; this.vx *= -1.0; }
      if (this.y > height) { this.y = height; this.vy *= -1.0; }
      if (this.y < 0) { this.y = 0; this.vy *= -1.0; }
    }
}

// helloacm.com
int totalDots = 100;
Dot[] dots = new Dot[totalDots];

int width, height;
color fillColor;
float diameter = 12.0;

void setup() {
    // initialization
    width = 480;
    height = 400;
    size(width, height);
    // initial fill colour
    fillColor = color(255, 0, 0);
    fill(fillColor);
    noStroke();
    // array of dots
    for (int i = 0; i < totalDots; i++) {
        Dot d = new Dot();
        d.x = random(width);
        d.y = random(height);
        d.vx = random(2.0) - 1.0;
        d.vy = random(2.0) - 1.0;
        dots[i] = d;
    }
    background(0);
};

void draw() {
    fill(0, 25);
    rect(0, 0, width, height);

    float r = 255;
    float g = 255;
    float b = 255;

    for (int i = 0; i < totalDots; i++) {
        r = map(dots[i].x, 0, width, 0, 255);
        g = map(dots[i].y, 0, height, 0, 255);
        fill(r, g, b);
        dots[i].update();
        ellipse(dots[i].x, dots[i].y, diameter, diameter);
    }
};

class Dot {
    float x = 0.0;
    float y = 0.0;
    float vx = 0.0;
    float vy = 0.0;
    
    void update(){
      // update the velocity
      this.vx += random(2.0) - 1.0;
      this.vx *= .96;
      this.vy += random(2.0) - 1.0;
      this.vy *= .96;
      // update the position
      this.x += this.vx;
      this.y += this.vy;
      // handle boundary collision
      if (this.x > width) { this.x = width; this.vx *= -1.0; }
      if (this.x < 0) { this.x = 0; this.vx *= -1.0; }
      if (this.y > height) { this.y = height; this.vy *= -1.0; }
      if (this.y < 0) { this.y = 0; this.vy *= -1.0; }
    }
}

--EOF (The Ultimate Computing & Technology Blog) --

GD Star Rating
loading...

629 words
Last Post: Quick Review: Nokia Lumia 635 Windows 8.1 Phone
Next Post: Server supports SSLv3, may be vulnerable to POODLE attack

The Permanent URL is: Processing Example – Simple Particles

Related posts:

Leave a Reply