Fill with points with noise stroke without killing FPS

Processing Coding Questions
1

Is there a way to do this without having the frame rate go down to about 8fps?

Use noise to set the stroke color of a dot between 0-255, uniformly fill an area with dots. Like TV snow.

float noiseScale = 0.02;
float r;
void setup() {
   size(400, 600);
   ellipseMode(RADIUS);
   r = 150;
}
void draw() {
   background(185);

   float gap = 3;
   
   strokeWeight(3);
   stroke(255, 255, 0);
   for(int i=0; i<=height; i+=gap) {
      hdotline(0, width, i, gap);
   }
   
   textAlign(LEFT, TOP);
   fill(255);
   text(frameRate, 5, 5);
}
void hdotline(float x1, float x2, float y, float gap) {
   for(int i=(int)x1; i<=x2; i+=gap) {
      float noiseVal = noise(random(0, 255)*noiseScale, random(0, 255)*noiseScale);
      stroke(noiseVal*255);
      point(i, y);
   }
}
1 Like
2

Shaders are your friend

1 Like
3

using point will kill your fps instead use the pixel array also calling noise for every pixel will kill your fps but is not so easy to overcome. you could generate n frames and just loop those but if you really want to have a non-repeating noise visualisation your best bet (at least before taking on shaders) is to start manipulating pixels directly. below is a really simple and imperfect example that is rough around the edges but will show that there is an improvement in the fps from your original and it can be improved further.

int gridResolution;
int gridColumns;
int gridRows;
float noiseScale = .02;

void setup() {
  size(512, 512, P2D);
  initGrid();
}

void initGrid() {
  gridResolution = floor(min(64, max(4, mouseY / 32)));
  gridColumns = floor(width / gridResolution);
  gridRows = floor(height / gridResolution);
}

void mouseMoved() {
  initGrid();
}

void fillRectangle(int x, int y, int w, int h, color c) {
  for (int yy = y; yy < y + h; yy++) {
    for (int xx = x; xx < x + w; xx++) {
      pixels[xx + yy * width] = c;
    }
  }
}

void draw() {
  loadPixels();
  float noiseVal;
  for (int y = 0; y < gridRows; y++) {
    for (int x = 0; x < gridColumns; x++) {
      noiseVal = noise(random(0, 255)*noiseScale, random(0, 255)*noiseScale);
      fillRectangle(x * gridResolution, y * gridResolution, gridResolution, gridResolution, color(noiseVal * 255));
    }
  }
  updatePixels();
  textAlign(LEFT, TOP);
  fill(255);
  text(frameRate, 5, 5);
}
3 Likes
4

your code with

size(400, 600,FX2D);

speeds up here from 11FPS to 60FPS

int gap = 3;
   
void setup() {
   size(400, 600,FX2D);
   strokeWeight(gap);
   //frameRate(500);  // get 160 here
}

void draw() {
   surface.setTitle(nf(frameRate,0,1)+" FPS");
   for(int j = 0; j <= height; j+=gap) 
     for(int i = 0; i <= width;  i+=gap) {
        stroke( noise( random(0, 255)/255.0, random(0, 255)/255.0 ) * 255  );
        point(i, j);
     }
}
3 Likes
5

This works great, thanks!

1 Like