Brainstorming: Is this even possible?

Processing Coding Questions
1

Just wondering if there is any way to achieve the following:

The sketch creates a grid.
A design is drawn inside the first square of the grid. The design is one of a group of designs and randomly assigned to each grid square from an array (using a for loop). This part I’ve got working fine, using “noLoop()” once all the grid squares are filled. Of course without the “noLoop” command the random choices continue to cycle for all grid squares. But I was wondering if there was any way to: draw in the first grid square, keep the rest of the grid squares cycling through random choices for a second or two before “locking in” on a choice for the second grid square, cycling another second or two before locking in on the choice for grid square three, etc. until grid squares are eventually “locked in” on their ultimate assigned design. Sort of like watching a slot machine at work. Essentially, it would mean stopping the loop for each grid square individually.

1 Like
2

Sure. Here’s an example.

int start=0;
int time;

void setup() {
  size(400, 400);
  noStroke();
  time = millis()+100;
}

void draw() {
  if (millis() > time) {
    time = millis() + 100;
    start++;
  }
  int t=0;
  for (int j=0; j < 20; j++) {
    for (int i=0; i < 20; i++) {
      if (t > start) {
        fill(random(255), random(255), random(255));
        rect(20*i, 20*j, 20, 20);
      }
      t++;
    }
  }
}

Note that I’m just drawing colorful rectangles. You can modify this to draw random symbols or grid patterns or whatever designs you like.

5 Likes
3

Hi @cottonchipper,

Yes it’s possible to code everything you want (almost)! :wink:

Before reading the code here is the process:

A Grid class holds a 2D array storing indices corresponding to different shapes (triangle, square, circle…).

A timer correspond to the cycling time of the current cell. An increasing index correspond to the current cell.

To display the current cell, we use millis() and modulo to get a cycling index based on the time.

Here is my take on this:

/**
 * Joseph HENRY
 * Processing Forum
 * https://discourse.processing.org/t/brainstorming-is-this-even-possible/39012
 */

import java.util.List;

class Grid {
  int timerDuration = 500;
  int cyclingShapeDuration = 100;
  int timer = 0;
  int cyclingCellIndex = 0;
  int NSHAPES = 4;
  int cols, rows, xCellSize, yCellSize;

  List<List<Integer>> cells;

  Grid(int cols, int rows) {
    this.cols = cols;
    this.rows = rows;
    this.xCellSize = width / cols;
    this.yCellSize = height / rows;
    
    cells = new ArrayList<List<Integer>>();

    // Fill the 2D array
    for (int i = 0; i < cols; i++) {
      List<Integer> column = new ArrayList<Integer>();

      for (int j = 0; j < rows; j++) {
        column.add(-1);
      }

      cells.add(column);
    }
  }

  void startTimer() {
    timer = millis();
  }

  void update() {
    // The grid is filled entirely
    if (cyclingCellIndex >= cols * rows) return;
    
    // The shape cycling animation is over
    if (millis() - timer > timerDuration) {
      startTimer();
       
      // Get back 2D coordinates
      int i = int(cyclingCellIndex / cols);
      int j = cyclingCellIndex % rows;
      
      // Set the cell with the random shape
      cells.get(i).set(j, getShapeIndex());
      
      // Move to the next cell
      cyclingCellIndex++;
      cyclingShapeDuration = int(random(50, 200));
    }
  }
  
  // Returns a cycling shape index depending on the time
  int getShapeIndex() {
    return int(millis() / cyclingShapeDuration) % NSHAPES;
  }

  void displayShape(int x, int y, int index) {
    float sx = xCellSize * 0.8;
    float sy = yCellSize * 0.8;

    fill(0);
    noStroke();

    pushMatrix();
    translate(x + xCellSize / 2, y + yCellSize / 2);
    
    switch(index) {
    case 0:
      ellipse(0, 0, sx, sy);
      break;
    case 1:
      rectMode(CENTER);
      rect(0, 0, sx, sy);
      break;
    case 2:
      triangle(0, -sy * 0.5, sx * 0.5, sy * 0.5, -sx * 0.5, sy * 0.5);
      break;
    case 3:
      ellipse(0, 0, sx / 2, sy);
      break;
    }
    popMatrix();
  }

  void display() {
    for (int i = 0; i < cols; i++) {
      int x = i * xCellSize;
      for (int j = 0; j < rows; j++) {
        int y = j * yCellSize;

        noFill();
        stroke(0);
        rectMode(CORNER);
        rect(x, y, xCellSize, yCellSize);

        int linearIndex = i * rows + j;
        int cellValue = cells.get(i).get(j);
        
        // The cell has a shape
        if (cellValue != -1) {
          displayShape(x, y, cellValue);
        }
        
        // This is the current cell
        if (linearIndex == cyclingCellIndex) {
          displayShape(x, y, getShapeIndex());
        }
      }
    }
  }
}

Grid grid;

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

  grid = new Grid(5, 5);
  grid.startTimer();
}

void draw() {
  background(255);
  
  grid.display();
  grid.update();
}

grid_shape

5 Likes
4

Hello @cottonchipper,

One of my explorations of this:

// Random Set Generator
// v1.0.0
// GLV 2022-09-30

// Mostly for visual effect.
// Shuffling a data set but this can be modified for random data.

IntList balls0;
IntList balls1;
int sz = 100;
int l = 10;

void setup() 
  {
  size(1100, 230);

  balls0 = new IntList();
  balls1 = new IntList();
  
  fill(0);
  textAlign(CENTER);
  textSize(96);
  
  for(int i=0; i<l; i++)
    {
    balls0.append(i);
    }
  }

void draw() 
  {
  background(255);
  
  int t1 = frameCount%5;
  int t2 = frameCount;
  
  if (t1 == 0)
    {
    balls0.shuffle();  
    }
    
  if(t2%120 == 0)
    {
    if(balls0.size()>0)
      {
      int tmp = balls0.get(0);
      balls1.append(tmp);
      balls0.remove(0);
      }
    }
  
  int y = 0;
  for(int x=0; x<balls0.size(); x++)
    {
    text(hex(balls0.get(x), 1), x*sz+100, y*sz+100);
    }
  
  for(int x=0; x<balls1.size(); x++)
    {
    text(hex(balls1.get(x), 1), (l-1-x)*sz+100, y*sz+200);
   }    
  }

flowers.gif.mov

:)

2 Likes