fcg_andy

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