Floating particles - Images - Processing Forum

cbradley13

Floating particles - Images

in Processing with Other Languages • 1 year ago

I have created a little floating blobs sketch for my website.

You can view it here: http://vlvtn.com/mint/mint.html

I would like to use a vector (or bitmap) image for the particles instead of a blob. Could someone help me with this.

Here is the code I currently have:

<script type="text/processing" data-processing-target="targetcanvas">

     //    Processing.js example sketch

    float max_acc = .05;
float max_vel = .4;
float z_limit = 6;
int max_size = 10;
int min_size = 5;
int max_blobs = 50;

Blob my_blobs[] = new Blob[max_blobs];

class Blob
{
int diameter;
float x, y, z;
float dx, dy, dz;

Blob(int init_diameter, float init_x, float init_y, float init_z)
{
    diameter = init_diameter;
    x = init_x;
    y = init_y;
    z = init_z;
    dx = random(-max_vel,max_vel);
    dy = random(-max_vel,max_vel);
    dz = random(-max_vel,max_vel);
}

void move()
{
    x += dx;
    y += dy;
    z += dz;

    if(x > width) {x = width; dx = 0;}
    if(x < 0) {x = 0; dx = 0;}
    if(y > height) {y = height; dy = 0;}
    if(y < 0) {y = 0; dy = 0;}
    if(z > max_size) {z = max_size; dz = 0;}
    if(z < min_size) {z = min_size; dz = 0;}
}

void change_momentum()
{
    dx += random(-max_acc, max_acc);
    dy += random(-max_acc, max_acc);
    dz += random(-max_acc, max_acc);

    if(dx > max_vel) dx = max_vel;
    if(dx < -max_vel) dx = -max_vel;
    if(dy > max_vel) dy = max_vel;
    if(dy < -max_vel) dy = -max_vel;
    if(dz > max_vel) dz = max_vel;
    if(dz < -max_vel) dz = -max_vel;
}

void display()
{
    noStroke();
    ellipse(x, y, diameter + z, diameter+z);
}
}

void setup()
{
size(2000, 1600);
smooth();

for(int i = 0; i < my_blobs.length; i++)
{
    my_blobs[i] = new Blob((int)random(min_size, max_size),
        random(width),
        random(height),
        random(0, 15));
}
}

void draw()
{
background(255);
noStroke();

    fill(160,160,160);


    pushMatrix();

for(int i = 0; i < my_blobs.length; i++)
{
    my_blobs[i].change_momentum();
    my_blobs[i].move();
    my_blobs[i].display();
}
}


         </script>

Replies(1)

v.k.

Re: Floating particles - Images

1 year ago

First there is no need for this pushMatrix() at line...(formatted code helps). You do all your movement without translate() or scale(). So there is no need for pushMatrix(). Anyway if there was, you should always call popMatrix() for each pushMatrix, otherwise you get this error that is stopping your sketch after a while.

"pushMatrix() cannot use push more than 32 times".

Just delete this line.

As for images, just load it as a PImage (image must be located in the data folder, for the web with processingjs it has to be in same folder see processingjs reference for pjs directives and data folder) and change this in your class:

void display()
{
//noStroke(); // (edited: no need of this too)
image(yourImage, x, y, diameter + z, diameter+z);
}

You might want to mask it so it won't be a square. You can use image.mask(matte) where matte is another image used as mask, to do this.

here formatted and adapted (no mask, also i got rid of procesingjs stuff and tested in the IDE):

float max_acc = .05;
float max_vel = .4;
float z_limit = 6;
int max_size = 10;
int min_size = 5;
int max_blobs = 50;
Blob my_blobs[] = new Blob[max_blobs];
class Blob {
int diameter;
float x, y, z;
float dx, dy, dz;
PImage yourImage; // a PImage <<<<<<<<<<<<
Blob(int init_diameter, float init_x, float init_y, float init_z) {
diameter = init_diameter;
x = init_x;
y = init_y;
z = init_z;
dx = random(-max_vel, max_vel);
dy = random(-max_vel, max_vel);
dz = random(-max_vel, max_vel);
yourImage = loadImage("imagem.jpg"); // load the image <<<<<<<<
}
void move() {
x += dx;
y += dy;
z += dz;
if (x > width) {
x = width;
dx = 0;
}
if (x < 0) {
x = 0;
dx = 0;
}
if (y > height) {
y = height;
dy = 0;
}
if (y < 0) {
y = 0;
dy = 0;
}
if (z > max_size) {
z = max_size;
dz = 0;
}
if (z < min_size) {
z = min_size;
dz = 0;
}
}
void change_momentum() {
dx += random(-max_acc, max_acc);
dy += random(-max_acc, max_acc);
dz += random(-max_acc, max_acc);
if (dx > max_vel) dx = max_vel;
if (dx < -max_vel) dx = -max_vel;
if (dy > max_vel) dy = max_vel;
if (dy < -max_vel) dy = -max_vel;
if (dz > max_vel) dz = max_vel;
if (dz < -max_vel) dz = -max_vel;
}
void display() {
noStroke();
image(yourImage, x, y, diameter + z, diameter+z); // <<<<< display it
}
}
void setup() {
size(2000, 1600);
smooth();
for (int i = 0; i < my_blobs.length; i++) {
my_blobs[i] = new Blob((int)random(min_size, max_size), random(width), random(height), random(0, 15));
}
}
void draw() {
background(255);
noStroke();
fill(160, 160, 160); // no pushMatrix()
for (int i = 0; i < my_blobs.length; i++) {
my_blobs[i].change_momentum();
my_blobs[i].move();
my_blobs[i].display();
}
}