# Performance improvement on a halftone grid particle system

**URL:** <https://discourse.processing.org/t/performance-improvement-on-a-halftone-grid-particle-system/28892>\
**Category:** Coding Questions\
**Created:** [March 26, 2021, 10:32pm UTC](https://discourse.processing.org/t/performance-improvement-on-a-halftone-grid-particle-system/28892 "2021-03-26T22:32:37Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dehyde](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dehyde/32/5153_2.png) [@dehyde](https://discourse.processing.org/u/dehyde)\
**Post date:** [March 26, 2021, 10:32pm UTC](https://discourse.processing.org/t/performance-improvement-on-a-halftone-grid-particle-system/28892/1 "2021-03-26T22:32:37Z")

</div>

Hi there  
I’m trying to create an isometric grid of dots that serves both as a halftone effect (which I have reached) and a particle system that reacts to mouse location (gravity / repel).

I want the dots to react smoothly so I’m wondering if there’s a way to improve performance on this code.  
Because it’s supposed to act like a halftone image, the density of the dots should remain rather high.  
Any idea would be greatly appreciated

```auto
let img;
let smallPoint, largePoint;
let res;
let manualBrightness = 6;
let lineLength = 1;
let row;
let gfg;

function preload() {
  img = loadImage('https://i.imgur.com/Jvh1OQm.jpg');
}

function setup() {
  
  createCanvas(800, 800);
  smallPoint = 4;
  largePoint = 40;
  imageMode(CENTER);
  noStroke();
  background(0);
  img.loadPixels();
  res = 5;
  
  row = 0;
  
   gfg = new Array(floor((img.height)/res));
for (var i = 0; i < gfg.length; i++) {
    gfg[i] = new Array(floor((img.height)/res));
}
  
var h = 0;
for (var i = 0; i < gfg.length; i++) {
  row++;
  let localI=i*res;
    for (var j = 0; j < gfg[0].length; j++) {
      let localJ = j*res*2*Math.sqrt(3);
      // localJ=localJ+res*2*Math.sqrt(3);
        gfg[i][j] = brightness(img.get(localJ, localI));
      // console.log(gfg[i][j]);
    }
}
  
  
  
}

function draw() {
    background(0);
  
 row = 0;
  for (let i = 0; i<gfg.length; i++){
    
    let localI = i*res;
    row++;
    
    
    for (let j = 0; j<gfg[i].length; j++){
      
      let localJ = j*res*2*Math.sqrt(3);
      
      if(row%2==0){
        localJ=floor(localJ+res*Math.sqrt(3));
        
      }
      let pix = gfg[i][j];
      // B = brightness(pix);
      B=pix;
      B=(1/300)*B*manualBrightness;
      
      fill(255);
      stroke(255);
      strokeWeight(0);
      ellipse(localJ, localI,2,2);
      fill(255);
      let ellipseSize =B*res*(mouseX/width);
      // if(i%8==0 && (j+4)%8==0){
      // ellipseSize = 4;
      // }
      ellipse(localJ, localI, ellipseSize,ellipseSize);

      
    }
    
  }
    
}

```