image mosaic - random x,y position particle movement

Programming Questions

marmion6

image mosaic - random x,y position particle movement

in Programming Questions • 3 months ago

Hi,

I've been looking at some code previously written and uploaded on this forum to load an image and create a mosaic.

Currently the code creates mosaic identical to the image which is correct. What i'm hoping to now do is add some animation, almost like a particle animation. therefore all of the generated mosaic pixels would randomly move around the stage very slowly, then when a button is pressed they all come together to form the mosaic image.

I guess i need two functions: 1 for the random movement and 1 for the formation?

Can anyone help with this?

A good example of motion would be this - Brownian motion - but a lot slower

http://en.wikipedia.org/wiki/Brownian_motion

Here' the code:

PImage img1;

int cellSize = 2;

void setup() {

size(800, 800); // frame is 500 x 500

// Make a new instance of a PImage by loading an image file

img1 = loadImage("chap.jpg"); // stormtrooper image, 300 x 300

img1.loadPixels();

println(img1.width + " " + img1.height);

}

void draw() {

//image(img1, 0,0, 150,150);

pushMatrix();

// move to the center of the screen

translate(width/2, height/2);

// rotate 45 degrees

rotate(radians(0));

// move up from there to center the image

translate(-img1.width/2,-img1.height/2);

for (int y = 0; y < img1.height; y += cellSize ) {

for (int x = 0; x < img1.width; x += cellSize) {

int i = (x+cellSize/2) + (y+cellSize/2)*img1.width;

color c = color(img1.pixels[i]);

fill(c); // make each pixel black and white

// stroke(100); // bounded by a box, dark grey

//noStroke();

rect(x, y, cellSize, cellSize);

}

popMatrix();

}

Thanks

Replies(28)

Chrisir

Re: image mosaic - random x,y position particle movement

3 months ago

Hello,

That sounds great

Pls invent a global var keyhasbeenpressed to determine if it has been pressed.
So in draw () :

if (!keyhasbeenpressed){
// not keyhasbeenpressed
// random movement
}
else
{
// go to position in image
}

I suggest you take a look at the particle examples. You'll find a class there etc.
e.g.
http://www.processing.org/examples/multipleparticlesystems.html

You need a class Particle and make particles in an ArrayList "particles" of Particle
from the image in setup().

In draw() you paint and move the particles.

The class has these properties

float positionx, positiony; // current pos
float posInImageX,posInImageY; // dest pos
float directionx,directiony; // add that to x and y for movement
float accx, accy; // for later: acceleration
color col;
float cellSize;
boolean hasReachedPosInImage;

Greetings, Chrisir

tfguy44

Re: image mosaic - random x,y position particle movement

3 months ago

Boop.

class Fly {
color c;
PVector p, v, d;
boolean r;
Fly( color _c, int x, int y ){
c = _c;
d = new PVector( x, y, 0 );
p = new PVector( random(width), random(height), 0 );
v = new PVector( random(-5,5), random(-5,5), 0 );
}
void draw(){
simulate();
render();
}
void simulate(){
if( goHome ){
v.x = d.x - p.x;
v.y = d.y - p.y;
v.limit(3);
r = true;
} else {
if( r ){
v.x = random(-5,5);
v.y = random(-5,5);
r = false;
}
}
p.x+=v.x+width;
p.y+=v.y+height;
p.x%=width;
p.y%=height;
}
void render(){
stroke(c);
point(p.x,p.y);
}
}
boolean goHome = false;
ArrayList<Fly> flies = new ArrayList();
void setup(){
size(220,220);
PImage img = loadImage( "http://www.tfguy44.com/MyIcon1.PNG" ); // MyIcon1.PNG" );
for(int x=0;x<img.width;x++){
for(int y=0;y<img.height;y++){
flies.add(new Fly(img.get(x,y),((width-img.width)/2)+x,((height-img.height)/2)+y));
}
}
}
void draw(){
background(255);
for(int i=0;i<flies.size();flies.get(i++).draw());
goHome = mousePressed;
}

marmion6

Re: image mosaic - random x,y position particle movement

3 months ago

That is amazing! Thanks. Where in your code exactly do i specify the mosaic tile size and also, set the speed for the home transition?

Can't wait to experiment with this!

tfguy44

Re: image mosaic - random x,y position particle movement

3 months ago

My code does not make use of tiles - it works on a pixel level and draws each Fly as a point, not a rectangle. To make it use tiles, you'd have to draw the points as larger rectangles and work out how far apart the "home destination" (d), is, when you define what a fly should be in setup(). It's not a hard change to make...

The "return-home" speed is limited to "3" on line #19.

marmion6

Re: image mosaic - random x,y position particle movement

3 months ago

ok. in my first post, the code for the mosaic tiling is there - are you able to decipher it and apply to your code?

This here. I'm new to Processing so still getting to grips with it

PImage img1;

int cellSize = 2;

void setup() {

size(800, 800); // frame is 500 x 500

// Make a new instance of a PImage by loading an image file

img1 = loadImage("chap.jpg"); // stormtrooper image, 300 x 300

img1.loadPixels();

println(img1.width + " " + img1.height);

}

void draw() {

//image(img1, 0,0, 150,150);

pushMatrix();

// move to the center of the screen

translate(width/2, height/2);

// rotate 45 degrees

rotate(radians(0));

// move up from there to center the image

translate(-img1.width/2,-img1.height/2);

for (int y = 0; y < img1.height; y += cellSize ) {

for (int x = 0; x < img1.width; x += cellSize) {

int i = (x+cellSize/2) + (y+cellSize/2)*img1.width;

color c = color(img1.pixels[i]);

fill(c); // make each pixel black and white

// stroke(100); // bounded by a box, dark grey

//noStroke();

rect(x, y, cellSize, cellSize);

}

popMatrix();

}

marmion6

Re: image mosaic - random x,y position particle movement

3 months ago

Struggling with this. Can anyone shed any light on this?

If you click mouse the image mosaic appears. i'm trying to initiate a particle animation so that when the sketch plays all of the mosaic pieces randomly move around the stage smoothly using x,y,z coordinates. Then, when the mouse is clicked they all move into position (like tfguy44's example above)

Here's my code below and the image i'm using is attached

PImage img1;

int cellSize = 4;

boolean keyhasbeenpressed = false;

void setup() {

size(800, 800); // frame is 500 x 500

// Make a new instance of a PImage by loading an image file

img1 = loadImage("chap.jpg"); // stormtrooper image, 300 x 300

img1.loadPixels();

println(img1.width + " " + img1.height);

}

void draw() {

//image(img1, 0,0, 150,150);

pushMatrix();

// move to the center of the screen

translate(width/2, height/2);

// rotate 45 degrees

rotate(radians(0));

// move up from there to center the image

translate(-img1.width/2,-img1.height/2);

popMatrix();

}

void mousePressed() {

for (int y = 0; y < img1.height; y += cellSize ) {

for (int x = 0; x < img1.width; x += cellSize) {

int i = (x+cellSize/2) + (y+cellSize/2)*img1.width;

color c = color(img1.pixels[i]);

fill(c); // make each pixel black and white

// stroke(100); // bounded by a box, dark grey

//noStroke();

rect(x, y, cellSize, cellSize);

}

Chrisir

Re: image mosaic - random x,y position particle movement

3 months ago

here...........

// combining the two sketches from
// https://forum.processing.org/topic/image-mosaic-random-x-y-position-particle-movement
// ============================================
class Fly {
PImage flyImage; // image / tile
PVector p; // position
PVector v; // velocity
PVector d; // destination
boolean r; // running yes/no
//
// constr
Fly( PImage _flyImage, int x, int y ) {
flyImage = _flyImage;
d = new PVector( x, y, 0 );
p = new PVector( random(width), random(height), 0 );
v = new PVector( random(-5, 5), random(-5, 5), 0 );
} // constr
//
void draw() {
// move and show one tile
if (!keyPressed)
simulate();
render();
}
//
void simulate() {
// move one tile
if ( goHome ) {
// go home
v.x = d.x - p.x;
v.y = d.y - p.y;
v.limit(3);
r = true;
} // if
else {
// random
if ( r ) {
v.x = random(-5, 5);
v.y = random(-5, 5);
r = false;
}
} // else
p.x+=v.x+width;
p.y+=v.y+height;
p.x%=width;
p.y%=height;
}
void render() {
// show one tile
image ( flyImage, p.x, p.y);
}
} // class
//
// ============================================
//
boolean goHome = false; // go to the image yes / no
ArrayList<Fly> flies = new ArrayList(); // this uses our class
//
void setup() {
size(620, 620);
PImage img = loadImage("chap.jpg"); // loadImage( "http://www.tfguy44.com/MyIcon1.PNG" ); // MyIcon1.PNG" );
//
// get the flies with tiles of 3x3
for (int x=0;x<img.width;x+=3) {
for (int y=0;y<img.height;y+=3) {
Fly currentFly;
currentFly = new Fly(img.get(x, y, 3, 3), ((width-img.width)/2)+x, ((height-img.height)/2)+y);
flies.add(currentFly);
} // for
} // for
} // func
//
void draw() {
background(255);
// show and move the flies
for (int i=0;i<flies.size();i++) {
flies.get(i).draw();
} // for
goHome = mousePressed;
} // func
//

Chrisir

Re: image mosaic - random x,y position particle movement

3 months ago

new version with takes really the mosaic style from your code....

// combining the two sketches from
// https://forum.processing.org/topic/image-mosaic-random-x-y-position-particle-movement
// new version with tiles of one color
// ============================================
class Fly {
color c; // color
PVector p; // position
PVector v; // velocity
PVector d; // destination
boolean r; // running yes/no
//
// constr
Fly( color _c, int x, int y ) {
c = _c;
d = new PVector( x, y, 0 );
p = new PVector();
p.set(d);
// p = new PVector( random(img.width), random(img.height), 0 );
// p = new PVector( random(width/2-12, width/2+12), random(height/2-12, height/2+12), 0 );
// p = new PVector( width/2, height/2, 0 );
v = new PVector( random(-5, 4), random(-7, 5), 0 );
// if velocity is == 0, make it > 0
if (v.x==0)
v.x=random(1, 2);
if (v.y==0)
v.y=random(1, 2);
} // constr
//
void draw() {
// move and show one tile
if (!keyPressed) {
simulate(); // move
}
render(); // show
}
//
void simulate() {
// move one tile
if ( goHome ) {
// go home
float dx=d.x;
float dy=d.y;
//
v.x = dx - p.x;
v.y = dy - p.y;
v.limit(4); // max speed
r = true;
} // if
else {
// random
if ( r ) {
v.x = random(-5, 5);
v.y = random(-5, 5);
r = false;
}
} // else
//
// movement
p.x+=v.x;//+width;
p.y+=v.y;//+height;
// boundaries
if (p.x>width)
v.x=-1*abs(v.x);
if (p.x<0)
v.x=abs(v.x);
//
if (p.y>width)
v.y=-1*abs(v.y);
if (p.y<0)
v.y=abs(v.y);
// p.x%=width;
// p.y%=height;
}
void render() {
// show one tile
fill(c);
rect(p.x, p.y, cellSize, cellSize);
}
} // class
//
// ============================================
//
boolean goHome = false; // go to the image yes / no
ArrayList<Fly> flies = new ArrayList(); // this uses our class
int cellSize = 4;
PImage img;
//
void setup() {
size(620, 620);
img = loadImage("chap.jpg"); // loadImage( "http://www.tfguy44.com/MyIcon1.PNG" ); // MyIcon1.PNG" );
//
// get the flies with tiles of cellSize x cellSize
for (int x=0;x<img.width;x+=cellSize) {
for (int y=0;y<img.height;y+=cellSize) {
int i = (x+cellSize/2) + (y+cellSize/2)*img.width;
color c = color(img.pixels[i]);
Fly currentFly;
currentFly = new Fly(c, ((width-img.width)/2)+x, ((height-img.height)/2)+y);
flies.add(currentFly);
} // for
} // for
} // func
//
void draw() {
background(255);
// show and move the flies
for (int i=0;i<flies.size();i++) {
Fly currentFly;
currentFly = flies.get(i);
currentFly.draw();
} // for
goHome = mousePressed;
} // func
//

marmion6

Re: image mosaic - random x,y position particle movement

3 months ago

Wow! your code is very impressive indeed. i'm going to start experimenting with this right now, thank!

Do you think it's possible to add z depth too?

Thanks

Chrisir

Re: image mosaic - random x,y position particle movement

3 months ago

3D is possible

I did that once and had spheres instead of tiles (rects)

How to go 3D
just look at lines such like

d = new PVector( x, y, 0 );

and replace 0 with z;
also when you call the functions you need to provide z in each occurance.

Also
instead of size

size(620, 620);

use

size(620, 620, OPENGL);

or so.

Greetings, Chrisir

marmion6

Re: image mosaic - random x,y position particle movement

3 months ago

I can only see:

d = new PVector( x, y, 1 );

Tried replacing 1 with Z and adding Z elsewhere but keep getting errors :(

Chrisir

Re: image mosaic - random x,y position particle movement

3 months ago

here....

// now 3D
// combining the two sketches from
// https://forum.processing.org/topic/image-mosaic-random-x-y-position-particle-movement
// new version with tiles of one color
// ============================================
class Fly {
color c; // color
PVector p; // position
PVector v; // velocity
PVector d; // destination
boolean r; // running yes/no
//
// constr
Fly( color _c, int x, int y, int z ) {
c = _c;
d = new PVector( x, y, z ); // destination = position in image
// the p :
p = new PVector();
p.set(d);
// p = new PVector( random(img.width), random(img.height), 0 );
// p = new PVector( random(width/2-12, width/2+12), random(height/2-12, height/2+12), 0 );
// p = new PVector( width/2, height/2, 0 );
// the v :
v = new PVector( random(-5, 4), random(-7, 5), random(-2, 2) );
//
// if velocity is == 0, make it > 0
if (v.x==0)
v.x=random(1, 2);
if (v.y==0)
v.y=random(1, 2);
if (v.z==0)
v.z=random(1, 2);
} // constr
//
void draw() {
// move and show one tile
if (!keyPressed) {
simulate(); // move
}
render(); // show
}
//
void simulate() {
// move one tile
if ( goHome ) {
// go home
float dx=d.x;
float dy=d.y;
//
v.x = dx - p.x;
v.y = dy - p.y;
v.z = d.z - p.z;
v.limit(2); // max speed
r = true;
} // if
else {
// random
if ( r ) {
v.x = random(-5, 5);
v.y = random(-5, 5);
v.z = random(-5, 5);
v.limit(2); // max speed
r = false;
}
} // else
//
// movement
p.x+=v.x;//+width;
p.y+=v.y;//+height;
p.z+=v.z;//+height;
// boundaries
// for x
if (p.x>width-100)
v.x=-1*abs(v.x);
if (p.x<110)
v.x=abs(v.x);
// for y
if (p.y>width-100)
v.y=-1*abs(v.y);
if (p.y<110)
v.y=abs(v.y);
// for z
if (p.z>500)
v.z=-1*abs(v.z);
if (p.z<-200)
v.z=abs(v.z);
//
// p.x%=width;
// p.y%=height;
}
void render() {
// show one tile
fill(c);
pushMatrix();
translate(p.x, p.y, p.z);
// rect(0, 0, cellSize, cellSize);
box(cellSize);
popMatrix();
}
} // class
//
// ============================================
//
boolean goHome = false; // go to the image yes / no
ArrayList<Fly> flies = new ArrayList(); // this uses our class
int cellSize = 4;
PImage img;
//
void setup() {
size(620, 620, OPENGL);
img = loadImage("chap.jpg"); // loadImage( "http://www.tfguy44.com/MyIcon1.PNG" ); // MyIcon1.PNG" );
//
// get the flies with tiles of cellSize x cellSize
for (int x=0;x<img.width;x+=cellSize) {
for (int y=0;y<img.height;y+=cellSize) {
int i = (x+cellSize/2) + (y+cellSize/2)*img.width;
color c = color(img.pixels[i]);
Fly currentFly;
// currentFly = new Fly(c, ((width-img.width)/2)+x, ((height-img.height)/2)+y, y/2); // or
currentFly = new Fly(c, ((width-img.width)/2)+x, ((height-img.height)/2)+y, 0 );
flies.add(currentFly);
} // for
} // for
} // func
//
void draw() {
background(255);
// show and move the flies
for (int i=0;i<flies.size();i++) {
Fly currentFly;
currentFly = flies.get(i);
currentFly.draw();
} // for
goHome = mousePressed;
} // func
//

marmion6

Re: image mosaic - random x,y position particle movement

3 months ago

Cheers. Seems to cause memory errors. Is there too much data to handle in the image?

Chrisir

Re: image mosaic - random x,y position particle movement

3 months ago

you can increase the memory in menu file | preferences
mine is 2000 MB

try a smaller image

Chrisir

Re: image mosaic - random x,y position particle movement

3 months ago

new version, peasycam

space-key - home
p - pause

// about this sketch:
// combining the two sketches from
// https://forum.processing.org/topic/image-mosaic-random-x-y-position-particle-movement
// new version with tiles of one color
//
import peasy.test.*;
import peasy.org.apache.commons.math.*;
import peasy.*;
import peasy.org.apache.commons.math.geometry.*;
//
// ============================================
class Fly {
color c; // color
PVector p; // position
PVector v; // velocity
PVector d; // destination
boolean r=false; // running yes/no
int myFrameRateBeforeStart;
//
// constr
Fly( color _c, int x, int y, int z ) {
c = _c;
d = new PVector( x, y, z ); // destination = position in image
// the p :
p = new PVector();
// different possible p
p.set(d);
// p = new PVector( random(img.width), random(img.height), 0 );
// p = new PVector( random(width/2-12, width/2+12), random(height/2-12, height/2+12), 0 );
// p = new PVector( width/2, height/2, 0 );
//
// different possible v :
//v = new PVector( random(0, 1), random(-7, 5), random(0, 2) );
v = new PVector( random(0, 1), random(0, 1), random(0, 2) );
//
// if velocity is == 0, make it > 0
if (v.x==0)
v.x=random(1, 2);
if (v.y==0)
v.y=random(1, 2);
if (v.z==0)
v.z=random(1, 2);
// timer:
// for each tile different
if (random(100)>98) {
// a small part (2%) is supposed to start early (after frame 30 to 260)
myFrameRateBeforeStart = int(random (30, 260));
}
else
{
// but 98% start later
myFrameRateBeforeStart = int(random (230, 390));
}
} // constr
//
void draw() {
// move and show one tile
if (!isPaused) {
// timer
if (frameCount>myFrameRateBeforeStart) {
simulate(); // move
} // if
} // if
render(); // show
} // method
//
void simulate() {
// move one tile
if ( goHome ) {
// go home
float dx=d.x;
float dy=d.y;
//
v.x = dx - p.x;
v.y = dy - p.y;
v.z = d.z - p.z;
// v.limit(2); // max speed
r = true;
} // if
else {
// random
if ( r ) {
v.x = random(-5, 5);
v.y = random(-5, 5);
v.z = random(-5, 5);
// v.limit(2); // max speed
r = false;
}
} // else
//
// movement
v.limit(2); // max speed 2 or 12 or
p.x+=v.x;//+width;
p.y+=v.y;//+height;
p.z+=v.z;//+height;
// boundaries
// for x
if (p.x>width-100)
v.x=-1*abs(v.x);
if (p.x<110)
v.x=abs(v.x);
// for y
if (p.y>width-100)
v.y=-1*abs(v.y);
if (p.y<110)
v.y=abs(v.y);
// for z
if (p.z>460)
v.z=-1*abs(v.z);
if (p.z<-200)
v.z=abs(v.z);
//
// p.x%=width;
// p.y%=height;
}
void render() {
// show one tile
// different possible colors:
noStroke();
fill(c);
//noFill();
//stroke(c);
//stroke(111);
//
// paint it
pushMatrix();
translate(p.x, p.y, p.z);
// different possible forms
box(cellSize); // or
// rect(0, 0, cellSize, cellSize); // or
// sphere(cellSize);
popMatrix();
}
} // class
//
// ============================================
//
boolean goHome = false; // flies go back to the image yes / no
boolean isPaused = false; // pause
//
// cam
PeasyCam cam;
//
ArrayList<Fly> flies = new ArrayList(); // this uses our class
int cellSize = 4;
PImage img;
//
void setup() {
size(620, 620, OPENGL);
String imgName = "chap.jpg";
img = loadImage(imgName); // loadImage( "http://www.tfguy44.com/MyIcon1.PNG" ); // MyIcon1.PNG" );
if (img == null) {
println("image not found, exit. Name: "+imgName);
exit();
} // if
else
{
//
// get the flies with tiles of cellSize x cellSize
for (int x=0;x<img.width;x+=cellSize) {
for (int y=0;y<img.height;y+=cellSize) {
int i = (x+cellSize/2) + (y+cellSize/2)*img.width;
color c = color(img.pixels[i]);
Fly currentFly;
// currentFly = new Fly(c, ((width-img.width)/2)+x, ((height-img.height)/2)+y, y/2); // or
// currentFly = new Fly(c, ((width-img.width)/2)+x, ((height-img.height)/2)+y, (x+y)/2 ); // or
// currentFly = new Fly(c, ((width-img.width)/2)+x, ((height-img.height)/2)+y, int(brightness(c)) ); // or
currentFly = new Fly(c, ((width-img.width)/2)+x, ((height-img.height)/2)+y, 0 );
flies.add(currentFly);
} // for
} // for
// in case we use spheres
sphereDetail(6);
// usage:
println("press p to pause");
println("press space-key to return to image ");
// cam
cam = new PeasyCam(this, width/2.0, height/2.0, 200, 200);
} // else
} // func
//
void draw() {
background(255);
// usage: camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ)
// camera(width/2.0, height, 200,
// width/2.0, 39, -220,
// 0, 1, 0);
lights();
// show and move the flies
for (int i=0;i<flies.size();i++) {
Fly currentFly;
currentFly = flies.get(i);
//
// // lines
// Fly currentFly2;
// currentFly2 = flies.get(i+1);
// stroke(200);
// line (currentFly.p.x, currentFly.p.y, currentFly.p.z,
// currentFly2.p.x, currentFly2.p.y, currentFly2.p.z);
//
// draw fly
currentFly.draw();
} // for
// goHome = mousePressed;
//goHome=false;
//isPaused=false;
} // func
//
void keyPressed() {
if (key==' ')
goHome = !goHome;
else if (key=='p')
{
isPaused=!isPaused;
}
}// func
//

Chrisir

Re: image mosaic - random x,y position particle movement

3 months ago

Do you use processing version 2.0 stable?

You can try

size(620, 620, OPENGL);

size(620, 620, P3D);

instead

Maybe that's different for your memory?

marmion6

Re: image mosaic - random x,y position particle movement

3 months ago

What's the Peasycam plugin - will that help counter the memory issue?

Also, where do get the Peasy library from?

Thanks

Chrisir

Re: image mosaic - random x,y position particle movement

3 months ago

peasy cam let's you rotate and zoom the scene freely. It will increase memory usage. Bad.

http://www.domanistudios.com/#/work

Thanks

Chrisir

Re: image mosaic - random x,y position particle movement

2 months ago

hi,

I have no idea. You might want to start another thread.

Greetings, Chrisir

If you need an answer, please send me a personal message since this forum doesn't notify.

Top Reply