On the surface a bit pointless this but after a few days learning HTML5 and javascript (more a PHP5 person tbh), came up with this to see what it could do. Starts off with 8 randomly placed male (blue) and female (pink) objects that bob around. When in perfect alignment, males and females "mate" and females giver birth to 1 baby boy and 1 baby girl which are randomly placed on the canvas. Babies grow over time and can mate with opposite sex at any time.

 

Whole project based on X and Y coordinates and arc/ circle function in HTML5.

 

I would be really interested to know if anyone could get the "triggering event" to work just on "any pixel to pixel contact" - mine just uses Pythagoras' theorem which limits things somewhat.

 

Was surprised how quickly the script runs and seems to do do up to about 250 objects on screen all interacting which each other but eventually grinds to a halt (in chrome).

 

Code below or see live here:

 

<html>
<head>
<script>



window.requestAnimFrame = (function(callback){
   return window.requestAnimationFrame ||
   window.webkitRequestAnimationFrame ||
   window.mozRequestAnimationFrame ||
   window.oRequestAnimationFrame ||
   window.msRequestAnimationFrame ||
   function(callback){
       window.setTimeout(callback, 10000 / 60);
   };
})();



function animate(N,X,Y,R,T,S,TS,TG){
   var canvas = document.getElementById("myCanvas");
   var context = canvas.getContext("2d");


 // clear
   context.clearRect(0, 0, canvas.width, canvas.height);

   // update and draw in same loop



for (i=1;i<=N;i++)
{



if(TG > 0){
TG = TG + 1;
if(TG < 800){ 
   context.fillStyle = "red";
context.font = "30pt Calibri";
   context.fillText("Event triggered - babies have been born", 100, 40);
}


}

if(TG == 800){TG = 0;}

var RandX = (Math.floor(Math.random()*2));
var RandY = (Math.floor(Math.random()*2));
var Random1 = (Math.floor(Math.random()*3));
var Random2 = (Math.floor(Math.random()*3));

if(RandX==0){



X[i] = X[i] - Random1;}else{X[i] = X[i] + Random2;}

if(RandX==1){



Y[i] = Y[i] - Random1;}else{Y[i] = Y[i] + Random2;}


////boundaries

if(X[i] > 600){X[i]=600};
if(X[i] < 100){X[i]=100};
if(Y[i] > 600){Y[i]=600};
if(Y[i] < 100){Y[i]=100};

///////test values

//X[0] = 455;
//Y[0] = 362;
//X[1] = 371;
//Y[1] = 474;


if(N > 7){T[i] = T[i] + 5;if(T[i] == 500){R[i] = R[i]+1;T[i] = 0;}}
if(N <= 7){T[i] = T[i] + 1;if(T[i] == 5000){R[i] = R[i]+1;T[i] = 4500;}}

//  print ID next to bacteria
context.fillStyle = "black";
context.font = " bold 10 pt Calibri";
   context.fillText (i, X[i] + R[i] + 1, Y[i] + R[i] + 1);



//  print id, age, current coordinates and radius
context.fillStyle = "green";
context.font = "10pt Calibri";
   context.fillText (" ID: " + i + " Age: " + T[i] + " Position X: " + X[i] + ", Y: " + Y[i] + " Radius: " + R[i] + " Sex: " + S[i], 15 * i, 15 * i);






////draw
context.beginPath();
   context.arc(X[i],Y[i],R[i], 0, 2 * Math.PI, false);
   if(S[i]=="Male"){context.fillStyle = "blue";}else{context.fillStyle = "pink";}
   context.fill();





///// triggering event


///s2
for (v=1;v<=N;v++){
//s2

if(

(      ((Y[i] - Y[v])*(Y[i] - Y[v]))     +     ((X[i] - X[v])*(X[i] - X[v]))      ) == ((R[i] + R[v])*(R[i] + R[v]))


)
{


if(S[v] == "Male" && S[i] == "Female"){var allowMate = "yes";}
if(S[v] == "Female" && S[i] == "Male"){var allowMate = "yes";}

if (S[v]=="Female" && allowMate=="yes"){var trigger = 1;var TS = "new";trigger_one = "one";var TG = 1;

var parentX = X[v];

var parentY = Y[v];}





} 

//e2	
}	
//e2	

////grow baby





//////if triggered	
if(trigger > 0){






if(TS=="new"){


////// spawn babies

var a =  (Math.floor(Math.random()*750));
var b =  (Math.floor(Math.random()*750));
var c =  (Math.floor(Math.random()*750));
var d =  (Math.floor(Math.random()*750));


  var SB = N + 1;
  var BS = N + 2;
  N = N + 2;

  X[sB] = a;
  Y[sB] = b;
  S[sB] = "Male";
  R[sB] = 10;
  T[sB] = 0;

  X[bS] = c;
  Y[bS] = d;
  S[bS] = "Female";
  R[bS] = 10;
  T[bS] = 0;




var currentTime = new Date()
   var hours = currentTime.getHours()
   var minutes = currentTime.getMinutes()
var triglist = i + ", " + v  + " >> " +  hours +":"  +  minutes + "  FIRST: " + X[i] + " , " +   Y[i] + "  SECOND: " + X[v] + " , " +   Y[v] + " <<"; 

if (document.createTextNode){
  var mytext=document.createTextNode(triglist)
  document.getElementById("tri").appendChild(mytext);


}
}







var TS="old";

}
////////if triggered	




////end update and draw loop
}
////end update and draw loop

// request new frame
   requestAnimFrame(function(){
       animate(N,X,Y,R,T,S,TS,TG);
   });


///end animate loop
}
///end animate loop 




window.onload = function(){

   // initialize stage

var canvas = document.getElementById("myCanvas");
   var context = canvas.getContext("2d");



////number bacteria
var N = 7;
var sex = 1;
var TG = 0;
var TS = 0;



////random starting coordinates
var a =  (Math.floor(Math.random()*750));
var b =  (Math.floor(Math.random()*750));
var c =  (Math.floor(Math.random()*750));
var d =  (Math.floor(Math.random()*750));
var e =  (Math.floor(Math.random()*750));
var f =  (Math.floor(Math.random()*750));
var g =  (Math.floor(Math.random()*750));
var h =  (Math.floor(Math.random()*750));
var j =  (Math.floor(Math.random()*750));
var k =  (Math.floor(Math.random()*750));
var l =  (Math.floor(Math.random()*750));
var m =  (Math.floor(Math.random()*750));
var n =  (Math.floor(Math.random()*750));
var o =  (Math.floor(Math.random()*750));
var p =  (Math.floor(Math.random()*750));
var q =  (Math.floor(Math.random()*750));




var S=new Array();
   var X=new Array(a,c,e,g,h,j,k,l);
var Y=new Array(b,d,f,h,n,o,p,q);
var R=new Array(100,90,80,70,50,30,20,10);
var T=new Array(1,1,1,1,1,1,1,1);


for (sex=1;sex<=N;sex++){

var randsex = (Math.floor(Math.random()*2));

if(randsex == 1){S[sex] = "Male";}else{S[sex] = "Female";}


}


for (i=0;i<=N;i++)
{

context.beginPath();
   context.arc(X[i],Y[i],R[i], 0, 2 * Math.PI, false);
   if(S[i]=="Male"){context.fillStyle = "blue";}else{context.fillStyle = "pink";}
   context.fill();


}


animate(N,X,Y,R,T,S,TS,TG);	 

};

</script>
<style type="text/css">
<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
-->
</style>
</head>
   <body>
       <canvas id="myCanvas" width="750" height="750" border = "10">
       </canvas>

       <p>
       <table width="50%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td><div class="style1" id="tri">Report > </div></td>
   <td><div id="time"></div></td>
 </tr>
</table>

       </body>
       </html>

male_female_model.php

That's pretty cool.

Guess I don't need to go to xxxxhub.com for incest anymore. :v

Edited March 2, 201214 yr by Samus