Commit 3e48c36d authored by Olivier Bouwman's avatar Olivier Bouwman
Browse files

add some input options

parent 25f5dc73
......@@ -7,33 +7,63 @@
<meta http-equiv="edit-Type" edit="text/html; charset=utf-8">
<body>
<canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #000000;"></canvas>
<canvas id="myCanvas" width="1152" height="328" style="border:1px solid #000000;"></canvas>
<form>
<input type="checkbox" id="clearOnDraw" onchange="updateInput(this);" checked="checked">clear on draw
<br>
<input type="range" id="delay" min="0" max="1000" value="10" onchange="updateInput(this);">
<input type="text" id="delayText" value="10" size="5"> delay between days (ms)
<br>
<input type="range" id="bunnyMatingSuccessPercentage" min="0" max="100" value="50" onchange="updateInput(this);">
<input type="text" id="bunnyMatingSuccessPercentageText" value="50" size="5">% mating success
<br>
<input type="range" id="bunnyMaxEnergy" min="50" max="1000" value="275" onchange="updateInput(this);">
<input type="text" id="bunnyMaxEnergyText" value="275" size="5"> maximum energy (bunny)
<br>
<input type="range" id="plantMaxEnergy" min="50" max="1000" value="550" onchange="updateInput(this);">
<input type="text" id="plantMaxEnergyText" value="550" size="5"> maximum energy (plant)
<br>
<input type="range" id="plantInitialEnergy" min="0" max="1000" value="275" onchange="updateInput(this);">
<input type="text" id="plantInitialEnergyText" value="275" size="5"> initial energy (plant)
<br>
<input type="range" id="plantEnergyGainByDay" min="0" max="100" value="10" onchange="updateInput(this);">
<input type="text" id="plantEnergyGainByDayText" value="10" size="5"> energy gain by day (plant)
<br>
<input type="range" id="maximumPlants" min="0" max="500" value="75" onchange="updateInput(this);">
<input type="text" id="maximumPlantsText" value="75" size="5"> maximum plants
<br>
<input type="range" id="initialBunniesMale" min="0" max="1000" value="100" onchange="updateInput(this);">
<input type="text" id="initialBunniesMaleText" value="100" size="5"> male bunnies on restart
<br>
<input type="range" id="initialBunniesFemale" min="0" max="1000" value="100" onchange="updateInput(this);">
<input type="text" id="initialBunniesFemaleText" value="100" size="5"> female bunnies on restart
<br>
</form>
<button onclick="restart();">Restart</button>
<script type="text/javascript">
var delay = 0; //millisecond delay between steps
var gridWidth = 250;
var gridHeight = 250;
var delay = document.getElementById('delay').value; //millisecond delay between steps
var gridWidth = 288;
var gridHeight = 82;
var drawInterval = 0; //draw every x updates;
var disableClearOnDraw = true;
var clearOnDraw = document.getElementById('clearOnDraw').checked;
var bunnyLifeExpectancy = 3 * 356; //3 years in days
var bunnyMinimumMatingAge = (356 / 12) * 6; //6 months in days
var bunnyGestationPeriod = 31; //31 days of gestation only!
var bunnyMatingSuccessPercentage = 50; //when a male and non-pregnant female touch, this determines chance of pregnancy
var bunnyMaxEnergy = 275; //decreases with time and hopping, increases by eating plants
var bunnyLitterSizeMin = 0;
var bunnyLitterSizeMax = 14;
var plantMaxEnergy = bunnyMaxEnergy * 2; //plant energy increases by one each day. decreases when a bunny eats. plant dies when energy reaches 0
var plantInitialEnergy = bunnyMaxEnergy;
var plantEnergyGainByDay = 10;
var bunnyMatingSuccessPercentage = document.getElementById('bunnyMatingSuccessPercentage').value; //when a male and non-pregnant female touch, this determines chance of pregnancy
var bunnyMaxEnergy = document.getElementById('bunnyMaxEnergy').value; //decreases with time and hopping, increases by eating plants
var plantMaxEnergy = document.getElementById('plantMaxEnergy').value; //bunnyMaxEnergy * 2; //plant energy increases by one each day. decreases when a bunny eats. plant dies when energy reaches 0
var plantInitialEnergy = document.getElementById('plantInitialEnergy').value; //bunnyMaxEnergy;
var plantEnergyGainByDay = document.getElementById('plantEnergyGainByDay').value;
var plantHue = 120;
var initialPlants = Math.round((gridWidth * gridHeight) / 300);
var initialBunniesMale = Math.round((gridWidth * gridHeight) / 50);
var initialBunniesFemale = Math.round((gridWidth * gridHeight) / 50);
var maximumPlants = document.getElementById('maximumPlants').value; //Math.round((gridWidth * gridHeight) / 300);
var initialBunniesMale = document.getElementById('initialBunniesMale').value; //Math.round((gridWidth * gridHeight) / 50);
var initialBunniesFemale = document.getElementById('initialBunniesFemale').value; //Math.round((gridWidth * gridHeight) / 50);
//bunny color slightly changes for each baby
var bunnyMaxHueChange = 19; //baby color can change by this much compared to the mother
......@@ -83,6 +113,63 @@
mainLoop();
function restart() {
grid = createGridArray();
neighborCellsArray = createNeighborCellsArray();
setInitialGridContent();
drawCounter = 0;
counterPlants = 0;
}
function updateInput(item) {
switch (item.id) {
case "delay":
document.getElementById('delayText').value = item.value;
delay = document.getElementById('delay').value;
break;
case "clearOnDraw":
clearOnDraw = document.getElementById('clearOnDraw').checked;
break;
case "bunnyMatingSuccessPercentage":
document.getElementById('bunnyMatingSuccessPercentageText').value = item.value;
bunnyMatingSuccessPercentage = document.getElementById('bunnyMatingSuccessPercentage').value;
break;
case "bunnyMaxEnergy":
document.getElementById('bunnyMaxEnergyText').value = item.value;
bunnyMaxEnergy = document.getElementById('bunnyMaxEnergy').value;
cellBunnyMale.energy = bunnyMaxEnergy;
cellBunnyFemale.energy = bunnyMaxEnergy;
break;
case "plantMaxEnergy":
document.getElementById('plantMaxEnergyText').value = item.value;
plantMaxEnergy = document.getElementById('plantMaxEnergy').value;
break;
case "plantInitialEnergy":
document.getElementById('plantInitialEnergyText').value = item.value;
plantInitialEnergy = document.getElementById('plantInitialEnergy').value;
cellPlant.plantInitialEnergy = plantInitialEnergy
break;
case "plantEnergyGainByDay":
document.getElementById('plantEnergyGainByDayText').value = item.value;
plantEnergyGainByDay = document.getElementById('plantEnergyGainByDay').value;
break;
case "maximumPlants":
document.getElementById('maximumPlantsText').value = item.value;
maximumPlants = document.getElementById('maximumPlants').value;
break;
case "initialBunniesMale":
document.getElementById('initialBunniesMaleText').value = item.value;
initialBunniesMale = document.getElementById('initialBunniesMale').value;
break;
case "initialBunniesFemale":
document.getElementById('initialBunniesFemaleText').value = item.value;
initialBunniesFemale = document.getElementById('initialBunniesFemale').value;
break;
}
}
function mainLoop() {
setTimeout(function() {
if (drawCounter === drawInterval) {
......@@ -158,7 +245,7 @@
y = Math.round(Math.random() * (gridHeight - 1));
grid[x][y] = Object.create(cellBunnyFemale);
}
for (var i = 0; i < initialPlants; i++) {
for (var i = 0; i < maximumPlants; i++) {
x = Math.round(Math.random() * (gridWidth - 1));
y = Math.round(Math.random() * (gridHeight - 1));
createPlant(x, y);
......@@ -171,7 +258,9 @@
}
function drawGrid() {
if (!disableClearOnDraw) {ctx.clearRect(0, 0, gridWidth, gridHeight);}
if (clearOnDraw) {
ctx.clearRect(0, 0, gridWidth, gridHeight);
}
for (var x = 0; x < gridWidth; x++) {
for (var y = 0; y < gridHeight; y++) {
......@@ -219,7 +308,7 @@
if (grid[x][y].age > bunnyLifeExpectancy || grid[x][y].energy < 1) {
grid[x][y] = Object.create(cellEmpty); //rip buddy
if (counterPlants < initialPlants) { //a new plant appears in your memory
if (counterPlants < maximumPlants) { //a new plant appears in your memory
createPlant(x, y);
}
} else {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment