# Fill with points with noise stroke without killing FPS

**URL:** https://discourse.processing.org/t/fill-with-points-with-noise-stroke-without-killing-fps/14286
**Category:** Coding Questions
**Created:** [September 29, 2019, 5:10pm UTC](https://discourse.processing.org/t/fill-with-points-with-noise-stroke-without-killing-fps/14286 "2019-09-29T17:10:09Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![ddownn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ddownn/32/2731_2.png) [@ddownn](https://discourse.processing.org/u/ddownn)
#### Post date: [September 29, 2019, 5:10pm UTC](https://discourse.processing.org/t/fill-with-points-with-noise-stroke-without-killing-fps/14286/1 "2019-09-29T17:10:09Z")

</div>

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.

```auto
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);
   }
}

```

---

<div class="post-metadata">

### Author: ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)
#### Post date: [September 29, 2019, 5:52pm UTC](https://discourse.processing.org/t/fill-with-points-with-noise-stroke-without-killing-fps/14286/2 "2019-09-29T17:52:03Z")

</div>

Shaders are your friend

---

<div class="post-metadata">

### Author: ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)
#### Post date: [September 29, 2019, 10:56pm UTC](https://discourse.processing.org/t/fill-with-points-with-noise-stroke-without-killing-fps/14286/3 "2019-09-29T22:56:17Z")

</div>

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.

```auto
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);
}

```

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [September 30, 2019, 2:56am UTC](https://discourse.processing.org/t/fill-with-points-with-noise-stroke-without-killing-fps/14286/4 "2019-09-30T02:56:26Z")

</div>

your code with

```auto
size(400, 600,FX2D);

```

speeds up here from 11FPS to 60FPS

```auto
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);
     }
}

```

---

<div class="post-metadata">

### Author: ![ddownn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ddownn/32/2731_2.png) [@ddownn](https://discourse.processing.org/u/ddownn)
#### Post date: [September 30, 2019, 10:59am UTC](https://discourse.processing.org/t/fill-with-points-with-noise-stroke-without-killing-fps/14286/5 "2019-09-30T10:59:39Z")

</div>

This works great, thanks!
