How to print one rectangle at a time vs all at once?

Processing Coding Questions
1

Hi all-

n00b here, trying to learn this fantastic language but am having some trouble. I am taking this one step at a time but am missing something. My end idea is to have 100x100 pix rect’s fade in and fade out in random spots on a 1920x1080 screen. I just want to start with getting one at a time to display, stay for x seconds and then go away. I want the next rect to display y seconds after the previous so that several rects are on the screen at one time, but creating an endless loop of rects. Lets say at one time there are 50.

I started small with 100x100 screen and 20 rects. I have an array of x and y values to use and a for loop to display them all, but obviously all at once. I saw that there is a delay() function but I am pretty sure that this is not the way to go.

What should I look into to accomplish this? I have been reading Shiffmans learning processing book and am about half way through. Thanks in advance!!

L-

int       stageW      = 1000;
int       stageH      = 1000;
int 	  squaresize  = 100;	

String    pathDATA    = "../../data/";

int       numAssets   = 200;
PVector[] xyz         = new PVector[numAssets];

void settings() {
	size(stageW, stageH, P3D);
}

void setup() {
	background(0);
	for (int i = 0; i < numAssets; i++) { //randomizing x and y for the numassets (does once)
		PVector _pt = new PVector();
		_pt.x = (int)random(stageW-100); 
		_pt.y = (int)random(stageH-100);
		xyz[i] = _pt;
	}
}

void draw() {
	for (int i = 0; i < 20; i++){
		square(xyz[i].x, xyz[i].y);
	}
}

void square(float x, float y){
	noStroke();
	fill(0, 34, 68, 235);
		pushMatrix();
			translate(x, y, 0);
			rect(0, 0, 100, 100);
		popMatrix(); 
}
1 Like
2

Hello and welcome to the forum!

Nice to have you here.

The function draw() updates the screen only once at its end and not throughout.

Hence you can’t see anything that happens in the for loop in draw().

So, get rid of the for-loop and instead use the fact that draw() in itself loops automatically.

Chrisir

int stageW = 1000;
int stageH = 1000;
int squaresize = 100;

String pathDATA = "…/…/data/";

int numAssets = 200;
PVector[] xyz = new PVector[numAssets];

int i=0;

void settings() {
  size(stageW, stageH, P3D);
}

void setup() {
  background(0);
  for (int i = 0; i < numAssets; i++) { //randomizing x and y for the numassets (does once)
    PVector _pt = new PVector();
    _pt.x = (int)random(stageW-100);
    _pt.y = (int)random(stageH-100);
    xyz[i] = _pt;
  }
  frameRate(2);
}

void draw() {
  square(xyz[i].x, xyz[i].y);

  i++;
}

void square(float x, float y) {
  noStroke();
  fill(0, 34, 68, 235);
  pushMatrix();
  translate(x, y, 0);
  rect(0, 0, 100, 100);
  popMatrix();
}
2 Likes
3

Hi!

Thanks for the reply. Lowering the frame count is not really a long term solution for me tho, I have plans to keep this in HD for some color changes and hopefully opacity changes. I understand what you are saying about draw tho, so I am assuming I need to create an object or class for the squares I want to make, but to trigger them I need some sort of way to do this not all at once, so is there something I am missing that would do that without adjusting the frame rate?

L-

4

you can use frameCount also (in the previous sketch I reduced the frameRate, now I check frameCount to slowly increase the numbers of rects shown in the for-loop)

(Don’t confuse frameCount and frameRate)



int stageW = 1000;
int stageH = 1000;
int squaresize = 100;

String pathDATA = "…/…/data/";

int numAssets = 200;
PVector[] xyz = new PVector[numAssets];

int upperBorder=0; 

void settings() {
  size(stageW, stageH, P3D);
}

void setup() {
  background(0);
  for (int i = 0; i < numAssets; i++) { //randomizing x and y for the numassets (does once)
    PVector _pt = new PVector();
    _pt.x = (int)random(stageW-100);
    _pt.y = (int)random(stageH-100);
    xyz[i] = _pt;
  }
}

void draw() {

  background(0);

  for (int i = 0; i < min(upperBorder, numAssets); i++) {
    square(xyz[i].x, xyz[i].y);
  }//for

  if (frameCount%29==0) {
    upperBorder++;
  }
}

void square(float x, float y) {

  noStroke();
  fill(0, 34, 68, 235);
  pushMatrix();
  translate(x, y, 0);
  rect(0, 0, 100, 100);
  popMatrix();
}
2 Likes
5

Hello,

I modified an example from here:
https://processing.org/tutorials/arrays/

Code:

int num = 50;
int[] x = new int[num];
int[] y = new int[num];
float a = 255; //alpha

void setup() 
  { 
  size(500, 500);
  noStroke();
  }

void draw() 
  {
  background(0);
 
  //random
  if (frameCount%30 == 0)  // Update every 30 frames
    {
  // Generate random data
    x[0] = int(random(0, width));
    y[0] = int(random(0, height));
    
  //Shift the values to the right
    for (int i = num-1; i>0; i--) 
      {
      x[i] = x[i-1];
      y[i] = y[i-1];
      }
    }
  
  // Draw the circles
  for (int j = 0; j < num; j++) 
    {
    a = 255;
    fill(255, 255, 0, a);
    circle(x[j], y[j], 30);
    }
  }

I removed the a[] array for alpha; I will leave this for you to do.

image
image502×527 14.9 KB

:slight_smile:

1 Like