Chris's automata
Posted: Tue Aug 19, 2014 10:44 am
I was bored last night 
http://hemix.nl/chris%20game%20of%20life.html
http://hemix.nl/chris%20game%20of%20life.html
Code: Select all
<html><head>
<style type="text/css">
*{ padding: 0px; margin: 0px; background: #000; }
</style>
<style type="text/css"></style></head>
<body>
<canvas id="canvas" width="1680" height="714"></canvas>
<script type="text/javascript">
lifeFormSquareSize = window.innerWidth/window.innerHeight*6;
var Point = function(x,y) {
this.x = x || parseInt(Math.random() * (window.innerWidth/6)+(window.innerWidth/2.5));
this.y = y || parseInt(Math.random() * (window.innerHeight/6)+(window.innerHeight/2.5));
return this;
}
Point.prototype.constructor = Point;
Point.prototype = {
x : 0,
y : 0,
colidesWith : function(point,size1,size2) {
return this.x < point.x + size2 &&
this.x + size1 > point.x &&
this.y < point.y + size2 &&
size1 + this.y > point.y
},
moveRandomly : function(size) {
var randomX = Math.random() * 3;
var randomY = Math.random() * 3;
var displaceX = parseInt(Math.random()/ (size/lifeFormSquareSize/10));
var displaceY = parseInt(Math.random()/ (size/lifeFormSquareSize/10));
this.x = parseInt(randomX > 2 ? (this.x+displaceX) : (randomX > 1 ? (this.x-displaceX) : this.x));
this.y = parseInt(randomY > 2 ? (this.y+displaceY) : (randomY > 1 ? (this.y-displaceY) : this.y));
this.x = this.x < 0 ? 0 :this.x;
this.x = this.x > window.innerWidth ? window.innerWidth:this.x;
this.y = this.y < 0 ? 0:this.y;
this.y = this.y > window.innerHeight ? window.innerHeight:this.y;
}
}
var lifeFormList = [];
var LifeForm = function() {
lifeFormList.push(this);
this.point = new Point();
this.color = '#' +((1<<24)*Math.random()|0).toString(16);
new Born(this.point);
return this;
}
LifeForm.prototype.contructor = LifeForm;
LifeForm.prototype = {
color : '#000000',
point : null,
size : lifeFormSquareSize,
takeTurn : function() {
if(this.size < lifeFormSquareSize/3) {
this.size = lifeFormSquareSize/3
}
for(var i in lifeFormList) {
if(lifeFormList[i] !== this) {
if(this.point.colidesWith(lifeFormList[i].point,this.size,lifeFormList[i].size)) {
var choice = this.makeChoice();
if(choice == 1) {
if(this.fight() || lifeFormList[i].fight()) {
if(Math.random() * this.size > lifeFormList[i].size * Math.random()) {
lifeFormList[i].size += this.size/2;
this.die();
} else if(Math.random() * lifeFormList[i].size > this.size * Math.random()) {
this.size += lifeFormList[i].size/2;
lifeFormList[i].die();
}
}
}
if(choice == 2) {
if(this.multiply() || lifeFormList[i].multiply()) {
new Mutliplied(this.point);
for(var i = 0; i <= Math.random()*25; i++) {
var child = new LifeForm();
child.point = new Point(this.point.x*Math.random(),this.point.y*Math.random());
child.color = this.color;
this.size /= 1.25;
lifeFormList[i].size /= 1.25;
child.size = this.size;
lifeFormList[i].color = this.color;
child.point.moveRandomly();
}
}
}
if(choice == 3) {
lifeFormList[i].size += this.size*1.5;
this.size += this.size/1.5;
this.color = '#' +((1<<24)*Math.random()|0).toString(16);
}
}
}
}
if(this.randomlyDie()) {
this.die();
}
this.point.moveRandomly(this.size);
},
/**
* 1 = fight
* 2 = multiply
* 3 = pass
*/
makeChoice : function() {
var choice = Math.random()*15;
return choice > 7.5 ? 1 : choice > 5 ? 2 : 3;
},
fight : function() {
return Math.random() * 10 > 5;
},
multiply : function() {
return Math.random()*10 > 5;
},
randomlyDie : function() {
return Math.random() * 1000000000 > (99999999999 / this.size);
},
die : function() {
lifeFormList.splice(lifeFormList.indexOf(this),1);
new Die(this.point);
delete this;
}
}
var dieList = [];
var Die = function(point) {
var _point = new Point(point.x,point.y);
this.point = _point;
dieList.push(this);
var _this = this;
var textInterval = setInterval(function(){
_this.point.y--;
},10);
setTimeout(function(){
clearInterval(textInterval);
dieList.splice(dieList.indexOf(_this),1);
},1000);
}
var bornList = []
var Born = function(point) {
var _point = new Point(point.x,point.y);
this.point = _point;
bornList.push(this);
var _this = this;
var textInterval = setInterval(function(){
_this.point.y--;
},10);
setTimeout(function(){
clearInterval(textInterval);
bornList.splice(bornList.indexOf(_this),1);
},1000);
}
var multiplyList = [];
var Mutliplied = function(point) {
var _point = new Point(point.x,point.y);
this.point = _point;
multiplyList.push(this);
var _this = this;
var textInterval = setInterval(function(){
_this.point.y--;
},10);
setTimeout(function(){
clearInterval(textInterval);
multiplyList.splice(multiplyList.indexOf(_this),1);
},1000);
}
//window.onload = function(){
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context = canvas.getContext('2d');
function start(){
for(var i = lifeFormList.length; i <= parseInt(25); i++) {
new LifeForm();
}
}
// life loop
setInterval(function(){
for(var i in lifeFormList) {
if(lifeFormList[i] === undefined) {
lifeFormList.splice(i,1);
} else {
lifeFormList[i].takeTurn();
}
}
if(lifeFormList.length < 10 ) {
start();
}
if(Math.random() * 5 > 3) {
new LifeForm();
}
},100);
// render loop
setInterval(function(){
context.clearRect(0,0,canvas.width,canvas.height);
for(var i in lifeFormList) {
context.fillStyle = lifeFormList[i].color;
context.fillRect(lifeFormList[i].point.x,lifeFormList[i].point.y,lifeFormList[i].size,lifeFormList[i].size);
}
for(var i in bornList) {
context.fillStyle = 'rgba(0, 255, 0, 55)';
context.font = '10pt Arial';
context.fillText('BORN', bornList[i].point.x,bornList[i].point.y);
}
for(var i in dieList) {
context.fillStyle = 'rgba(200, 0, 0, 55)';
context.font = '10pt Arial';
context.fillText('DIED', dieList[i].point.x,dieList[i].point.y);
}
for(var i in multiplyList) {
context.fillStyle = 'rgba(200, 200, 0, 55)';
context.font = '10pt Arial';
context.fillText('MULTIPLIED', multiplyList[i].point.x,multiplyList[i].point.y);
}
},1000/60)
//}
</script>
</body></html>
) and then that would decide every move.