Conways Fireworks

conways-fireworks.markdown

Conways Fireworks

A short little pen in honor of the 4th of July. I wanted to do something a little bit different,

A Pen by Ben Matthews on CodePen.

License.

script.js

window.addEventListener('resize', resize, false);

var fireworks;
var hills;
var stars;
var dirs = [
  [-1, -1],[0, -1],[1, -1],
  [-1, 0],         [1, 0],
  [-1, 1], [0, 1], [1, 1]
];

function Conway(){
  this.x = floor(random()*width);
  this.y = floor(random()*height*.7);
  this.type = floor(random()*3);
  this.size = random()*2;
  this.angle = random()*PI;
  this.baseHue = random()*360;
  this.hueSwap = random()*30 + 60;
  this.gridSize = 61;
  if (this.gridSize%2 == 0) this.gridSize;
  this.center = floor(this.gridSize/2);
  this.cyclesPerTick = 5;
  this.numTicks = 0;
  this.finished = false;
  this.grid = [];
  
  for (var i = 0; i < 2; i++){
    this.grid.push([]);
  }
  
  for (var i = 0; i < this.gridSize; i++){
    this.grid[0].push([]);
    this.grid[1].push([]);
    for (var j = 0; j < this.gridSize; j++){
      this.grid[0][i].push(false);
      this.grid[1][i].push(false);
    }
  }
  
  for (var i = 0; i < 10; i++){
    for (var j = 0; j < 10; j++){
      if (random() > .5){
        this.grid[0][this.center-i][this.center-j] = true;
        this.grid[0][this.center+i][this.center+j] = true;
        if (this.type == 0){
          this.grid[0][this.center+i][this.center-j] = true;
          this.grid[0][this.center-i][this.center+j] = true;
        } 
        else if (this.type == 1){
          this.grid[0][this.center-j][this.center+i] = true;
          this.grid[0][this.center+j][this.center-i] = true;
        } else if (this.type == 2){
          this.grid[0][this.center+i][this.center-j] = true;
          this.grid[0][this.center-i][this.center+j] = true;
          this.grid[0][this.center-j][this.center+i] = true;
          this.grid[0][this.center+j][this.center-i] = true;
          this.grid[0][this.center-j][this.center-i] = true;
          this.grid[0][this.center+j][this.center+i] = true;
        }
      }
    }
  }
  
  this.tick = function(){
    var ind = (this.numTicks%2);
    for (var i = 0; i < this.gridSize; i++){
      for (var j = 0; j < this.gridSize; j++){
        var neighbors = 0;
        for (var k = 0; k < dirs.length; k++){
          var dx = i+dirs[k][0];
          var dy = j+dirs[k][1];
          if (dx >= 0 && dy >= 0 && 
              dx < this.gridSize-1 && dy < this.gridSize-1){
            if (this.grid[ind][dx][dy]) neighbors++;
          }
        }
        if ((this.grid[ind][i][j] && 
            (neighbors == 2 || neighbors == 3)) ||
            (!this.grid[ind][i][j] && neighbors == 3)){
          this.grid[(ind+1)%2][i][j] = true;
        } else {
          this.grid[(ind+1)%2][i][j] = false;
        }
      }
    }
  }
  
  this.render = function(){
    this.numTicks++;
    var mod = pow(((48-this.numTicks)/40),2);
    this.size += mod*.5;
    var ind = this.numTicks%2;
    translate(this.x, this.y);
    scale(this.size);
    for (var i = 0; i < this.gridSize; i++){
      for (var j = 0; j < this.gridSize; j++){
        if (this.grid[ind][i][j]){
          fill(this.baseHue + random()*this.hueSwap, 
               100, 100, mod*100);
          // fill(0, 100, 100);
          rect(i-this.center, j-this.center, 1, 1);
        }
      }
    }
    
    if (this.numTicks > 40) this.finished = true;
    resetMatrix();
  }
}

function Hill(distance){
  this.scale = distance*20;
  this.bal = distance*50;
  this.hue = 180 - distance*60;
  this.pos = random()*2 - .5;
  
  this.heights = [];
  for (var i = 0; i < 40; i++){
    var y = 200*sin((i/40)*PI);
    this.heights.push(y);
  }
  
  this.render = function(){
    fill(this.hue, this.bal, this.bal);
    for (var i = 0; i < 40; i++){
      var x = width*this.pos - 10*this.scale;
      var y = this.heights[i];
      rect(x + i*this.scale, height-y +this.scale*4, this.scale+1, y);
    }
  }
}

function Star(){
  this.x = random();
  this.y = random();
  this.size = random()*2 + 1;
  
  this.render = function(){
    fill(160 + random()*40, 40, 60 + random()*20);
    rect(this.x*width, this.y*height, this.size, this.size);
  }
}

function setup(){
  createCanvas();
  colorMode(HSB, 360, 100, 100, 100);
  ellipseMode(CENTER);
  frameRate(10);
  fireworks = [];
  hills = [];
  for (var i = 0; i < 80; i++){
    hills.push(new Hill(i/80));
  }
  stars = [];
  for (var i = 0; i < 1000; i++){
    stars.push(new Star());
  }
  resize();
  fireworks.push(new Conway())
}

function draw(){
  background(0);
  noStroke();
  
  if (!stars) return;
  for (var i = 0; i < stars.length; i++){
    stars[i].render();
  }
  
  if (!fireworks) return;
  for (var i = fireworks.length-1; i >= 0; i--){
    if (fireworks[i].finished){
      fireworks.splice(i, 1);
    } else {
      fireworks[i].tick();
      fireworks[i].render();
    }
  }
  
  for (var i = 0; i < hills.length; i++){
    hills[i].render();
  }
  
  if (random() < .08){
    fireworks.push(new Conway());
  }
}

function resize(){
  resizeCanvas(window.innerWidth, window.innerHeight);
}

scripts

<script src="https://github.com/processing/p5.js/releases/download/0.5.6/p5.min.js"></script>

style.css

* { margin:0; padding:0; } 
html, body { width:100%; height:100%; } 
canvas { display:block; }