EnergyGrid.pde

// JavaScript code by Sean Angley ported to Processing.
// Original: https://www.khanacademy.org/cs/energy-grid/5571983911682048

//click to energize the grid

float a = 0;
float b = 0;
int dens = 8;  //density - ! numbers higher than 20 may slow down your browser !
float d; // must be initiazed after size();
float e = 180;     //energy
GridItem[] grid = new GridItem[0];

void setup() {
  size(400, 400);
  d = width/dens - width/dens/10; //diameter
  frameRate(36);
  colorMode(HSB);
  background(0);

  for (int i = dens; i > 0; i-=1) {
    for (int j = dens; j > 0; j-=1) {
      GridItem pos = new GridItem(
        i *(width/dens) - width/dens/2, 
        j *(height/dens) - width/dens/2, 
        (j*i+1)*0.08
      );
      grid = (GridItem[]) append(grid, pos);
    }
  }
}

void mouseClicked() {
  if (e < 1000) {
    e = 1000;
  }
}

void drawGrid() {
  for (int i = 0; i<grid.length; i++) {
    float h = map(e, 15, 1000, 140, 255);
    float br = map(e, 15, 1000, 100, 800);
    float x = noise(a +grid[i].no, a +1 +grid[i].no);
    float y = noise(b +grid[i].no, b +grid[i].no);            
    float nx = map(x*e, 0, e, -e, e);
    float ny = map(y*e, 0, e, -e, e);
    float nd = map(x*e, 0, e, -0.8*d, 2.8*d);
    stroke(h, 162, br);
    ellipse(grid[i].xPos+nx, grid[i].yPos+ny, d+nd, d+nd);
    stroke(h, 162, br, 25);
    ellipse(grid[i].xPos+nx, grid[i].yPos+ny, d/100+nd*1.5, d/100+nd*1.5);
  }
};

void draw() {
  noStroke();
  float brightness = map(e, 1, 1000, -20, 280);
  fill(5, 26, brightness, 60);
  rect(0, 0, width, height);
  noFill();
  drawGrid();

  a+=0.008;
  b+=0.008;
  if (e > 15) {
    e-=e/180;
  }
}

class GridItem {
  float xPos, yPos, no;
  GridItem(float x, float y, float n) {
    xPos = x;
    yPos = y;
    no = n;
  }
}