Missing overlay elements!

Processing Coding Questions
1

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.

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);
}
2

can you please show your code when it’s relevant

:wink:

2 Likes
3

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

4

You need to draw the background first then the rest

2 Likes
5

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

6

instead of this you can say

  // Draw background image first 
  background (backgroundImage);

here is my running version

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 {
  //
}
//
1 Like
7

Hello @Unnikrishna,

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

The related items are worthy of perusing as well!

When posting code keep it simple and on point.

Other references:

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

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

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

:)

1 Like