p5.js sketches

conway

made in collaboration with irena

on desktop, you can press any key to pause, and click squares to toggle their life. you can also refresh to randomize the grid again.

code


const N = 10;
const liveLikelihood = 0.5;
const framesPerSecond = 30;
let grid = [];
let isPaused = false;

function setup() {
  createCanvas(N*40, N*40);
  for (let i = 0; i < N; i++) {
    let row = []
    for (let j = 0; j < N; j++) {
      row.push(random(0, 1) < liveLikelihood); // true means live
    }
    grid.push(row);
  }
  frameRate(framesPerSecond);
}

function keyTyped() {
  isPaused = !isPaused;
}

function check(i, j) {
  if (i < 0 || i >= N) {
    return 0;
  } else if (j < 0 || j >= N) {
    return 0;
  } else {
    return (grid[i][j])? 1 : 0;
  }
  
}

function sumNeighbors(i, j) {
  return check(i-1, j-1) +check(i, j-1) + check(i+1, j-1) +
    check(i-1, j) + check(i+1, j) +
    check(i-1, j+1) + check(i, j+1) + check(i+1, j+1);
}

let gridNeighbors = [];

function step() {
  let newGrid = []
  for (let i = 0; i < N; i++) {
    let row = [];
    for (let j = 0; j < N; j++) {
      let neighbors = sumNeighbors(i, j);
      if (grid[i][j]) {
        if (neighbors < 2 || neighbors > 3) {
          row.push(false);
        } else {
          row.push(true);
        }
      } else {
        if (neighbors == 3) {
          row.push(true);
        } else {
          row.push(false);
        }
      }
    }
    newGrid.push(row);
  }
  grid = newGrid;
}

function mouseClicked() {
  let squarei = floor((mouseX)/40);
  let squarej = floor((mouseY)/40);
  console.log(mouseX, mouseY, squarei, squarej);
  if (squarei >= 0 && squarei < N && squarej >= 0 && squarej < N) {
    grid[squarei][squarej] = !grid[squarei][squarej];
  }
}

function draw() {
  if (isPaused) {
    background('red');
  } else {
    background(255);
  }
  
  for (let i = 0; i < N; i++) {
    for (let j = 0; j < N; j++) {
      if (grid[i][j]) {
        fill(0,200);
      } else {
        fill(255,150);
      }
      square(i*40, j*40, 40);
    }
  }
  
  if (frameCount % (framesPerSecond/5) == 0 && !isPaused) {
    step();
  }
}

bubbles

made in collaboration with colleen

note: if you are on ios, open fullscreen for touch events to work

code

class Bubble {
  constructor(x, y, size) {
    // This code runs once when an instance is created.
    this.x = x;
    this.y = y;
    this.size = size;
    
    this.sinOffset = random(-100, 100);
  }

  show() {
    circle(this.x, this.y, this.size);
  }
  
  move() {
    this.x += sin((this.sinOffset + frameCount) * 0.1);
    this.y -= 1;
  }
  
}


let bubbles = [];
let c1, c2;
let firstClick;
var w = window.innerWidth;
var h = window.innerHeight;  

function setup() {
  canvas=createCanvas(w, h);
  frameRate(30);
  textAlign(CENTER);
  textSize(18);
  firstClick = false;
  
  // set colors for gradient
  c1 = color(240,230,250);
  c2 = color(63, 191, 191);

  // draw gradient background
  for(let y=0; y

< return to the lab