Loading...
Logo
Processing Forum
Hey, if i wanted to make all the little dots look as though they were moving around, kind of like on a television screen, what would I do?

// Example: 2D Array
size(800,600);
int cols = width;
int rows = height;

// Declare 2D array
int[][] myArray = new int[cols][rows];

// Initialize 2D array values
for (int i = 0; i < cols; i++) {
  for (int j = 0; j < rows; j++) {
    myArray[i][j] = int(random(255));
  }
}

// Draw points
for (int i = 0; i < cols; i++) {
  for (int j = 0; j < rows; j++) {
    stroke(myArray[i][j]);
    point(i,j);
  }
}

Replies(3)

If I understand you correctly, you want your points to constantly change. To achieve this, you have to make use of the setup() and draw() functions. (see Setup() and Draw())
To explain shortly, setup() is used to initialize your program while draw() is then executed repeatedly until your program ends.
If you are not familiar with this, you should definitely take a look at the reference.

But what you need to do is to change the values of your 2D Array every time draw() is called.
That is fairly simple:

Copy code
  1. // Declare columns and rows
  2. int cols;
  3. int rows;
  4. // Declare 2D Array
  5. int[][] myArray;
  6. void setup() {
  7.   size(400,300);
  8.  
  9.   // Initialize coumns and rows
  10.   cols = width;
  11.   rows = height;
  12.  
  13.   //Initialize 2D Array
  14.   myArray = new int[cols][rows];
  15.  
  16.   // Initialize 2D Array values
  17.   for (int i = 0; i < cols; i++) {
  18.     for (int j = 0; j < rows; j++) {
  19.       myArray[i][j] = int(random(255));
  20.     }
  21.   }
  22. }
  23. void draw() {
  24.   // Redraw Background
  25.   background(157);
  26.  
  27.   //Change 2D Array values
  28.   for (int i = 0; i < cols; i++) {
  29.     for (int j = 0; j < rows; j++) {
  30.       myArray[i][j] = int(random(255));
  31.     }
  32.   }
  33.  
  34.   // Draw points
  35.   for (int i = 0; i < cols; i++) {
  36.     for (int j = 0; j < rows; j++) {
  37.       stroke(myArray[i][j]);
  38.       point(i,j);
  39.     }
  40.   }
  41. }
The only problem with this is that it slows the program down a lot...
You could decrease the density, but I have taken a short cut and just made the screen size smaller...
Well, good luck
I hope this helped
Another shortcut is to get rid of myArray entirely, to avoid iterating over the screen twice.
In this particular case, since we rewrite the entire screen, background() isn't really necessary, but removing it probably won't change the speed.
Actually, a speed boost would be to write to the pixels[] array directly rather than using point(), but that's slightly more advanced for a beginner.

Great answer anyway (addressing the main issue while respecting the original intent).
A little optimization by using rect() to decrease the density:
*NOTE* I tried using 2 as divisor, but that got a little slow...

Copy code
  1. // Declare columns and rows
  2. int cols;
  3. int rows;
  4. // Declare 2D Array
  5. int[][] myArray;
  6. void setup() {
  7.   size(400,300);
  8.  
  9.   // Initialize columns and rows
  10.   //
  11.   // NOTE: By dividing it's size by 3,
  12.   // the number of pixels gets smaller
  13.   // but the program speeds up
  14.   cols = width /3;
  15.   rows = height/3;
  16.  
  17.   // Initialize 2D Array
  18.   myArray = new int[cols][rows];
  19.  
  20.   // Initialize 2D Array values
  21.   for (int i = 0; i < cols; i++) {
  22.     for (int j = 0; j < rows; j++) {
  23.       myArray[i][j] = int(random(255));
  24.     }
  25.   }
  26. }
  27. void draw() {
  28.   // Got rid of background()
  29.  
  30.   // Change 2D Array values
  31.   for (int i = 0; i < cols; i++) {
  32.     for (int j = 0; j < rows; j++) {
  33.       myArray[i][j] = int(random(255));
  34.     }
  35.   }
  36.  
  37.   // Draw points
  38.   for (int i = 0; i < cols; i++) {
  39.     for (int j = 0; j < rows; j++) {
  40.       stroke(myArray[i][j]);
  41.       fill  (myArray[i][j]);
  42.      
  43.       // Instead of drawing a point, drawing a rect()
  44.       // <rect()>
  45.       // will make it so that not as many points are
  46.       // required to fill the screen
  47.       //
  48.       // The '*3' and '3' make it so that
  49.       // the rect() fills the necessary space
  50.       rect(i*3,j*3,3,3);
  51.     }
  52.   }
  53. }
I was sort of wondering if using strokeWeight() would be more efficient than rect()?
I can see how using loadPixels() etc. would be helpful...
I hope this helped