​

// "Consider a simulation of paint splatter drawn as a collection of colored dots. Most of the paint clusters around a central position, but some dots splatter out toward the edges. Can you use a normal distribution of random numbers to generate the positions of the dots? 

​

// Try creating a slider to adjust the standard deviation.

​

// TODO: Can you also use a normal distribution of random numbers to generate a color palette? 

​

let splats = [];

let SD = 50; // Standard deviation

let t = 0; // Global time

let state = [

  START = 'START',

  PLAY = 'PLAY'

];

​

function setup() {

  let dot = createVector(width/2, height/2)

  createCanvas(800, 800);

  gameState == state[0]

}

​

let gameState = state[0];

​

class Splat {

  constructor(sd) {

    this.sd = sd; // Standard deviation

    // Create x/y position using mouse position

    this.x = randomGaussian(mouseX, this.sd);

    this.y = randomGaussian(mouseY, this.sd);

    this.pos = createVector(this.x, this.y);

    // Splat time

    this.t = 0; 

    // White fill, can be used instead of RGB

    this.c = 255; 

​

    // Distance from mouse to splat

    this.d = dist(mouseX, mouseY, this.pos.x, this.pos.y); 

​

    // Radius linked to standard deviation

    this.r = randomGaussian(map(this.d, 0, this.d, this.d, 0), this.sd * .75);

​

    // RGB palette

    this.R = randomGaussian(255, 13);

    this.G = randomGaussian(225, 10);

    this.B = randomGaussian(125, 33);

  }

  draw() {

    noStroke();

    // fill(this.c);

    fill(this.R, this.G, this.B);

    circle(this.pos.x, this.pos.y, this.r);

  }

  update() {

    this.t++;

    if (this.t > 30 + (10) ){

      this.c = this.c * random(.78, .93);

      this.R = this.R * random(.92, .94);

      this.G = this.G * random(.62, .64);

      this.B = this.B * random(.82, .84);

      this.r = this.r * random(.93, .99);

    }

  }

}

​

function sketchSTART() {

  // gameState = state[0];

  instructions();

  if (mouseIsPressed) {

      gameState = state[1];

  }

​

}

​

function sketchPLAY() {

  paint();

  cleanup();

}

​

function draw() {

  background(15, 12, 15);

  t++

  if (gameState == state[0]) {

    sketchSTART();

  } else if (gameState == state[1]) {

    sketchPLAY();

  }

  // debug();

  print (gameState);

}

​

function mouseWheel(event) {

  if (event.delta > 0) {

    SD = SD - 2;

  } else if (event.delta < 0) {

    SD = SD + 2;

  }

  // print(event.delta)

} 

​

function instructions() {

  textFont('courier');

  fill(255, 255, 255, 52 + 48 * sin(t/12));

  textSize(44);

  textAlign(CENTER);

  text('Click + drag to paint', width/2, height/2);

  fill(255, 255, 255, 64);

  textSize(22);

  textAlign(LEFT);

  text('F to enter/exit fullscreen\nR to restart\nScroll mouse to resize', width/2-160, height/2 + 44);

}

​

function paint() {

​

  if (mouseIsPressed) {

    for (let i = 1; i < 30; i++) {

      splats.push(new Splat(SD));

    }

  }

​

}

​

function cleanup() {

  for (let i = 0; i < splats.length; i++) {

    if (splats[i].t < 60) {

      splats[i].update();

      splats[i].draw();

    } else {

      splats.splice(i, 1);

    }

  }  

}

​

function debug() {

  textFont('courier')

  textSize(44)

  textAlign(LEFT)

  fill(25)

  text(floor(frameRate(),2), width/2-80, height/4)

}

​

function keyPressed() {

  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {

    if (key === 'f' ) {

      let fs = fullscreen();

      fullscreen(!fs);

    }

  }

  if (key === 'r' && gameState === state[1]) {

    gameState = state[0];

  }

}

​

function windowResized() {

  if (fullscreen()) {

    resizeCanvas(windowWidth, windowHeight);

  } else {

    resizeCanvas(800, 800);

  }

}