I am new to Processing and to programming in general. So that might be the source of my issue. I’ve been trying to implement and idea into code but I can’t seem to find the proper way to do this. So basically I have the line of a poem converted into a .jpg file, that disintegrates into dots floating around and reassembles into text again. Now what I would like to do, would be to work with multiple .jpg files (corresponding to the following lines of the poem) that would follow the same pattern. I’ve been recommended to use a variable instead of the load command I currently have, so that the multiple .jpg files I want to use are stored in a list from which the program will choose the file it wants to use at random. However, I’m not sure how I should rework the code so that it can actually do that.
I hope my issue was clearly formulated.
Thanks a lot for your time!
Below is a snippet of the code I have
PImage img;
void setup(){
fullScreen();
img= loadImage("line1.jpg");
//This is where the line of a poem that has been converted to a .jpg file is loaded
img.resize (width,height);
noCursor();
noStroke();
fill(0);
rectMode(CENTER);
}
void draw(){
background(255);
float tilesX = 250;
float tilesY = 250;
float tileW = width/tilesX;
float tileH = height/tilesY;
for(int x = 0; x < tilesX; x++){
for(int y = 0; y < tilesY; y++){
color c = img.get(int(x*tileW) ,int(y*tileH));
float bri = brightness(c);
float waveX = sin(radians(frameCount+x^2+2*y));
float waveY = cos(radians(frameCount+2*x+4*y));
float mag = mouseX;
//This allows the organisation of the dots into text to be controlled by the mouse
if(bri<100){
ellipse(x*tileW + waveX*mag, y*tileH + waveY*mag, tileW+1, tileH+1);
} else{
}
}
}
}
Thanks a lot! That’s really helpful!
I formatted the code, should look better now.
However, I’m having an issue when I try to run everything together. I get the following message: “The method get(in) in the ArrayList is not applicable for the arguments (int, int)”
Am I doing something wrong?
import java.util.Random;
public static Random RND = new Random();
int rand = RND.nextInt(3);
String filename = "line" + rand + ".png";
//This is to generate the three files randomly. The files are named line0, line1 and line2
ArrayList <PImage> img = new ArrayList<PImage>();
void setup(){
fullScreen();
for (int i = 0; i<3; i++)
img.add(loadImage("\\data\\" + "line" + ".png"));
noCursor();
noStroke();
fill(0);
rectMode(CENTER);
}
void draw(){
background(255);
float tilesX = 250;
float tilesY = 250;
float tileW = width/tilesX;
float tileH = height/tilesY;
for(int x = 0; x < tilesX; x++){
for(int y = 0; y < tilesY; y++){
color c = img.get(int(x*tileW) ,int(y*tileH));
float bri = brightness(c);
float waveX = sin(radians(frameCount+x^2+2*y));
float waveY = cos(radians(frameCount+2*x+4*y));
float mag = mouseX;
if(bri<100){
ellipse(x*tileW + waveX*mag, y*tileH + waveY*mag, tileW+1, tileH+1);
} else{
}
}
}
}
I provided an example of how to generate an ArrayList of PImages.
You have to understand that first, decide if an ArrayList is what you want to use and then integrate it into your code.
The Processing website has resources (tutorials, references, examples, etc.): https://processing.org/
The Coding Train on YouTube also has some great lessons.
A Google search can be rewarding:
Go through the tutorials, work through some examples and read the references for methods that you are using.
When you look at a reference also go to the related references.
Sorry for the late reply, and thanks for the resources, they have been helpful!
I was working on the project over the weekend and I’ve come to realize what I need to implement my idea is a two dimensional ArrayList, so that images can be stored and width and height can be indexed in order for the get(in) function to work. I found some information on the processing topic of Arrays and Two-dimensional Arrays, and I reworked the code to fit the purpose of my project but it seems I’m running into an issue again. Could you provide some tips or point me to resources where I could work that out?
Or should I consider another way of indexing my width and height into the ArrayList so that get(in) can access the widths and heights of the images.
Many thanks!
import java.util.Random;
public static Random RND = new Random();
int rand;
ArrayList<PImage> images = new ArrayList<PImage>();
void setup()
{
size(1080, 720);
int tileW = width;
int tileH = height;
int[][] images = new int[tileW][tileH];
for (int i = 0; i < tileW; i++) {
for (int j = 0; j < tileH; j++) {
images[i][j] = int(random(255));
}
}
rand = RND.nextInt(3);
println(rand);
for (int i = 0; i<3; i++)
{
images.add(loadImage("\\data\\" + i + ".png"));
println(i);
println(nf(i,2));
println("\\data\\" + nf(i,2) + ".png");
}
}
void draw()
{
if(frameCount%10 == 0)
{
rand = RND.nextInt(3);
println(rand);
imageMode(CENTER);
image(images.get(rand), RND.nextInt(100), RND.nextInt(100));
}
float tilesX = 250;
float tilesY = 250;
float tileW = width/tilesX;
float tileH = height/tilesY;
for(int x = 0; x < tilesX; x++){
for(int y = 0; y < tilesY; y++){
color c = ArrayList.get(int(x*tileW), int(y*tileH));
float bri = brightness(c);
float waveX = sin(radians(frameCount+x^2+2*y));
float waveY = cos(radians(frameCount+2*x+4*y));
float mag = mouseX;
if(bri<100){
ellipse(x*tileW + waveX*mag, y*tileH + waveY*mag, tileW+1, tileH+1);
} else{
}
}
}
}
ArrayList<PImage> images = new ArrayList<PImage>();
Use different names!
Hints:
float tilesX = images2.get(0).width; //width of PImage 0
float tilesY = images2.get(0).height; //height of PImage 0
color c = images2.get(0).get(x, y); //First get is for PImage and the second get is for color of pixel
Hi @glv,
Many thanks for your prompt reply and for the hints!
Use different names!
Sorry I didn’t spot that myself!
I think I managed to get what I wanted with this project, just need to make each image load by clearing the previous one because right now the images I have load upon each other, but I think I can resolve this by calling back the setup() function.
Just a quick question, so as you can see, I’ve set a different colour to each image that’s generated. Would it be possible to also set a different shape to the image so that each time the dots disperse and group back together they do it by following a different pattern?
So this is the part of the code that does that, would it be possible to somehow randomize that, or define various float waveX and float waveY from which the system can then pick?
