Something like infographic

A simple sketch written with Processing.

It's not an actual infographic as it contains only random data and displays no meaningful information.

When you move the mouse cursor on the area below, the size and color of each circle will change reflecting the mouse cursor position. That's all.

Built with Processing and Processing.js

Source code:

// Processing 3.2.1

ArrayList<Circle> circles = new ArrayList<Circle>();

void setup() {
  size(320, 240);
  background(255f);
  
  for(float y = 15f; y < height; y += 30f) {
    for(float x = 25f; x < width; x += 30f) {
      circles.add(new Circle(x, y));
    }
  }
}

void draw() {
  background(0f, 0f, 100f);
  for(Circle currnetCircle : circles) {
    currnetCircle.reflect(mouseX, mouseY);
    currnetCircle.draw();
  }
}
class Circle {
  static final float NOISE_SCALE = 0.01f;
  
  final float positionX;
  final float positionY;

  float radius;

  float hueParameter;
  final float saturationParameter;
  final float brightnessParameter;
  
  Circle(float posX, float posY) {
    positionX = posX;
    positionY = posY;
    saturationParameter = 70f;
    brightnessParameter = 90f;
  }
  
  void draw() {
    colorMode(HSB, 100f);
    noStroke();
    fill(hueParameter, saturationParameter, brightnessParameter);
    ellipseMode(RADIUS);
    ellipse(positionX, positionY, radius, radius);
  }
  
  void reflect(float x, float y) {
    radius = 1f + 2f * noise(positionX * NOISE_SCALE, positionY * NOISE_SCALE, (x - y) * 0.5f  * NOISE_SCALE);
    radius = pow(radius, 3);

    hueParameter = 500f * noise(positionX * NOISE_SCALE, positionY * NOISE_SCALE, (x + y) * 0.5f * NOISE_SCALE);
    hueParameter = hueParameter % 100;
  }
}