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);
!
