PNG Pixels with Motion Algorithm

Programming Questions

stavrosdee

PNG Pixels with Motion Algorithm

in Programming Questions • 2 years ago

Hi to all,

I have this question and I am struggling to find an approach, but I can't find any so far. If someone has a solution, please share it with me.

So, I have this simple code that extracts from a .png image only the pixels that are not transparent, and then draws points every 5 pixels with color taken from that specific area of the image. So far so good, no harm caused.

However, I would like to be able to control the position of each point with motion algorithms based on interaction with the user (i.e. the points start moving when the mouse is closer). How can I control ONLY the points that are drawn from the image - lets assume there are just 200 points that have been created and I want each one to be controlled by the motion algorithms?

Any thoughts?

PImage myPic;

int cell = 5;

void setup() {

size(600,450);

frameRate(30);

myPic = loadImage("afu.png");

myPic.resize(width, height);

smooth();

}

void draw() {

background(0);

fill(255,10);

rect(0,0,width,height);

for(int x=cell; x < width; x+=cell) {

for(int y=cell; y < height; y+=cell) {

color myColor = myPic.get(x,y);

float alphaCol = brightness(myPic.pixels[x + (y * width)]);

stroke(myColor, alphaCol);

strokeWeight(3);

//Here I want to attached the values of the motion algorithm but I can't find a way to initialize and attach values

//properly

point(x, y);

}

Replies(9)

PhiLho

Re: PNG Pixels with Motion Algorithm

2 years ago

Put the x and y coordinates in a PVector and store the PVector objects in an array list.

stavrosdee

Re: Re: PNG Pixels with Motion Algorithm

2 years ago

Ok, this makes sense.

If you care to share a shortcut to an example, could be appreciated.

Thanks.

PhiLho

Re: PNG Pixels with Motion Algorithm

2 years ago

PVector
ArrayList

stavrosdee

Re: Re: PNG Pixels with Motion Algorithm

2 years ago

I understand the process of creating the PVector and applying an ArrayList afterwards, however my main question remains:

How can I gain access ONLY to the position of the pixels of the .png image that they are not transparent 100%? I don't want to create points that correspond to the position of the transparent pixels of the .png image. I can't find a way to isolate the transparent pixels yet.

Cheers.

PhiLho

Re: PNG Pixels with Motion Algorithm

2 years ago

I don't understand your issue.
You say you draw some 200 points taken out of the image.
While you draw them (or actually before, in setup()), just store them in the array list, then use this list to draw the points and move them.
If you need to store the color as well, you can make a class distinct from PVector, that you make yourself, something like:

class SparsePoint
{
int x, y;
color c;
// Can add other info like original location, if needed
}

stavrosdee

Re: Re: PNG Pixels with Motion Algorithm

2 years ago

Ok based on the code I posted earlier, I get the following image. I draw points only to the pixel positions that there is color and alpha values. However, I can't find a way to pass ONLY the x,y values of those pixels, and drop the rest pixels that exist in the image (i.e. the transparent pixels). Can I do a conditional statement and say, ok if the alpha value of the pixel == 0, then add this position to the ArrayList? But then I need to have the total x,y positions that have been added to the ArrayList in order to create a for loop to initialize the motion algorithm. Can this happen, or there is another better way? I also wonder how I can use for example 200 separate pixels that get a random pixel position from the available ones that have been added to the ArrayList.

Apologies for these rather simple questions, but it is some information I can't find anywhere - I have looked in various forums, books, websites.

PhiLho

Re: PNG Pixels with Motion Algorithm

2 years ago

Not sure to fully understand your problem, or if the follow code answer at least some of your points, but here it is:

PImage myPic;
int cell = 5;
ArrayList<SparsePoint> sps = new ArrayList<SparsePoint>();
void setup() {
size(600,450);
frameRate(30);
myPic = loadImage("G:/Images/toucan.png");
myPic.resize(width, height);
smooth();
noLoop();
for(int x=cell; x < width; x+=cell) {
for(int y=cell; y < height; y+=cell) {
color myColor = myPic.get(x,y);
float alphaCol = brightness(myPic.pixels[x + (y * width)]);
SparsePoint sp = new SparsePoint();
sp.x = x; sp.y = y;
sp.c = myColor; sp.a = alphaCol;
sps.add(sp);
}
}
}
void draw() {
background(255);
fill(255,10);
rect(0,0,width,height);
for (SparsePoint sp : sps)
{
stroke(sp.c, sp.a);
strokeWeight(3);
point(sp.x, sp.y);
}
}
class SparsePoint
{
int x, y;
color c;
float a;
}

stavrosdee

Re: Re: PNG Pixels with Motion Algorithm

2 years ago

Thanks for your answer, I'll work on this example to see if I can get the results I want - although I was doing something similar. One difference is that I was initializing the ArrayList inside the setup function, but outside the for loop - I don't know if there is any difference.

Also I don't understand why you use the <> symbols in the following line:

ArrayList<SparsePoint> sps = new ArrayList<SparsePoint>();

and if you would like to explain how this line inside draw() works:

for (SparsePoint sp:sps)

Gracias, I appreciate your help.

PhiLho

Re: PNG Pixels with Motion Algorithm

2 years ago

No difference for array list init, they are both OK.
The <> indicates to the compiler that the array list contains only SparsePoints. So you don't need to cast them back when using get(). And it allows to use the for-each loop.
for (SparsePoint sp : sps) is the Java 1.5 syntax, recently introduced in Processing (the <> too).
It basically says: iterate on the sps collection, and put each element in the sp variable of type SparsePoint. It is equivalent, but much terser, than a for loop with i index, using sps.get(i).

Top Reply