Best way to load 100 of the same image (and effect each independently!)

Programming Questions

olimason

Best way to load 100 of the same image (and effect each independently!)

in Programming Questions • 4 months ago

Hi Everyone,

I want to create an interactive projection with objects that move or disappear when triggered by motion;

I come from a max/msp background and still learning processing so I'm struggling a little,

What I need to know is the best way to approach this;

I need to load 100 images,

each image must be able to be effected independently of the other, (e.g if mouse over the object shrinks, grows, disappears etc but the other remain unchanged)

But obviously writing code to load 100 individual PImages etc is the wrong way to go about it!

Im thinking i need to write a class and use an array but I am struggling to get my head round how to do it.

If someone could post a little code or point me to a tutorial Id really appreciate it!!

Regards,

Oli

Heres my class but it need extending to fit my needs described above;

int numBalls = 6;

Ball [] balls = new Ball[numBalls];

void setup() {

size(500, 500);

smooth();

ellipseMode(RADIUS);

for (int i = 0; i < balls.length; i++) {

float x = random(width);

float y = random(height);

int diameter = int(random(100));

balls[i] = new Ball(x, y, diameter);

}

void draw() {

for (int i = 0; i <balls.length; i++) {

balls[i].display();

balls[i].hit();

}

class Ball {

float x;

float y;

float d = dist(mouseX, mouseY, x, y);

int diameter;

Ball(float tempX, float tempY, int tempDiameter) {

x =tempX;

y = tempY;

diameter = tempDiameter;

}

void display() {

ellipse(x, y, diameter, diameter);

}

void hit() {

if (mousePressed) {

diameter++;

}

Replies(5)

quarks

Re: Best way to load 100 of the same image (and effect each independently!)

4 months ago

If all the images are using the same pixel data then you only need to load the image once and then use it as many times as you want.

I have adapted your code so that each ball is an image - there are 6 balls and they all share the same PImage. When the mouse passes over one of the images it is shown slightly enlarged.

The applet can be viewed here, the sketch code and image can be downloaded here (zip file).
[EDIT} links removed as no longer valid - see my next post

/**
Hit the spacebar to randomly reposition the
images
*/
PImage img0;
int numBalls = 6;
Ball [] balls = new Ball[numBalls];
void setup() {
size(500, 500);
smooth();
cursor(CROSS);
imageMode(CENTER);
img0 = loadImage("q0.gif"); // Load the image just once
for (int i = 0; i < balls.length; i++) {
float x = random(30, width - 30);
float y = random(80, height - 30);
balls[i] = new Ball(img0, x, y); // Reuse the image for each ball
}
}
void draw() {
background(255, 200, 255);
fill(0);
text("Press spacebar to change image positions to new random location",10,20);
for (int i = 0; i <balls.length; i++) {
balls[i].update(mouseX, mouseY);
}
for (int i = 0; i <balls.length; i++) {
balls[i].display();
}
}
void keyReleased() {
if (key == ' ') {
for (int i = 0; i <balls.length; i++) {
float x = random(30, width - 30);
float y = random(80, height - 30);
balls[i].moveTo(x,y);
}
}
}
class Ball {
PImage img;
float x;
float y;
float w;
float h;
float mag = 1.0;
Ball(PImage tempImg, float tempX, float tempY) {
img = tempImg;
x = tempX;
y = tempY;
w = img.width;
h = img.height;
mag = 1;
}
void moveTo( float tempX, float tempY) {
x = tempX;
y = tempY;
}
void display() {
pushMatrix();
// Apply any effects here e.g. scaling rotation etc.
translate(x, y);
scale(mag);
// Now draw the image
image(img, 0, 0);
popMatrix();
}
void update(float px, float py) {
if (isOver(px, py))
mag = 1.5;
else
mag = 1;
}
boolean isOver(float px, float py) {
return(abs(px-x) <= w/2 && abs(py-y) <= h/2);
}
}

olimason

Re: Best way to load 100 of the same image (and effect each independently!)

3 months ago

Sorry for not replying before, I thought I had, I definatly typed it but maybe didn't got through properly!

Your last post has been really helpful for me; I have made a class for balloons based on you last post which I am now a little stuck with.

I want to be able to click an individual ballon and make it pop to reveal a different image.

Do you think you could possible have a look?

Regards,

Oli

Ballon[] ballon = new Ballon[10];

void setup() {

size(720, 480);

imageMode(CENTER);

for (int i = 0; i < ballon.length; i++) {

float xpos= random(width);

float ypos = random(height);

ballon[i] = new Ballon("blue.png", xpos, ypos);

}

void draw() {

background(204);

for (int i = 0; i < ballon.length; i++) {

ballon[i].update();

ballon[i].display();

}

class Ballon {

float xpos;

float ypos;

float angle;

float yoffset = 0.0;

float ang = 0;

PImage blue;

PImage boom;

// Set initial values in constructor

Ballon(String svgName, float tempX, float tempY) {

blue = loadImage(svgName);

boom = loadImage("boom.png");

xpos = tempX;

ypos = tempY;

}

// Update the fields

void update() {

ypos-=2;

if (ypos < 0 - blue.height) {

ypos = height + blue.height;

}

if(mouseX =

}

// Draw the ballon to the screen

void display() {

image(blue, xpos, ypos );

}

GoToLoop

Re: Best way to load 100 of the same image (and effect each independently!)

3 months ago

You should post your updated code, since we dunno what has changed!

Anyways, some tips:

You may create a new member variable of boolean type to flag which PImage to display:

either a regular balloon or the surprise pic!

Here's a sketch of it to give you an idea about it:

// ...

PImage img, pic;

boolean isSurprisePic;

// ...

void display() {

// ...

image(isSurprisePic? pic : img);

// ...

}

quarks

Re: Best way to load 100 of the same image (and effect each independently!)

3 months ago

The easiet way is simply to change the image. I have modified the code I used above and have added a pop(PImage) method to the Ball class. I have also modified the isOver method to return true only if the position is over a non-transparent pixel. Click on the balloons

The updated applet can be viewed here, the sketch code and image can be downloaded here (zip file).

/**
Hit the spacebar to randomly reposition the
images
*/
PImage img0, img1;
int numBalls = 6;
Ball [] balls = new Ball[numBalls];
void setup() {
size(500, 500);
smooth();
cursor(CROSS);
img0 = loadImage("balloon.png");
img1 = loadImage("surprise.png");
for (int i = 0; i < balls.length; i++) {
float x = random(30, width - 30);
float y = random(80, height - 30);
balls[i] = new Ball( img0, x, y);
}
}
void draw() {
background(255, 200, 255);
fill(0);
text("Press spacebar to reset balloon images and move to a new random location", 10, 20);
for (int i = 0; i <balls.length; i++) {
balls[i].display();
}
}
void mouseClicked() {
for (int i = 0; i < balls.length; i++) {
if (balls[i].isOver(mouseX, mouseY))
balls[i].pop(img1);
}
}
void keyReleased() {
if (key == ' ') {
for (int i = 0; i <balls.length; i++) {
float x = random(30, width - 30);
float y = random(80, height - 30);
balls[i].moveTo(x, y);
balls[i].pop(img0);
}
}
}
class Ball {
PImage img;
float x;
float y;
float w;
float h;
float mag = 1.0;
Ball(PImage tempImg, float tempX, float tempY) {
img = tempImg;
x = tempX;
y = tempY;
w = img.width;
h = img.height;
mag = 1;
}
void moveTo( float tempX, float tempY) {
x = tempX;
y = tempY;
}
void display() {
pushMatrix();
translate(x, y);
scale(mag);
imageMode(CENTER);
image(img, 0, 0);
popMatrix();
}
void pop(PImage poppedImage) {
img = poppedImage;
}
boolean isOver(float px, float py) {
if (abs(px-x) <= w/2 && abs(py-y) <= h/2) {
int p = img.get(int(px - x + w/2), int(py - y + h/2));
if (alpha(p) > 0) {
return true;
}
}
return false;
}
}

olimason

Re: Re: Best way to load 100 of the same image (and effect each independently!)

3 months ago

Thank you everyone for being so helpful,

I am now trying to amend it so the balloons rise up (which i have got sorted) then reset to the original image once the leave the top of the canvas and appear at the bottom.

Im going to have a go myself (its the only way ill learn lol!)

I will prob have to post back tho!

Thanks again!

Top Reply