Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="controls">
  <button id="controlToggle">⚙️</button>
<p>More features/bug fixes to come. Enjoy! 🦠</p>
  <p>Drag image files into the rectangle or click to "feed" the image.</p>
  <label for="ruleset">Ruleset: Each pixel...</label>
  <select id="ruleset">
    <option value="3neighborRandom">...inherits rgba randomly from 3 neighbors</option>
    <option value="hslrandom">...inherits hsl randomly from neighbors (Thanks to Dawson Conway)</option>
    <option value="cloneOfNeighbor">...becomes a clone of a neighbor</option>
    <option value="blendIn">...becomes the average of its neighbors</option>
    <option value="brightestAll">...becomes the brightest of its neighbors and itself</option>
    <option value="pokemon1">...is a pokemon (slow) (Overtake = 1)</option>
    <option value="pokemon2">...is a pokemon (slow) (Overtake = 2)</option>
    <option value="pokemon3">...is a pokemon (slow) (Overtake = 3)</option>
    <option value="pokemon4">...is a pokemon (slow) (Overtake = 4)</option>
<!--   
   Pokemon rules:
      If pixel has 3 or more neighbors of greater type, inherits from those neighbors (is consumed)
        red > green > blue > red
        cyan > yellow > fuchsia > cyan
      If pixel has neighbors of its own or an adjacent type, it inherits from those
        red <-> fuchsia <-> blue <-> cyan <-> green <-> yellow <-> red
      If pixel is neutral, becomes a clone of random neighbor
-->
<!--     <option value="peerPressure">...Caves to peer pressure</option> -->
    <option value="pause">...just sits there</option>
  </select>
  <br><br>
  <span><strong>☠️ Death Conditions ☠️</strong></span>
  <br>
  <input type="checkbox" id="lonelyDeath" name="lonelyDeath" checked>
  <label for="lonelyDeath">is alone</label>
  <input type="checkbox" id="neutralCheckbox" name="neutralCheckbox">
  <label for="neutralCheckbox">is neutral</label>
  <input type="checkbox" id="dimCheckbox" name="dimCheckbox">
  <label for="dimCheckbox">is dim</label>
  <input type="checkbox" id="whiteCheckbox" name="whiteCheckbox">
  <label for="whiteCheckbox">too white</label>
  <br><br>
  <span><strong>🎮 Other Stuff 🦜</strong></span>
  <br>
  <button id="clearButton">clear</button>
  <input type="checkbox" checked id="foodClick" name="foodClick">
  <label for="foodClick">food click</label>
<!--   <input type="checkbox" id="deathFirst" name="deathFirst">
  <label for="deathFirst">deaths first</label> -->
</div>

<div
  class="dropzone-wrapper"
>
  <canvas
    id="thecanvas"
    class="dropzone"
    height="200"
    width="300"
  ></canvas>
</div>
<img id="ericpic" style="visibility: hidden;" src="data:image/png;base64,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"/>
<img id="seedpic" style="visibility: hidden;" src="data:image/jpeg;base64,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"/>
              
            
!

CSS

              
                #thecanvas {
  border: 1px grey solid;
  background-color: black;
}

html {
  background-color: #123;
  color: #ddd;
  font-family: sans-serif;
  text-align: center;
}

html, body {
  height: 100%;
}

#controls {
  position: absolute;
  margin: 1%;
  padding: 10px 15px;
  background-color: #123C;
  border-radius: 5px;
  border: 1px grey solid;
  bottom: 0;
}

#controlToggle {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px;
  background-color: #aaa1;
  color: #9999;
  border: 1px #9999 solid;
  padding: 5px;
  visibility: visible;
}

#controlToggle:hover {
  background-color: #6666;
}

#controlToggle:active {
  background-color: #AAAA;
}

.dropzone-wrapper {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  height: 100%;
}

/* @media (max-aspect-ratio: 1/1) { */
  #thecanvas {
    width: 99%;
    height: auto:
  }


@media (min-aspect-ratio: 3/2) {
  #thecanvas {
    height: 99%;
    width: auto;
  }
}
              
            
!

JS

              
                const theCanvas = document.getElementById('thecanvas')
const ctx = theCanvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
ctx.antialias = false;

const ruleset = document.getElementById('ruleset')
const diesIfAlone = document.getElementById('lonelyDeath')
const diesIfNeutral = document.getElementById('neutralCheckbox')
const diesIfDim = document.getElementById('dimCheckbox')
const diesIfWhite = document.getElementById('whiteCheckbox')
const foodClick = document.getElementById('foodClick')
const deathsFirst = document.getElementById('deathFirst')

const drawImage = (image) => {
  ctx.drawImage(this, 0, 0)
}

const getCanvasEventCoords = (e) => {
  var x;
    var y;
    if (e.pageX || e.pageY) { 
      x = e.pageX;
      y = e.pageY;
    }
    else { 
      x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
      y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 
    x -= theCanvas.offsetLeft;
    y -= theCanvas.offsetTop;
  return {x, y};
}

const handleFileDrop = (e) => {
  if(e.originalEvent.dataTransfer.items){
    const canvasBox = theCanvas.getBoundingClientRect()
    const {x, y} = getCanvasEventCoords(e);
    const dropCoords = {
      x: theCanvas.width * ((x)/ canvasBox.width),
      y: theCanvas.height * ((y) / canvasBox.height)
    }
    const file = e.originalEvent.dataTransfer.files[0];
    const reader = new FileReader();
    reader.onload = (loadEvent) => {
      const img = new Image();
      
      img.onload = () => {
        ctx.drawImage(img, dropCoords.x - 12, dropCoords.y - 12, 24, 24);
      }
      img.src = loadEvent.target.result;
    }
    reader.readAsDataURL(file);
  }
}


// DOM Shenanigans
$('.dropzone').on('drop', function(e) {
  e.preventDefault();
  e.stopPropagation();
  handleFileDrop(e);
});

$('#thecanvas').on('click', function(e) {
  if(foodClick.checked){
    const {x, y} = getCanvasEventCoords(e);
    const eric = document.getElementById('ericpic');
    const canvasBox = theCanvas.getBoundingClientRect()
    const dropCoords = {
      x: theCanvas.width * ((x)/ canvasBox.width),
      y: theCanvas.height * ((y) / canvasBox.height)
      }
    ctx.drawImage(eric, dropCoords.x - 12, dropCoords.y - 12, 24, 24); 
  }
});

$('#clearButton').on('click', () => {
  ctx.clearRect(0,0,theCanvas.width, theCanvas.height);
})

$('#controlToggle').on('click', function(e) {
  const controls = document.getElementById('controls')
  if(controls.style.visibility === 'hidden'){
    controls.style.visibility = 'visible';
  } else {
    controls.style.visibility = 'hidden';
  }
});

$('.dropzone-wrapper').on('dragover', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).addClass('dragover');
});

$('.dropzone-wrapper').on('dragleave', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).removeClass('dragover');
});

const isAlive = (pixel) => pixel.r > 0 || pixel.g > 0 || pixel.b > 0 || pixel.a > 0

const pixelOffset = (x, y, width, height) => {
  let xCorrected = -1;
  let yCorrected = -1;
  // ideal
  if(y >= 0 && y < height && x >= 0 && x < width){
    return y * width * 4 + x * 4;
  } else { // something is out of bounds
    // get the right y
    if(y < 0){
      yCorrected = height - 1;
    } else if (y >= height) {
      yCorrected = 0;
    }
    // get the right x
    if(x < 0){
      xCorrected = width - 1;
    } else if (x >= width){
      xCorrected = 0;
    }
    return (yCorrected >= 0 ? yCorrected : y) * width * 4 +
      (xCorrected >= 0 ? xCorrected : x) * 4;
  }
}

const getPixelData = (x, y, img) => {
  const offset = pixelOffset(x, y, img.width, img.height);
  return {
    r: img.data[offset],
    g: img.data[offset + 1],
    b: img.data[offset + 2],
    a: img.data[offset + 3],
  }
}

const getPixelDataWHue = (x, y, img) => {
  const offset = pixelOffset(x, y, img.width, img.height);
  const pixel = {
    r: img.data[offset],
    g: img.data[offset + 1],
    b: img.data[offset + 2],
    a: img.data[offset + 3],
  }
  return {...pixel, h: hue(pixel)};
}

const getColorNeighbors = (x, y, img) => {
  return {
   neighbors: [
      getPixelData(x-1, y-1, img), getPixelData(x, y-1, img), getPixelData(x+1, y-1, img),
      getPixelData(x-1, y, img),                              getPixelData(x+1, y, img),
      getPixelData(x-1, y+1, img), getPixelData(x, y + 1, img),   getPixelData(x+1, y+1, img),
    ],
   self: getPixelData(x, y, img),
  }
}

const getColorNeighborsWHue = (x, y, img) => {
  return {
   neighbors: [
      getPixelDataWHue(x-1, y-1, img), getPixelDataWHue(x, y-1, img), getPixelDataWHue(x+1, y-1, img),
      getPixelDataWHue(x-1, y, img),                                  getPixelDataWHue(x+1, y, img),
      getPixelDataWHue(x-1, y+1, img), getPixelDataWHue(x, y + 1, img),   getPixelDataWHue(x+1, y+1, img),
    ],
   self: getPixelDataWHue(x, y, img),
  }
}

const randomlyInheritFromNeighbors = ({neighbors, self}) => {
  const nonNullNeighbors = neighbors.filter(neighbor => 
    neighbor.r > 0 || neighbor.g > 0 || neighbor.b > 0 || neighbor.a > 0        
  )
  if (nonNullNeighbors.length > 0 && !itDies(self, neighbors)) {
    return [
      nonNullNeighbors[Math.floor(Math.random() * nonNullNeighbors.length)].r,
      nonNullNeighbors[Math.floor(Math.random() * nonNullNeighbors.length)].g,
      nonNullNeighbors[Math.floor(Math.random() * nonNullNeighbors.length)].b,
      nonNullNeighbors[Math.floor(Math.random() * nonNullNeighbors.length)].a,
    ]; 
  } else {
    return [0, 0, 0, 0]
  }
}

const similar = (a, b) => {
  const MIN_DIFF = 20;
  return Math.abs(a.r - b.r) < MIN_DIFF &&
      Math.abs(a.b - b.b) < MIN_DIFF &&
      Math.abs(a.g - b.g) < MIN_DIFF ?
        true : false; 
}

const isAlone = (self, neighbors) => {
  for (let i = 0; i < neighbors.length; i += 1){
    if(similar(self, neighbors[i])){
      return false;
    }
  }
  return true;
}

const isCrowded = (self, neighbors) => {
   for (let i = 0; i < neighbors.length; i += 1){
     if(!similar(self, neighbors[i])){
       return false;
      }
    }
    return true;
  }

const isNeutral = (self) => {
  const MIN_DIFF = 20;
  return Math.abs(self.r - self.g) < MIN_DIFF &&
     Math.abs(self.g - self.b) < MIN_DIFF &&
     Math.abs(self.r - self.b) < MIN_DIFF;
  return false;
}

const isDim = (self) => {
  return (self.r < 170 &&
    self.g < 170 &&
    self.b < 170) || self.a < 127;
}

const isWhiteish = (self) => {
  return self.r > 200 &&
    self.g > 200 &&
    self.b > 200 &&
    self.a > 127;
}

const itDies = (self, neighbors) => {
  // TODO
  // Find a way to write the expression "if itDies itDies()"
  if(isAlive(self)){
    return (diesIfAlone.checked && isAlone(self, neighbors))
      || (diesIfDim.checked && isDim(self))
      // || isCrowded(self, neighbors)
      || (diesIfNeutral.checked && isNeutral(self))
      || (diesIfWhite.checked && isWhiteish(self))
  } else {
    return false;
  }
}

const hue = (pixel) => {
   let {r, g, b}  = pixel;
   r /= 255, g /= 255, b /= 255;
    let max = Math.max(r, g, b), min = Math.min(r, g, b);
    let h;
    if(max == min){
        h =  -1; // 0 is still red
    } else {
      const d = max - min;
      switch(max){
        case r: 
          h = (g - b) / d + (g < b ? 6 : 0);
          break;
        case g:
          h = (b - r) / d + 2;
          break;
        case b:
          h = (r - g) / d + 4;
          break;
      }
      h /= 6;
    }
    return h;
}

const colorCategory = ({h}) => {
  if(h <= 0){
    return 'neutral';
  } else if(h > 0.917){ // top red
    return 'r';
  } else if(h > 0.75){ // fuchsia
    return 'f';
  } else if(h > 0.583){ // blue
    return 'b';
  } else if (h > 0.41){ // cyan
    return 'c'
  } else if (h > 0.25){ // green
    return 'g';
  } else if (h > 0.083){ // yellow
    return 'y'
  } else { // bottom red
    return 'r'
  }
  return 'neutral'
}

const inheritFrom = (parentArray) => {
  return {
      r: parentArray[Math.floor(Math.random() * parentArray.length)].r,
      b: parentArray[Math.floor(Math.random() * parentArray.length)].b,
      g: parentArray[Math.floor(Math.random() * parentArray.length)].g,
      a: parentArray[Math.floor(Math.random() * parentArray.length)].a,
    }; 
}

const behaveLikeAPokemon = (enemy, ownkind, friend1, friend2, neighborsInBuckets, neighbors, self, overtake) => {
  if(neighborsInBuckets[enemy] && neighborsInBuckets[enemy].length >= overtake){
    return inheritFrom(neighborsInBuckets[enemy]);
  } else if(neighborsInBuckets[ownkind] || neighborsInBuckets[friend1] || neighborsInBuckets[friend2]) {
    const parentsA = neighborsInBuckets[ownkind] || [];
    const parentsB = neighborsInBuckets[friend1] || [];
    const parentsC = neighborsInBuckets[friend2] || [];
    return inheritFrom([...parentsA, ...parentsB, ...parentsC, self]);
  } else {
    return neighbors[Math.floor(Math.random() * neighbors.length)]
  }
}

const pokemonRules = (x, y, lastFrame, overtake) => {
  const {self, neighbors} = getColorNeighborsWHue(x,y,lastFrame)
  const nonNullNeighbors = neighbors.filter(neighbor => 
    neighbor.r > 0 || neighbor.g > 0 || neighbor.b > 0 || neighbor.a > 0        
  )
  if (nonNullNeighbors.length > 0 && !itDies(self, neighbors)) {
    neighborsInBuckets = nonNullNeighbors.reduce((acc, neighbor) => {
      const pixelCategory = colorCategory(neighbor)
      if (pixelCategory === 'neutral'){
        return acc;
      } else {
        // bucket it
        acc[pixelCategory] = acc[pixelCategory] ? [...acc[pixelCategory], neighbor] : [neighbor];
        return acc;
      }
    }, {})
    const pixelCategory = colorCategory(self);
    let newPixel;
    switch(pixelCategory){
      case 'neutral':
        newPixel = neighbors[Math.floor(Math.random() * neighbors.length)]
        break;
      case 'r':
        newPixel = behaveLikeAPokemon('b', 'r', 'f', 'y', neighborsInBuckets, nonNullNeighbors, self, overtake);
        break;
      case 'y':
        newPixel = behaveLikeAPokemon('c', 'y', 'r', 'g', neighborsInBuckets, nonNullNeighbors, self, overtake)
        break;
      case 'g':
        newPixel = behaveLikeAPokemon('r', 'g', 'y', 'c', neighborsInBuckets, nonNullNeighbors, self, overtake)
        break;
      case 'c':
        newPixel = behaveLikeAPokemon('f', 'c', 'g', 'b', neighborsInBuckets, nonNullNeighbors, self, overtake)
        break;
      case 'b':
        newPixel = behaveLikeAPokemon('g', 'b', 'f', 'c', neighborsInBuckets, nonNullNeighbors, self, overtake)
        break;
      case 'f':
        newPixel = behaveLikeAPokemon('y', 'f', 'b', 'r', neighborsInBuckets, nonNullNeighbors, self, overtake)
        break;
      default:
        newPixel = {r: 0, b: 0, g: 0, a: 0};
        break;
    }
    return [
      newPixel.r,
      newPixel.g,
      newPixel.b,
      newPixel.a,
    ]; 
  } else {
    return [0, 0, 0, 0]
  }
}

const randomlyInheritFromTwoNeighbors = ({neighbors, self}) => {
  const nonNullNeighbors = neighbors.filter(neighbor => 
    neighbor.r > 0 || neighbor.g > 0 || neighbor.b > 0 || neighbor.a > 0        
  )
  if (nonNullNeighbors.length > 0 && !itDies(self, neighbors)) {
    const parentA = Math.floor(Math.random() * nonNullNeighbors.length);
    const parentB = Math.floor(Math.random() * nonNullNeighbors.length)
    return [
      nonNullNeighbors[parentA].r,
      nonNullNeighbors[parentA].g,
      nonNullNeighbors[parentB].b,
      nonNullNeighbors[parentB].a,
    ]; 
  } else {
    return [0, 0, 0, 0]
  }
}

const randomlyInheritFromOneNeighbor = ({neighbors, self}) => {
  const nonNullNeighbors = neighbors.filter((neighbor) => 
    neighbor.r > 0 || neighbor.g > 0 || neighbor.b > 0 || neighbor.a > 0        
  )
  if (nonNullNeighbors.length > 0 && !itDies(self, neighbors)) {
    const parent = Math.floor(Math.random() * nonNullNeighbors.length);
    return [
      nonNullNeighbors[parent].r,
      nonNullNeighbors[parent].g,
      nonNullNeighbors[parent].b,
      nonNullNeighbors[parent].a,
    ]; 
  } else {
    return [0, 0, 0, 0]
  }
}

const luminance = (self) => (0.299*self.r + 0.587*self.g + 0.114*self.b)

const brightest = ({neighbors, self}) => {
  const nonNullNeighbors = neighbors.filter(neighbor => 
    neighbor.r > 0 || neighbor.g > 0 || neighbor.b > 0 || neighbor.a > 0 
  )
  if (nonNullNeighbors.length > 0 && !itDies(self, neighbors)) {
    const neighborsByBrightness = [self, ...nonNullNeighbors].sort((a,b) => {
      const lA = luminance(a);
      const lB = luminance(b);
      if(lA > lB){
        return -1;
      } else if(lA < lB){
        return 1;
      } else {
        return 0;
      }
    })
    return [
      neighborsByBrightness[0].r,
      neighborsByBrightness[0].g,
      neighborsByBrightness[0].b,
      neighborsByBrightness[0].a,
    ]; 
  } else {
    return [0, 0, 0, 0]
  }
}

const RgbaToHsla = (rgba) => {
  const r = rgba.r/255;
  const g = rgba.g/255;
  const b = rgba.b/255;
  const cMax = Math.max(r,g,b);
  const cMin = Math.min(r,g,b);
  const chroma = cMax - cMin;
  if (chroma == 0) return [0,0,0, rgba[3]];
  var h = 0;
  switch(cMax){
    case r:
      h = ((g - b) / chroma) % 6;
      break;
    case g:
      h = ((b - r) / chroma) + 2;
      break;
    case b:
      h = ((r - g) / chroma) + 4;
      break;
  }
  h *= 60;
  h %= 360;
  const l = (cMax + cMin) / 2;
  const s = chroma / (1 - Math.abs((2 * l) - 1));
  return [h,s,l,rgba.a];
}
const HslaToRgba = (hsla) =>
{
  const chroma = (1 - Math.abs((2 * hsla[2]) - 1)) * hsla[1];
  const x = chroma * (1 - Math.abs(((hsla[0] / 60) % 2) -1));
  const v = hsla[2] - (chroma / 2);
  var rgb_ = [];
  switch (Math.floor(hsla[0]/60)) {
    case 0:
      rgb_ = [chroma,x,0];
      break;
    case 1:
      rgb_ = [x,chroma,0];
      break;
    case 2:
      rgb_ = [0,chroma,x];
      break;
    case 3:
      rgb_ = [0,x,chroma];
      break;
    case 4:
      rgb_ = [x,0,chroma];
      break;
    case 5:
      rgb_ = [chroma,0,x];
      break;
  }
  var rgb = rgb_.map((c) => Math.round((c+v)*255));
  
  return {r: rgb[0], g: rgb[1], b: rgb[2], a: hsla[3]};
}
const randomlyInheritFromNeighborsHsl = ({neighbors, self}) => {
  const nonNullNeighbors = neighbors.filter(neighbor => 
    neighbor.r > 0 || neighbor.g > 0 || neighbor.b > 0 || neighbor.a > 0        
  ).map(RgbaToHsla)
  if (nonNullNeighbors.length > 0 && !itDies(self, neighbors)) {
    return [
      HslaToRgba(nonNullNeighbors[Math.floor(Math.random() * nonNullNeighbors.length)]).r,
      HslaToRgba(nonNullNeighbors[Math.floor(Math.random() * nonNullNeighbors.length)]).g,
      HslaToRgba(nonNullNeighbors[Math.floor(Math.random() * nonNullNeighbors.length)]).b,
      HslaToRgba(nonNullNeighbors[Math.floor(Math.random() * nonNullNeighbors.length)]).a,
    ]; 
  } else {
    return [0, 0, 0, 0]
  }
}

const decidePixelsNextState = (x, y, img) => {
  const colorNeighborhood = getColorNeighbors(x, y, img);
  // a function here returns an array of 4 ints
  switch(ruleset.value){
    case '3neighborRandom':
      return randomlyInheritFromNeighbors(colorNeighborhood);
    case 'hslrandom':
      return randomlyInheritFromNeighborsHsl(colorNeighborhood);
    case 'cloneOfNeighbor':
      return randomlyInheritFromOneNeighbor(colorNeighborhood);
    case 'blendIn':
      return blendIn(colorNeighborhood);
    case 'brightestAll':
      return brightest(colorNeighborhood);
    default:
      return [
        colorNeighborhood.self.r,
        colorNeighborhood.self.g,
        colorNeighborhood.self.b,
        colorNeighborhood.self.a,
      ];
  }
}

const blendIn = ({neighbors, self}) => {
  const nonNullNeighbors = neighbors.filter(neighbor => 
    neighbor.r > 0 || neighbor.g > 0 || neighbor.b > 0 || neighbor.a > 0        
  )
  if (nonNullNeighbors.length > 0 && !itDies(self, neighbors)) {
    return nonNullNeighbors.reduce((total, neighbor) =>
       [total[0] + neighbor.r,
        total[1] + neighbor.g,
        total[2] + neighbor.b,
        total[3] + neighbor.a], [0,0,0,0])
      .map(val => val / nonNullNeighbors.length);
  } else {
    return [0, 0, 0, 0]
  }
}

const advanceToNextState = () => {
  const lastFrame = ctx.getImageData(0, 0, theCanvas.width, theCanvas.height);
  const nextFrame = ctx.getImageData(0, 0, theCanvas.width, theCanvas.height);
  if(/^pokemon/.test(ruleset.value)){
    let overtake;
    switch(ruleset.value){
      case 'pokemon1':
        overtake = 1; break;
      case 'pokemon2':
        overtake = 2; break;
      case 'pokemon3':
        overtake = 3; break;
      case 'pokemon4':
        overtake = 4; break;
    }
    for(let y = 0; y < lastFrame.height; y += 1){ 
      for(let x = 0; x < lastFrame.width; x+= 1){
        const newPixel = pokemonRules(x, y, lastFrame, overtake);
        const newPixelOffset = pixelOffset(x, y, nextFrame.width, nextFrame.height)
        nextFrame.data[newPixelOffset] = newPixel[0];
        nextFrame.data[newPixelOffset + 1] = newPixel[1];
        nextFrame.data[newPixelOffset + 2] = newPixel[2];
        nextFrame.data[newPixelOffset + 3] = newPixel[3];
      }
    } 
  } else {
    for(let y = 0; y < lastFrame.height; y += 1){ 
      for(let x = 0; x < lastFrame.width; x+= 1){
        const newPixel = decidePixelsNextState(x, y, lastFrame);
        const newPixelOffset = pixelOffset(x, y, nextFrame.width, nextFrame.height)
        nextFrame.data[newPixelOffset] = newPixel[0];
        nextFrame.data[newPixelOffset + 1] = newPixel[1];
        nextFrame.data[newPixelOffset + 2] = newPixel[2];
        nextFrame.data[newPixelOffset + 3] = newPixel[3];
      }
    } 
  }
  ctx.putImageData(nextFrame, 0, 0)
}

const seed = document.getElementById('seedpic');
ctx.drawImage(seed, 150 - 150, 100 - 100, 300, 200); 
advanceToNextState();
setInterval(advanceToNextState, 500);
              
            
!
999px

Console