We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpSyntax Questions › Cutting up and image
Page Index Toggle Pages: 1
Cutting up and image (Read 610 times)
Cutting up and image
Nov 15th, 2005, 4:47pm
 
Hi, is there a way to cut up an image into, say, a number of squares that can be move around independantly? A bit like those jumbled up puzzles where you can only move one square at a time.

Thanks in advance.
Re: Cutting up and image
Reply #1 - Nov 15th, 2005, 6:13pm
 
splitImage() will return an array of PImages cut from a PImage given to it.
Code:

PImage [] buffer;
int ratio = 4;
int state = 0;
void setup(){
size(400,400);
buffer = new PImage[ratio * ratio];
for(int i = 0; i < 400; i++){
fill(random(255),random(255),random(255));
rect(random(width), random(height), random(50), random(50));
}
loadPixels();
// "g" is a PImage of the applet graphics ;)
buffer = splitImage(g,ratio);
}
void mousePressed(){
image(buffer[state], mouseX, mouseY);
state = (state + 1) % buffer.length;
}
void draw(){
}
PImage [] splitImage(PImage splitMe, int ratio){
PImage [] buffer = new PImage[ratio * ratio];
int xStep = splitMe.width / ratio;
int yStep = splitMe.height / ratio;
for(int i = 0; i < buffer.length; i++){
buffer[i] = new PImage(xStep, yStep);
println((i / (splitMe.height/yStep)) * yStep);
buffer[i].copy(splitMe, (i * xStep) % splitMe.width, (i / (splitMe.height / yStep)) * yStep, xStep, yStep, 0, 0, buffer[i].width, buffer[i].height);
}
return buffer;
}

The function you were looking for is copy().
Re: Cutting up and image
Reply #2 - Mar 7th, 2006, 9:55pm
 
Hi, I'm pretty new to processing and programming in general, and I am working on a very similar problem regarding cutting up an image and mapping it into rectangles that can then be moved independantly of each other. I have looked over this code here, but I'm not really at a level of understanding it. Also when I try to run "splitImage" processing doesn't recognize this as a function. If anyone could help explain how this works that would be a great help. Thanks.
Re: Cutting up and image
Reply #3 - Mar 8th, 2006, 6:34am
 
Kreyerja,

In St33d's post, he defined the splitImage function. i.e. it's not built into Processing, he defined (created) it, then made use of it.

The part which defines the splitImage function is this:

Code:

PImage [] splitImage(PImage splitMe, int ratio){
PImage [] buffer = new PImage[ratio * ratio];
int xStep = splitMe.width / ratio;
int yStep = splitMe.height / ratio;
for(int i = 0; i < buffer.length; i++){
buffer[i] = new PImage(xStep, yStep);
println((i / (splitMe.height/yStep)) * yStep);
buffer[i].copy(splitMe, (i * xStep) % splitMe.width, (i / (splitMe.height / yStep)) * yStep, xStep, yStep, 0, 0, buffer[i].width, buffer[i].height);
}
return buffer;
}


the first bit:
PImage []
Tells Processing that this function returns an array ([]) of images (PImage)

second bit:
splitImage
Gives this new function a name

Third bit:
(PImage splitMe, int ratio)
Tells processing what variables will be passed to the function. In this case an image (which will be called 'splitMe' inside the function) and an integer (which will be called 'ratio').

So if you want to use the splitImage function in your code, you will have to paste that ^ above bit of code into your sktech, then you use the function like this:

somearray = splitImage(yourimagename, ratiotosplit);

Like in his example, St33d does this:

buffer = splitImage(g,ratio);

If you're really new to this, that might be a bit much for now and you might be best off familiarising yourself with manipulating an image as an array of pixels and looking at copy()

http://processing.org/reference/pixels.html
http://processing.org/reference/copy_.html

Page Index Toggle Pages: 1