How do i make a RANDOM image (from my data) be the background?

koko

So i'm currently using a picArray of 83 different images (.png's) to create a randomised graphic on a black background.

Instead of the background being black, i want it to be a RANDOM image, of the 4 images i've created and named bg0, bg2, bg3, bg4 in my data file.

I've tried using another picArray and it wouldn't work.

Here's my current code. (I currently have it so that just one image loads (bg2.png))

[code in comments]

GoToLoop

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

static final int PICS = 83, BACKS = 4;
final PImage[] pics = new PImage[PICS], bgs = new PImage[BACKS];
int picIdx, bgIdx;

void setup() {
  size (800, 800);
  smooth(4);
  imageMode(CENTER);

  for (int i = 0; i < PICS; pics[i] = loadImage("a"  + i++ + ".png"));
  for (int i = 0; i < BACKS; bgs[i] = loadImage("bg" + i++ + ".png"));
}

koko

Thanks for your reply GoToLoop!

And thanks for your advice! As you can probably see, i'm still new and only a week in to my programming experiments.

Just a couple questions.

1. when you state,

   static final int PICS = 83, BACKS = 4;
   final PImage[] pics = new PImage[PICS], bgs = new PImage[BACKS];
   int picIdx, bgIdx;
   

i'm slightly confused by your terms as i haven't seen them in the processing references / haven't been taught them yet. i know there are some Java terms not mentioned in Processing references. could you comment on how they work?

1. And with,

for (int i = 0; i < PICS; pics[i] = loadImage("a" + i++ + ".png")); for (int i = 0; i < BACKS; bgs[i] = loadImage("bg" + i++ + ".png"));

do my background images still need to be in my picArray? or could they be loaded separately? as bg = "bg1.png"?.

Here's where i'm currently at.

    PImage p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17, p18, p19, p20, p21, p22, p23, p24, p25, p26, p27, p28, p29, p30, p31, p32, p33, p34, p35, p36, p37, p38, p39, p40, p41, p42, p43, p44, p45, p46, p47, p48, p49, p50, p51, p52, p53, p54, p55, p56, p57, p58, p59, p60, p61, p62, p63, p64, p65, p66, p67, p68, p69, p70, p71, p72, p73, p74, p75, p76, p77, p78, p79, p80, p81, p82, bg1, bg2, bg3, bg4;


    PImage [] picArray = new PImage [87]; 

    static final int PICS = 83, BACKS = 4;
    final PImage[] pics = new PImage[PICS], bgs = new PImage[BACKS];
    int picIdx, bgIdx;


    void setup (){
      size (800, 800);
      p0 = loadImage("a0.png");
      p1 = loadImage("a1.png");
      p2 = loadImage("a2.png");
      p3 = loadImage("a3.png");
      p4 = loadImage("a4.png");
      p5 = loadImage("a5.png");
      p6 = loadImage("a6.png");
      p7 = loadImage("a7.png");
      p8 = loadImage("a8.png");
      p9 = loadImage("a9.png");
      p10 = loadImage("a10.png");
      p11 = loadImage("a11.png");
      p12 = loadImage("a12.png");
      p13 = loadImage("a13.png");
      p14 = loadImage("a14.png");
      p15 = loadImage("a15.png");
      p16 = loadImage("a16.png");
      p17 = loadImage("a17.png");
      p18 = loadImage("a18.png");
      p19 = loadImage("a19.png");
      p20 = loadImage("a20.png");
      p21 = loadImage("a21.png");
      p22 = loadImage("a22.png");
      p23 = loadImage("a23.png");
      p24 = loadImage("a24.png");
      p25 = loadImage("a25.png");
      p26 = loadImage("a26.png");
      p27 = loadImage("a27.png");
      p28 = loadImage("a28.png");
      p29 = loadImage("a29.png");
      p30 = loadImage("a30.png");
      p31 = loadImage("a31.png");
      p32 = loadImage("a32.png");
      p33 = loadImage("a33.png");
      p34 = loadImage("a34.png");
      p35 = loadImage("a35.png");
      p36 = loadImage("a36.png");
      p37 = loadImage("a37.png");
      p38 = loadImage("a38.png");
      p39 = loadImage("a39.png");
      p40 = loadImage("a40.png");
      p41 = loadImage("a41.png");
      p42 = loadImage("a42.png");
      p43 = loadImage("a43.png");
      p44 = loadImage("a44.png");
      p45 = loadImage("a45.png");
      p46 = loadImage("a46.png");
      p47 = loadImage("a47.png");
      p48 = loadImage("a48.png");
      p49 = loadImage("a49.png");
      p40 = loadImage("a50.png");
      p51 = loadImage("a51.png");
      p52 = loadImage("a52.png");
      p53 = loadImage("a53.png");
      p54 = loadImage("a54.png");
      p55 = loadImage("a55.png");
      p56 = loadImage("a56.png");
      p57 = loadImage("a57.png");
      p58 = loadImage("a58.png");
      p59 = loadImage("a59.png");
      p60 = loadImage("a60.png");
      p61 = loadImage("a61.png");
      p62 = loadImage("a62.png");
      p63 = loadImage("a63.png");
      p64 = loadImage("a64.png");
      p65 = loadImage("a65.png");
      p66 = loadImage("a66.png");
      p67 = loadImage("a67.png");
      p68 = loadImage("a68.png");
      p69 = loadImage("a69.png");
      p70 = loadImage("a70.png");
      p71 = loadImage("a71.png");
      p72 = loadImage("a72.png");
      p73 = loadImage("a73.png");
      p74 = loadImage("a74.png");
      p75 = loadImage("a75.png");
      p76 = loadImage("a76.png");
      p77 = loadImage("a77.png");
      p78 = loadImage("a78.png");
      p79 = loadImage("a79.png");
      p80 = loadImage("a80.png");
      p81 = loadImage("a81.png");
      p82 = loadImage("a82.png");
      bg1 = loadImage("bg1.png");
      bg2 = loadImage("bg2.png");
      bg3 = loadImage("bg3.png");
      bg4 = loadImage("bg4.png");
      picArray[0] = p0;
      picArray[1] = p1;
      picArray[2] = p2;
      picArray[3] = p3;
      picArray[4] = p4;
      picArray[5] = p5;
      picArray[6] = p6;
      picArray[7] = p7;
      picArray[8] = p8;
      picArray[9] = p9;
      picArray[10] = p10;
      picArray[11] = p11;
      picArray[12] = p12;
      picArray[13] = p13;
      picArray[14] = p14;
      picArray[15] = p15;
      picArray[16] = p16;
      picArray[17] = p17;
      picArray[18] = p18;
      picArray[19] = p19;
      picArray[20] = p20;
      picArray[21] = p21;
      picArray[22] = p22;
      picArray[23] = p23;
      picArray[24] = p24;
      picArray[25] = p25;
      picArray[26] = p26;
      picArray[27] = p27;
      picArray[28] = p28;
      picArray[29] = p39;
      picArray[30] = p30;
      picArray[31] = p31;
      picArray[32] = p32;
      picArray[33] = p33;
      picArray[34] = p34;
      picArray[35] = p35;
      picArray[36] = p36;
      picArray[37] = p37;
      picArray[38] = p38;
      picArray[39] = p39;
      picArray[40] = p40;
      picArray[41] = p41;
      picArray[42] = p42;
      picArray[43] = p43;
      picArray[44] = p44;
      picArray[45] = p45;
      picArray[46] = p46;
      picArray[47] = p47;
      picArray[48] = p48;
      picArray[49] = p49;
      picArray[50] = p50;
      picArray[51] = p51;
      picArray[52] = p52;
      picArray[53] = p53;
      picArray[54] = p54;
      picArray[55] = p55;
      picArray[56] = p56;
      picArray[57] = p57;
      picArray[58] = p58;
      picArray[59] = p59;
      picArray[60] = p60;
      picArray[61] = p61;
      picArray[62] = p62;
      picArray[63] = p63;
      picArray[64] = p64;
      picArray[65] = p65;
      picArray[66] = p66;
      picArray[67] = p67;
      picArray[68] = p68;
      picArray[69] = p69;
      picArray[70] = p70;
      picArray[71] = p71;
      picArray[72] = p72;
      picArray[73] = p73;
      picArray[74] = p74;
      picArray[75] = p75;
      picArray[76] = p76;
      picArray[77] = p77;
      picArray[78] = p78;
      picArray[79] = p79;
      picArray[80] = p80;
      picArray[81] = p81;
      picArray[82] = p82;
      picArray[83] = bg1;
      picArray[84] = bg2;
      picArray[85] = bg3;
      picArray[86] = bg4;



      imageMode(CENTER);
      smooth (4);

    for (int i = 0; i < PICS; pics[i] = loadImage("a"  + i++ + ".png"));
    for (int i = 0; i < BACKS; bgs[i] = loadImage("bg" + i++ + ".png"));

    }

    void draw (){
        }
        void keyPressed (){
          if (key == CODED) {
            if (keyCode == RIGHT){
              saveFrame("se10-##.png");
            } else {
              noLoop();
            }
          }
          }


    void mousePressed() {

      background(0);

      for(int b=0; b<10; b++){

      image(picArray[int(random(picArray.length))], random(width), random(height), random(80, 80), random(80, 80));
      }

    }

koogs

Delete lines 13 to 186. Your images are now in pics[] and bgs[] so change line 217 as well.

koogs

There are other problems with the code but do that first as it hurts my eyes just looking at it.

koko

I feel like i'm getting somewhere! thanks for all the help. This is where i'm at. (i'm struggling with phrasing the last line which randomises the image and their location within the sketch.

PImage p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17, p18, p19, p20, p21, p22, p23, p24, p25, p26, p27, p28, p29, p30, p31, p32, p33, p34, p35, p36, p37, p38, p39, p40, p41, p42, p43, p44, p45, p46, p47, p48, p49, p50, p51, p52, p53, p54, p55, p56, p57, p58, p59, p60, p61, p62, p63, p64, p65, p66, p67, p68, p69, p70, p71, p72, p73, p74, p75, p76, p77, p78, p79, p80, p81, p82, bg0, bg1, bg2, bg3;


PImage [] picArray = new PImage [87]; 

static final int PICS = 83, BACKS = 4;
final PImage[] pics = new PImage[PICS], bgs = new PImage[BACKS];
int picIdx, bgIdx;


void setup (){
  size (800, 800);
  imageMode(CENTER);
  smooth (4);
  background (0);

}

void draw (){
    } 
    void keyPressed (){
      if (key == CODED) {
        if (keyCode == RIGHT){
          saveFrame("se10-##.png");
        } else {
          noLoop();
        }
      }
      }


void mousePressed() {

  background (bgIdx);

  for(int picIdx=0; picIdx<10; picIdx++){

  image(int picIdx (random(width), random(height), random(80, 80), random(80, 80));
  }

}

Lord_of_the_Galaxy

You could use ArrayList class if you want to keep adding new images.
I'm not sure I understood your needs though.
And please, please format your code in the question also, I couldn't even read your full question.

Lord_of_the_Galaxy

@GoToLoop why have you made int PICS = 83, BACKS = 4 static? I understood the need for final, but why static? Who would use more than one instance of a processing based application?

koko

The original question (slightly revised) was,

"So i'm currently using a picArray of 83 different images (.png's) to create a randomised graphic of 10 images on a black background.

Instead of the background being black, i want it to be a RANDOM image, of the 4 images i've created and named bg0, bg2, bg3, bg4 in my data file.

I've tried using another picArray and it wouldn't work."

koogs

you've removed too much. these two lines were necessary for loading the images and backgrounds:

for (int i = 0; i < PICS; pics[i] = loadImage("a"  + i++ + ".png"));
for (int i = 0; i < BACKS; bgs[i] = loadImage("bg" + i++ + ".png"));

koogs

you don't need these, they've been replaced with pics[] and bgs[]:

PImage p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17, p18, p19, p20, p21, p22, p23, p24, p25, p26, p27, p28, p29, p30, p31, p32, p33, p34, p35, p36, p37, p38, p39, p40, p41, p42, p43, p44, p45, p46, p47, p48, p49, p50, p51, p52, p53, p54, p55, p56, p57, p58, p59, p60, p61, p62, p63, p64, p65, p66, p67, p68, p69, p70, p71, p72, p73, p74, p75, p76, p77, p78, p79, p80, p81, p82, bg0, bg1, bg2, bg3;


PImage [] picArray = new PImage [87]; 

GoToLoop

Who would use more than one instance of a Processing based application?

• I simply like to identify which fields can be safely shared among multiple instances of their class, regardless whether that class is effectively singleton or not.
• Besides declaring them as both static & final, I go full caps + underline for their names! :)>-
• Also, if some method doesn't directly access any non-static member, I declare them as static final too; but w/o full caps of course. :P
• Regarding your question about multiple instances of Processing (PApplet), that happens quite a lot. For instance, I've answered many forum threads about it myself. :>
• Although I confess 99% of them is about instantiating another PApplet. Running multi-instances of the very same sketch is quite rare. =P~

Lord_of_the_Galaxy

@GoToLoop I did mean to say multiple instances of the very same sketch, but failed (oops!) to frame my question correctly. I myself have used multiple instances of PApplet in many sketches, but never more than a single instance of a single sketch.
I'll keep what you said in mind when I code from now on.

Lord_of_the_Galaxy

@koko That's a lot better. This is my try to solve your problem:

//declare & initialize variables
static final int PICS = 83, BACKS = 4;
final PImage[] pics = new PImage[PICS], bgs = new PImage[BACKS];

void setup(){
  size(500, 400);//replace with what you want
  //load the images
  for (int i = 0; i < PICS; pics[i] = loadImage("a"  + i++ + ".png"));
  for (int i = 0; i < BACKS; bgs[i] = loadImage("bg" + i++ + ".png"));
 //Should the background remain same throughout the time the sketch runs(i.e. chosen at start of sketch and not changed)?In that case:
 //image(bgs[int(random(0, BACKS))], 0, 0, width, height);
 //otherwise, skip to case 2
}

void draw(){
  //case 2:
  //image(bgs[int(random(0, BACKS))], 0, 0, width, height);
  //I think you know what to do after this
}

Correct me if I misunderstood you.

GoToLoop

• @Lord_of_the_Galaxy, here's an example for "Multi-Auto-Instantiated Sketch".
• Constants SKETCHES, DIM, SMOOTH & FUR are declared static.
• Therefore they're not created unnecessarily more than once for each PApplet instantiation. :)>-
• While variable PVector[] puppies is created for each PApplet. So each 1 keeps its own state. *-:)
• Notice also that this sketch runs even in the ancient Processing v1.5.1.
• Just change smooth(SMOOTH); to smooth() for it then. :P

/**
 * Multi-Auto-Instantiated Sketch Sample (v1.02)
 * GoToLoop (2016-May-21)
 * 
 * forum.Processing.org/two/discussion/16689/
 * how-do-i-make-a-random-image-from-my-data-be-the-background#Item_14
 *
 * forum.Processing.org/two/discussion/2396/how-to-turn-this-into-an-arraylist
 * forum.Processing.org/two/discussion/3919/confusion-with-the-pvector
 *
 * studio.ProcessingTogether.com/sp/pad/export/ro.9jCT0UHalHCI3
 * studio.ProcessingTogether.com/sp/pad/export/ro.93n3OpWs89REU
 */

static final void main(final String[] args) {
  String sketch = Thread.currentThread().getStackTrace()[1].getClassName();

  for (int i = 0; i < SKETCHES; ++i) {
    int x = 450*i, y = 200*i;
    String[] sketchArgs = { "--location=" + x + "," + y, sketch };
    PApplet.main( concat(sketchArgs, args) );
  }
}

static final short SKETCHES = 3, DIM = 040, SMOOTH = 4;
static final color FUR = #7E2C06;

import java.util.List;
final List<PVector> puppies = new ArrayList<PVector>();

void setup() {
  size(420, 300);
  smooth(SMOOTH); // Change it to smooth() for P1.
  noLoop();
  noStroke();
  ellipseMode(CENTER);
}

void draw() {
  frame.setTitle("Pupies: " + puppies.size() + "   Frame: " + frameCount);
  background((color) random(#000000));
  for (final PVector p : puppies)  render(p);
}

void mousePressed() {
  if (mouseButton == LEFT)  puppies.add(new PVector(mouseX, mouseY));
  else if (puppies.size() > 0)  puppies.remove(0);
  redraw = true;
}

void render(final PVector pup) {
  final float x = pup.x, y = pup.y;

  // Head & Body:
  fill(FUR);
  ellipse(x, y, DIM, DIM);
  ellipse(x, y + DIM, DIM*1.2, DIM*1.2);

  // Ears:
  fill(0);
  ellipse(x - DIM*.44, y + DIM*.1, DIM*.3, DIM*.8);
  ellipse(x + DIM*.44, y + DIM*.1, DIM*.3, DIM*.8);

  // Mouth & Eyes:
  fill(-1);
  ellipse(x, y + DIM*.2, DIM*.3, DIM*.3);
  ellipse(x - DIM*.2, y - DIM*.1, DIM*.2, DIM*.2);
  ellipse(x + DIM*.2, y - DIM*.1, DIM*.2, DIM*.2);

  // Nose & Irides:
  fill(0);
  ellipse(x, y + DIM*.1, DIM*.16, DIM*.16);
  ellipse(x - DIM*.14, y - DIM*.16, DIM*.1, DIM*.1);
  ellipse(x + DIM*.26, y - DIM*.16, DIM*.1, DIM*.1);
}

Lord_of_the_Galaxy

@GoToLoop That is one monster of a sketch, but yeah, you proved your point. :)>-
One thing confuses me, what exactly is a List<Class>? I thought it was ArrayList<Class>.

GoToLoop

List is the interface for class ArrayList and many others:
http://docs.Oracle.com/javase/8/docs/api/java/util/List.html

AbstractList, AbstractSequentialList, ArrayList, AttributeList, CopyOnWriteArrayList, LinkedList, RoleList, RoleUnresolvedList, Stack, Vector

koko

Lord_of_the_Galaxy, thanks for the code & comments made through your sketch.

Unfortunately, i'm struggling to see where there will be a random set of 10 images on top of a random set of 4 backgrounds? Normally there would have to be something along the lines of, for(int picIdx=0; picIdx<10; picIdx++){

//declare and initialise variables
static final int PICS = 83, BACKS = 4;
final PImage[] pics = new PImage[PICS], bgs = new PImage[BACKS];
int picIdx, bgIdx;

//setting up page
//loading images
void setup () {
  size (800, 800);
  imageMode(CENTER);
  smooth (4);

  for (int i = 0; i < PICS; pics[i] = loadImage("a"  + i++ + ".png"));
  for (int i = 0; i < BACKS; bgs[i] = loadImage("bg" + i++ + ".png"));

  background (0);
  //the background of the sketch will begin black but then become one of the 
  //4 set backgrounds, randomly changing as mousePressed
}

void draw () {
}

//a random PIC and a random BACK is placed on to the sketch?
void mousePressed () {

  image(bgs[int(random(0, BACKS))], 0, 0, width, height);
  image(pics[int(random(0, PICS))], 0, 0, width, height);

    for(int picIdx=0; picIdx<10; picIdx++){
      //is this relevant to my task?

}}
//ignore, this is just so i can save the frames
void keyPressed () {
  if (key == CODED) {
    if (keyCode == RIGHT) {
      saveFrame("se10-##.png");
    } else {
      noLoop();
    }
  }
}

koko

The random set of 10 images are also to be positioned on random places on the screen.

koogs

Line 30, you will need a loop, yes. Line 28 should be within that loop as that's the part you want to repeat. You'll need to change the position parameters though.

Lord_of_the_Galaxy

I think I failed to understand your question properly. Sorry!
So now this is what I think your question asks:
Each time user presses the mouse, a random image from bgs[] is selected as background and 10 random images from pics[] are drawn randomly on the screen.
Is that so?

Lord_of_the_Galaxy

In that case, this might be of help:

//declare & initialize variables
static final int PICS = 83, BACKS = 4;//static and final because of what @GoToLoop said
final PImage[] pics = new PImage[PICS], bgs = new PImage[BACKS];//final to seal it

void setup(){
  size(500, 400);//replace with what you want
  //load the images
  for (int i = 0; i < PICS; pics[i] = loadImage("a"  + i++ + ".png"));
  for (int i = 0; i < BACKS; bgs[i] = loadImage("bg" + i++ + ".png"));

  smooth(4);//switch on anti-aliasing to 4
  //imageMode(CENTER);//You dont't need this really
  background(0);//start black
}

void draw(){
  //Do nothing much here
}

void mousePressed(){
  //Any conditions required?
  image(bgs[int(random(0, BACKS))], 0, 0, width, height);//set a random background

  //Now we put 10 random images on the screen 
  for(int i = 0; i < 10; i++){
    image(pics[int(random(0, PICS))], 0, 0);//I have no idea about the size of your images, it would help if you mentioned that.
  }
}

//P.S. I haven't got any images wth me, so I cannot test this sketch without a load of errors

Lord_of_the_Galaxy

@GoToLoop Thanks!

GoToLoop

Alternative version attempt: :ar!

// forum.Processing.org/two/discussion/16689/
// how-do-i-make-a-random-image-from-my-data-be-the-background#Item_23

// GoToLoop (2016-May-22)

static final int BACKS = 4, PICS = 83, COLS = 5, ROWS = 2;
final PImage[] pics = new PImage[PICS], bgs = new PImage[BACKS];

void setup() {
  size(1000, 300); // 200x150 (5x2) in 4:3 ratio.
  smooth(4); // helps out resize()'s quality.
  noLoop();  // user input trigger canvas redraw().
  frameRate(10);
  imageMode(CORNER);

  for (int i = 0; i < BACKS; ++i) // matches canvas' dimensions
    (bgs[i] = loadImage("bg" + i + ".png")).resize(width, height);

  for (int i = 0; i < PICS; ++i) // 200x150 (5x2)
    (pics[i] = loadImage("a"  + i + ".png")).resize(width/COLS, height/ROWS);
}

void draw() {
  background(bgs[(int) random(BACKS)]);

  final int w = width/COLS, h = height/ROWS;
  for (int y = 0; y < ROWS; ++y)  for (int x = 0; x < COLS; ++x)
    image(pics[(int) random(PICS)], x*w, y*h);
}

void mousePressed() {
  redraw();
}

void keyPressed() {
  redraw();
}

GoToLoop

//final because they won't change in size.

@Lord_of_the_Galaxy, final keyword merely seals classes, methods & fields.
For fields, it means they can't be reassigned once initialized. Not even w/ null or itself!
This won't compile for example: #-o

static final int PICS = 83;
final PImage[] pics = new PImage[PICS]; // Field pics is sealed!

void setup() {
  pics = pics; // ERROR!
  pics = null; // ERROR!
  pics = new PImage[1]; // ERROR!
}

In another angle, final protects us against unintentional re-assignment for fields. :>

https://Processing.org/reference/final.html

GoToLoop

final keyword has an extra performance boost when deployed for primitive types + String fields.
But only for when the value assigned to those final fields is a compile-time literal though. L-)
In those cases, the Java compiler replaces those fields w/ their actual value wherever they show up in the source code! \m/

koogs

Line 17 is incrementing i. Line 16 is also incrementing i...

GoToLoop

Oops, thx! Fixed now! X_X

Lord_of_the_Galaxy

@GoToLoop I already knew this:

final keyword merely seals classes, methods & fields. For fields, it means they can't be reassigned once initialized. Not even w/null or itself!

But failed to frame it correctly.
But i did not know this:

final keyword has an extra performance boost when deployed for primitive types + String fields. But only for when the value assigned to those final fields is a compile-time literal though. In those cases, the Java compiler replaces those fields w/ their actual value wherever they show up in the source code!

Thanks!

Lord_of_the_Galaxy

@GoToLoop koko said:

The random set of 10 images are also to be positioned on random places on the screen. (Emphasis added)

Your code (line 26 - 29) places random images at precise, predetermined locations on the screen as 5 columns and 2 rows.

koko

I think I failed to understand your question properly. Sorry! So now this is what I think your question asks: Each time user presses the mouse, a random image from bgs[] is selected as background and 10 random images from pics[] are drawn randomly on the screen. Is that so?

Nailed it!

Currently, i'm seeing this...

Which is strange as my background images are the same size as my sketch? (800, 800) The sizes i want my PICS will be 80, 80, (which i've now stated in my sketch),

      image(pics[int(random(0, PICS))], 80, 80);

My two concerns are the size of the background and randomly positioning the 10 shapes in different locations in the sketch.

here is an image of what i've been trying to create.

koogs

the background looks like an imageMode() problem.

koko

image(pics[int(random(0, PICS))], random(width), random(height), 80, 80);

This solved my random positioning problem... but i'm still trying to make the background fit the sketch...

koko

It was an imageMode problem!! it's now fully working. Thank you for all donations of knowledge. It truly is a great time to be learning to programme, when all this online support is willing to help out a newbie. you guys are all awesome.

Much love.

Lord_of_the_Galaxy

@koko and @kooks I commented out imageMode(CENTER) in my code. So that can't be.

Lord_of_the_Galaxy

The only problem was another small mistake (the random positioning one) that I failedd to notice, but koko had already nailed it.