# Missing overlay elements!

**URL:** <https://discourse.processing.org/t/missing-overlay-elements/44351>\
**Category:** Coding Questions\
**Created:** [April 25, 2024, 3:38pm UTC](https://discourse.processing.org/t/missing-overlay-elements/44351 "2024-04-25T15:38:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Unnikrishna](https://avatars.discourse-cdn.com/v4/letter/u/8e7dd6/32.png) [@Unnikrishna](https://discourse.processing.org/u/Unnikrishna)\
**Post date:** [April 25, 2024, 3:38pm UTC](https://discourse.processing.org/t/missing-overlay-elements/44351/1 "2024-04-25T15:38:54Z")

</div>

My background image is loading correctly. However, the overlay elements above the background image is not appearing.  
These are the overlay elements not appearing: Draw overlay, Draw Agent, Agent, Draw agents with dynamic colors, agentAlpha, strokeWidth, drawMode, overlayAlpha, noiseStrength, noiseScale, agentCount.  
Your help would be much appreciated.

```auto
PImage backgroundImage;
int agentCount = 200;
Agent[] agents = new Agent[agentCount];
float noiseScale = 200;
float noiseStrength = 15;
int overlayAlpha = 100;
int agentAlpha = 90;
float strokeWidth = 2.0;
int drawMode = 40;

 backgroundImage = loadImage("800x800-bg.jpg");
  backgroundImage.resize(width, height);
  
  for (int i = 0; i < agentCount; i++) {
    agents[i] = new Agent();
  }

  if (saveFrames) {
    saveFrames();
  }
}

void draw() {
  // Draw agents with dynamic colors
  for (int i = 0; i < agentCount; i++) {
    float hue = map(i, 0, agentCount, 0, 200); // Assign a unique hue to each agent
    stroke(hue, 100, 180, agentAlpha);
    
    if (drawMode == 1)
      agents[i].update1(noiseScale, noiseStrength, strokeWidth);
    else
      agents[i].update2(noiseScale, noiseStrength, strokeWidth);
  }
  
  // Draw overlay
  fill(overlayAlpha);
  noStroke();
  rect(20, 23, width, height);

  // Draw background image last
  image(backgroundImage, 0, 0);
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 25, 2024, 3:47pm UTC](https://discourse.processing.org/t/missing-overlay-elements/44351/2 "2024-04-25T15:47:53Z")

</div>

can you please show your code when it’s relevant

😉

---

<div class="post-metadata">

**Author:** ![Unnikrishna](https://avatars.discourse-cdn.com/v4/letter/u/8e7dd6/32.png) [@Unnikrishna](https://discourse.processing.org/u/Unnikrishna)\
**Post date:** [April 25, 2024, 4:02pm UTC](https://discourse.processing.org/t/missing-overlay-elements/44351/3 "2024-04-25T16:02:11Z")

</div>

Hi Chrisir,  
Thank you for the quick reply. Code included.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 25, 2024, 4:37pm UTC](https://discourse.processing.org/t/missing-overlay-elements/44351/4 "2024-04-25T16:37:21Z")

</div>

You need to draw the background first then the rest

---

<div class="post-metadata">

**Author:** ![Unnikrishna](https://avatars.discourse-cdn.com/v4/letter/u/8e7dd6/32.png) [@Unnikrishna](https://discourse.processing.org/u/Unnikrishna)\
**Post date:** [April 25, 2024, 4:41pm UTC](https://discourse.processing.org/t/missing-overlay-elements/44351/5 "2024-04-25T16:41:38Z")

</div>

Oh, Ok. I will try that. Will update once I have tried it. Thank you.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 25, 2024, 4:54pm UTC](https://discourse.processing.org/t/missing-overlay-elements/44351/6 "2024-04-25T16:54:49Z")

</div>

> [@Unnikrishna](#):
>
> ```auto
> // Draw background image last
> image(backgroundImage, 0, 0);
> 
> ```

instead of this you can say

```auto
  // Draw background image first 
  background (backgroundImage);

```

**here is my running version**

```auto
PImage backgroundImage;
int agentCount = 200;
Agent[] agents = new Agent[agentCount];
float noiseScale = 200;
float noiseStrength = 15;
int overlayAlpha = 100;
int agentAlpha = 90;
float strokeWidth = 2.0;
int drawMode = 40;

boolean saveFrames;

//---------------------------------------------------------------------

void setup() {
  size(800, 800);

  backgroundImage = loadImage("800x800-bg.jpg");
  backgroundImage.resize(width, height);

  for (int i = 0; i < agentCount; i++) {
    agents[i] = new Agent();
  }

  if (saveFrames) {
    saveFrame(); // ??
  }
}

void draw() {
  // Draw background image
  background (backgroundImage);

  // Draw overlay
  fill(overlayAlpha);
  noStroke();
  rect(20, 23, width-40, height-40);

  // Draw agents with dynamic colors
  for (int i = 0; i < agentCount; i++) {
    float hue = map(i, 0, agentCount, 0, 200); // Assign a unique hue to each agent
    stroke(hue, 100, 180, agentAlpha);

    if (drawMode == 1) {
      // agents[i].update1(noiseScale, noiseStrength, strokeWidth);
    } else {
      // agents[i].update2(noiseScale, noiseStrength, strokeWidth);
    }
  }
}

// ============================================================================================

class Agent {
  //
}
//

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 25, 2024, 6:03pm UTC](https://discourse.processing.org/t/missing-overlay-elements/44351/7 "2024-04-25T18:03:28Z")

</div>

Hello @Unnikrishna,

It is worthwhile to look at the references related to each element of your code:

- [setup() / Reference / Processing.org](https://processing.org/reference/setup_.html) \< You are missing this!
- [draw() / Reference / Processing.org](https://processing.org/reference/draw_.html)
- [background() / Reference / Processing.org](https://processing.org/reference/background_.html) \< discusses where to put background()

The _related items_ are worthy of perusing as well!

When posting code keep it simple and on point.

Other references:

- [Guidelines—Asking Questions](https://discourse.processing.org/t/guidelines-asking-questions/2147) \< This has a link to [Minimum, Complete, Verifiable Example](https://stackoverflow.com/help/mcve)

You can also link an image which can be useful for posted code:

```auto
size(500, 500);
PImage img = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg"); 
img.resize(width, height);

//image(img, 0, 0);
//or
background(img);

```

`:)`