Trying to create particle array of graphical masks, having trouble with code logic

Programming Questions

breegeek

Trying to create particle array of graphical masks, having trouble with code logic

in Programming Questions • 1 year ago

Hello, all, working on a project that's got me stumped.

What I am trying to do: Create a visual effect where there is a graphical mask over an image that appears to be exploding like fireworks.

Where I am: I have a particle system, thanks to Daniel Shiffman, which explodes from mouseX mouseY. Also have working graphical mask that follows mouseX and mouseX.

Where I am stuck: I was trying to modify the simple particle class so that each particle was a mini mask, but kept getting errors when trying to combine the code(s). I think my problem lies within trying to create a mask, which depends on information at the top level fo the code INSIDE a class for each instance of the class.

I am super stuck and would highly appreciate any help y'all can give me.

Cheers, thanks, and infinite praise in advance!

Here is the code (a bit messy, sorry):

import gifAnimation.*;
//PImage bgImage;
PImage maskImage;
PGraphics graphicalMask;
int iw, ih;
int dw, dh;
int angle = 0;
Gif bgImage;
//here we are creating an array of x and y positions.
float [] x = new float [50]; //create an empty array of 50 x positions
float [] y = new float [50]; // do the same for y
ParticleSystem ps;
void setup()
{
size(500, 260);
colorMode(RGB, 255, 255, 255, 100);
bgImage = new Gif(this, "slowloop-storm.gif");
bgImage.loop();
ps = new ParticleSystem(1, new PVector(width/2,height/2,0));
smooth();
graphicalMask = createGraphics(500, 280, JAVA2D);
//ok, here you are creating a loop that says to set the *initial* value of
// each item in your array to 0. It's basically initializing the array (I think)
for (int i = 0; i<50; i++){ //here, i is an iterator we create temporarily
x[i] = 0;
y[i] = 0;
}
//end for loop
}
void draw()
{
background(0,0,0);
ps.run();
ps.addParticle(mouseX,mouseY);
graphicalMask.beginDraw();
// Erase graphics
graphicalMask.background(0);
// Draw the mask
graphicalMask.noStroke();
for(int i = 0; i < x.length; i++){
graphicalMask.fill(i * (255 / x.length) );
graphicalMask.ellipse(x[i], y[i], i*3, i*3);
}
graphicalMask.endDraw();
angle += 10;
float val = cos(radians(angle)) * 6.0;
for (int a = 0; a < 360; a += 50) {
float xoff = cos(radians(a)) * val;
float yoff = sin(radians(a)) * val;
graphicalMask.fill(255);
graphicalMask.noStroke();
graphicalMask.ellipse(mouseX + xoff, mouseY + yoff, 20,20);
}
graphicalMask.endDraw();
// Copy the original image (kept as reference)
maskImage = bgImage.get();
// Apply the mask
maskImage.mask(graphicalMask);
// Display the result
image(maskImage, dw/2, dh/2);
/////Ok, here is another for-loop. What we're doing is cycling through the array
// and setting the value of each item in the array to the one before it
for (int i=0; i<49; i++) {
x[i] = x [i + 1];
y[i] = y [i + 1];
fill (i*2, 0); //set the fill color by i
noStroke();
ellipse (x[i], y[i], i, i);
}
//so each time the draw loop happens, we start this loop and go and reset the x and y values to the previous value
x[49] = mouseX;
y[49] = mouseY;
}
// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles
class ParticleSystem {
ArrayList particles; // An arraylist for all the particles
PVector origin; // An origin point for where particles are born
ParticleSystem(int num, PVector v) {
particles = new ArrayList(); // Initialize the arraylist
origin = v.get(); // Store the origin point
for (int i = 0; i < num; i++) {
particles.add(new Particle(origin)); // Add "num" amount of particles to the arraylist
}
}
void run() {
// Cycle through the ArrayList backwards b/c we are deleting
for (int i = particles.size()-1; i >= 0; i--) {
Particle p = (Particle) particles.get(i);
p.run();
if (p.dead()) {
particles.remove(i);
}
}
}
void addParticle() {
particles.add(new Particle(origin));
}
void addParticle(float x, float y) {
particles.add(new Particle(new PVector(x,y)));
}
void addParticle(Particle p) {
particles.add(p);
}
// A method to test if the particle system still has particles
boolean dead() {
if (particles.isEmpty()) {
return true;
} else {
return false;
}
}
}
// A simple Particle class
class Particle {
PVector loc;
PVector vel;
PVector acc;
float r;
float timer;
// Another constructor (the one we are using here)
Particle(PVector l) {
acc = new PVector(0,0.05,0);
vel = new PVector(random(-1,1),random(-2,0),0);
loc = l.get();
r = 10.0;
timer = 100.0;
}
void run() {
update();
render();
}
// Method to update location
void update() {
vel.add(acc);
loc.add(vel);
timer -= 1.0;
}
// Method to display
void render() {
ellipseMode(CENTER);
stroke(255,timer);
fill(100,timer);
ellipse(loc.x,loc.y,r,r);
displayVector(vel,loc.x,loc.y,10);
}
// Is the particle still useful?
boolean dead() {
if (timer <= 0.0) {
return true;
} else {
return false;
}
}
void displayVector(PVector v, float x, float y, float scayl) {
pushMatrix();
float arrowsize = 4;
// Translate to location to render vector
translate(x,y);
stroke(255);
// Call vector heading function to get direction (note that pointing up is a heading of 0) and rotate
rotate(v.heading2D());
// Calculate length of vector & scale it to be bigger or smaller if necessary
float len = v.mag()*scayl;
// Draw three lines to make an arrow (draw pointing up since we've rotate to the proper direction)
line(0,0,len,0);
line(len,0,len-arrowsize,+arrowsize/2);
line(len,0,len-arrowsize,-arrowsize/2);
popMatrix();
}
}

Replies(5)

maleo

Re: Trying to create particle array of graphical masks, having trouble with code logic

1 year ago

i am struggling with understanding what you are trying to do... what image are you trying to mask? there is a static image that you should see through a moving mask provided by the particle system? maybe you could provide your slowloop-storm.gif so we can see what you already got.

breegeek

Re: Trying to create particle array of graphical masks, having trouble with code logic

1 year ago

Thanks for taking a look! I'm trying to use the particles to unmask a background gif, in this instance it's just this:

Basically we got a mask to work that follows the mouse, but I wanted a particle system to be generated from the mouse, rather than just one particle uncovering the image.

maleo

Re: Trying to create particle array of graphical masks, having trouble with code logic

1 year ago

I added a getMask() function to the ParticleSystem which gives you a black image with the positions of the particles masked in shades of grey (depending on the age of the particle). This is then used as a mask for the background gif.

I removed the mouse masking code you had in there for simplicity.

You can also remove the arrows and the other stuff from the particle's render() method, and adjust it's size and so on..

import gifAnimation.*;
PImage maskImage;
PGraphics graphicalMask;
int iw, ih;
int dw, dh;
int angle = 0;
Gif bgImage;
ParticleSystem ps;
void setup()
{
size(500, 280);
colorMode(RGB, 255, 255, 255, 100);
bgImage = new Gif(this, "slowloop-storm.gif");
bgImage.loop();
ps = new ParticleSystem(1, new PVector(width/2, height/2, 0));
smooth();
}
void draw()
{
background(0, 0, 0);
ps.run();
ps.addParticle(mouseX, mouseY);
// Copy the original image (kept as reference)
maskImage = bgImage.get();
// Apply the mask
maskImage.mask(ps.getMask());
// Display the result
image(maskImage, dw/2, dh/2);
}
// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles
class ParticleSystem {
ArrayList particles; // An arraylist for all the particles
PVector origin; // An origin point for where particles are born
ParticleSystem(int num, PVector v) {
particles = new ArrayList(); // Initialize the arraylist
origin = v.get(); // Store the origin point
for (int i = 0; i < num; i++) {
particles.add(new Particle(origin)); // Add "num" amount of particles to the arraylist
}
}
void run() {
// Cycle through the ArrayList backwards b/c we are deleting
for (int i = particles.size()-1; i >= 0; i--) {
Particle p = (Particle) particles.get(i);
p.run();
if (p.dead()) {
particles.remove(i);
}
}
}
void addParticle() {
particles.add(new Particle(origin));
}
void addParticle(float x, float y) {
particles.add(new Particle(new PVector(x, y)));
}
void addParticle(Particle p) {
particles.add(p);
}
// A method to test if the particle system still has particles
boolean dead() {
if (particles.isEmpty()) {
return true;
}
else {
return false;
}
}
PImage getMask() {
PGraphics mask = createGraphics(width, height, JAVA2D);
mask.beginDraw();
// Erase graphics
mask.background(0);
// Draw the mask
mask.noStroke();
for (int i = 0; i<particles.size(); i++) {
Particle p = (Particle) particles.get(i);
mask.fill(255, p.timer*10);
mask.ellipse(p.loc.x, p.loc.y, p.r, p.r);
}
mask.endDraw();
return mask;
}
}
// A simple Particle class
class Particle {
PVector loc;
PVector vel;
PVector acc;
float r;
float timer;
// Another constructor (the one we are using here)
Particle(PVector l) {
acc = new PVector(0, 0.05, 0);
vel = new PVector(random(-1, 1), random(-2, 0), 0);
loc = l.get();
r = 10.0;
timer = 100.0;
}
void run() {
update();
render();
}
// Method to update location
void update() {
vel.add(acc);
loc.add(vel);
timer -= 1.0;
}
// Method to display
void render() {
ellipseMode(CENTER);
stroke(255, timer);
fill(100, timer);
ellipse(loc.x, loc.y, r, r);
displayVector(vel, loc.x, loc.y, 10);
}
// Is the particle still useful?
boolean dead() {
if (timer <= 0.0) {
return true;
}
else {
return false;
}
}
void displayVector(PVector v, float x, float y, float scayl) {
pushMatrix();
float arrowsize = 4;
// Translate to location to render vector
translate(x, y);
stroke(255);
// Call vector heading function to get direction (note that pointing up is a heading of 0) and rotate
rotate(v.heading2D());
// Calculate length of vector & scale it to be bigger or smaller if necessary
float len = v.mag()*scayl;
// Draw three lines to make an arrow (draw pointing up since we've rotate to the proper direction)
line(0, 0, len, 0);
line(len, 0, len-arrowsize, +arrowsize/2);
line(len, 0, len-arrowsize, -arrowsize/2);
popMatrix();
}
}

amnon.owed

Re: Trying to create particle array of graphical masks, having trouble with code logic

1 year ago

*edit: I see maleo and me posted almost at the same time with our solutions *

There was quite a lot of code hangin' around in the original sketch that did nothing. Trimmed a few lines. The basic solution is to draw all the particles into the mask (lines 83-85). Press the mouse to also see the original particles and vectors.

Adapted Code

import gifAnimation.*;
PImage maskImage;
PGraphics graphicalMask;
Gif bgImage;
ParticleSystem ps;
void setup() {
size(500, 260, P2D);
bgImage = new Gif(this, "slowloop-storm.gif");
bgImage.loop();
ps = new ParticleSystem(1, new PVector(width/2, height/2, 0));
graphicalMask = createGraphics(500, 280, JAVA2D);
}
void draw() {
background(0);
ps.addParticle(mouseX, mouseY);
graphicalMask.beginDraw();
graphicalMask.background(0);
ps.run();
graphicalMask.endDraw();
maskImage = bgImage.get();
maskImage.mask(graphicalMask);
image(maskImage, 0, 0);
}
class ParticleSystem {
ArrayList particles;
PVector origin;
ParticleSystem(int num, PVector v) {
particles = new ArrayList();
origin = v.get();
for (int i=0; i<num; i++) {
particles.add(new Particle(origin));
}
}
void run() {
for (int i = particles.size()-1; i >= 0; i--) {
Particle p = (Particle) particles.get(i);
p.run();
if (p.dead()) {
particles.remove(i);
}
}
}
void addParticle() {
particles.add(new Particle(origin));
}
void addParticle(float x, float y) {
particles.add(new Particle(new PVector(x, y)));
}
}
class Particle {
PVector loc, vel, acc;
float r, timer;
Particle(PVector l) {
acc = new PVector(0, 0.05, 0);
vel = new PVector(random(-1, 1), random(-2, 0), 0);
loc = l.get();
r = random(25,45);
timer = 100.0;
}
void run() {
update();
render();
}
void update() {
vel.add(acc);
loc.add(vel);
timer -= 1.0;
}
void render() {
graphicalMask.noStroke();
graphicalMask.fill(255, timer);
graphicalMask.ellipse(loc.x, loc.y, r, r);
if (mousePressed) {
ellipseMode(CENTER);
stroke(255, timer);
fill(100, timer);
ellipse(loc.x, loc.y, r, r);
displayVector(vel, loc.x, loc.y, 10);
}
}
boolean dead() {
if (timer <= 0.0) { return true; } else { return false; }
}
void displayVector(PVector v, float x, float y, float scayl) {
pushMatrix();
float arrowsize = 4;
translate(x, y);
stroke(255);
rotate(v.heading2D());
float len = v.mag()*scayl;
line(0, 0, len, 0);
line(len, 0, len-arrowsize, +arrowsize/2);
line(len, 0, len-arrowsize, -arrowsize/2);
popMatrix();
}
}

breegeek

Re: Trying to create particle array of graphical masks, having trouble with code logic

1 year ago

Thank you so much for your help guys! You're awesome - this is exactly what I was trying to do! I'm going to play around with the controls and settings for this and try to figure it out.

Cheers!

Top Reply