How to make appear image at random position

Processing Coding Questions
1

Hello, I’m a graphic design student. For a poster project, i must create an image made of several fake ads appearing randomly on the screen like pop-up. The idea was to load about 10 images and make them appear randomly on the screen in a random order, to create different render each time we use the code. Does anyone know how to do that in Processing ? Thanks in advance for your help. Sorry if my english isn’t perfect.

1 Like
2

learn how to:
-a- load one image ( loadImage from basic examples )
-b- show it at a random location ( random from reference )
-c- make a String array with all picture file names “filesarray”
-d- load the pictures to a PImage array “imagearray”
-e- make a random index number ( depending from the length of the array )
but actually that is not what you need
make a int list array “idx” with numbers 0 … (length of array-1)
and shuffle it to get a random sequence for the pictures
https://processing.org/reference/IntList_shuffle_.html
-f- draw the pictures with

for ( int i = 0 ; i < imagearray.length; i++) image(imagearray[ idx[i] ], posx, posy )

post your code
with the </> Preformatted text button from the forum editor menu
if you have questions

1 Like
3

I’m totally lost to be honest. I’m really, really new to Processing.

PImage img;
PImage img1;
PImage img2;

void setup(){  
  background(0);
  size (620, 877);
  img = loadImage("1.png");
  img1 = loadImage("2.png");
  img2 = loadImage("3.png");
  
  for(int i=0; i<500; i= i + 1){
    float r1 = random(-620, 620);
    float r2 = random(-877, 877);
  image(img,r1,r2);
  image(img1,r1,r2);
  image(img2,r1,r2);
}
}

I need to make them appear randomly, here, there is just the last image i called.

4

Or something like that, with image nammed “1.png” , “2.png” and “3.png”

PImage img;
int r ;

void setup(){  
  background(0);
  size (620, 877);
}

void draw(){
  
  for(int i=0; i<500; i= i + 1){
    float r1 = random(-620, 620);
    float r2 = random(-877, 877);

r = random(1,3);
round(r);
img = loadImage( r + ".png");
image(img,r1,r2); 

}
}
5

-a- please use the
imgx = loadImage() in setup
image(imgx,x,y) in draw

-b-
better make a array for the filename and a array for the images
so the loading is a ONELINE FOR loop in setup,
the draw a ONELINE in draw

String[] myFileArray = {"moonwalk1.jpg", "moonwalk2.jpg"};  // picture names,, add more
PImage[] myImageArray;
int many;

void setup() {
  size(640, 360);
  many = myFileArray.length;
  myImageArray = new PImage[many];
  for (int i=0; i < many; i++ )   myImageArray[i]=loadImage(myFileArray[i]);  // load all images// from sketchdir or data/
  frameRate(1);
}

void draw() {
  int idx = (int)random(many);                                  // select a random index number
  float x = random(width/2);                                    // and a random picture position
  float y = random(height/2);
  println("i "+idx+" "+myFileArray[idx]);
  image(myImageArray[idx],x,y);                                 // and show it
}

to show many in a random sequence try

String[] myFileArray = {"moonwalk1.jpg", "moonwalk2.jpg" };  // picture names.. add more
PImage[] myImageArray;
int many;
IntList idx = new IntList();

void setup() {
  size(640, 360);
  many = myFileArray.length;
  myImageArray = new PImage[many];
  for (int i=0; i < many; i++ ) {
    myImageArray[i]=loadImage(myFileArray[i]);  // load all images // from sketchdir or data/
    idx.append(i);                              // make a array intlist with numbers 0 .. many-1
  }
  noLoop();
  idx.shuffle();                                // make the sequence random
}

void draw() {
  background(200,200,0);
  for (int i=0; i < many; i++ ) {
    int posx = (int)random(width/2);
    int posy = (int)random(height/2);
    int id = idx.get(i);
    image( myImageArray[ id ], posx, posy );  // and show it at random position
    println("i "+i+" idx "+id+" file "+myFileArray[id]+" x "+posx+" y "+posy);
  }
}

void keyPressed() {
  if ( key == 'r' ) {
    idx.shuffle();
    redraw();
  }
}