Fire JS Bin - Element-Dots

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

var updateTime = 70;
var spawnTime = 200;
var updateEvent = null;
var fountainEvent = null;
var matrix = new Array();
var matrix_old = new Array();
var matrix_lock = new Array();
var dotw = 3;
var doth = 3;
var width = 0;
var height = 0;
var brushtyp = 10;
var brushsize = 1;
var fountains = new Array();
var spawns = new Array();
var selectedFountainIdx = null;
var canvas;
var context;

function updateBrushSize() {
  brushsize = $('input[name=brushsize]:radio:checked').val();
}

function reset() {
  if (confirm('Clear stage?')) window.location.reload();
}

function dot(x,y) {
  return (matrix[x] && matrix[x][y]) ? matrix[x][y] : 0;
}

function killDot(x,y) {
  if (x>=0 && y>=0 && x<=width && y<=height) {
    matrix[x][y] = null;
    matrix_lock[x][y]=false;
  }
}

function addDot(x,y,d) {
  if (x>=0 && y>=0 && x<=width && y<=height) {
    matrix[x][y] = d;
    matrix_lock[x][y]=true;
  }
}

function moveDot(x,y,nx,ny,typ,ntyp) {
  if (nx>=0 && ny>=0 && nx<=width && ny<=height && x>=0 && y>=0 && x<=width && y<=height) {
    matrix[x][y] = typ;
    matrix_lock[x][y] = typ!=null;
    matrix[nx][ny] = ntyp;
    matrix_lock[nx][ny] = true;
  }
}

function draw(x,y,d) {
  if (d==1) context.fillStyle = (Math.random()<0.5)?"#12d":"#12f";
  else if (d==2) context.fillStyle = (Math.random()<0.6)?"#b73":"#a82";
  else if (d==3) context.fillStyle = (Math.random()<0.5)?"#c41":"#f60";
  else if (d==4) context.fillStyle = (Math.random()<0.5)?"#bbd":"#bbb";
  else if (d==5) context.fillStyle = (Math.random()<0.7)?"#212":"#111";
  else if (d==10) context.fillStyle = (Math.random()<0.5)?"#0b0":"#0d0";
  else context.fillStyle = "rgba(0,0,0,0)";
  context.fillRect(dotw*x, doth*y, dotw, doth);
}

function update(){
  for (var y=height; y>=0; y--) {
    for (var x=0; x<=width; x++) {

if (matrix_lock[x][y]==true) continue;

// Steam  
      } else if (d==4) {
        var dtc = dot(x,y-1);
        if (dtc!=10 && dtc!=4 && Math.random()<0.5) moveDot(x,y,x,y-1,dtc,4);
        else if (Math.random()<0.3 && dtc>0 && dot(x-1,y)==0 && dot(x-1,y+1)!=4)   moveDot(x,y,x-1,y,null,4);
        else if (Math.random()<0.3 && dtc>0 && dot(x+1,y)==0 && dot(x+1,y+1)!=4)   moveDot(x,y,x+1,y,null,4);
        else if (Math.random()<0.3 && dtc>0 && dot(x+2,y)==0 && dot(x+2,y+1)!=4)   moveDot(x,y,x+2,y,null,4);
        else if (Math.random()<0.3 && dtc>0 && dot(x-2,y)==0 && dot(x-2,y+1)!=4)   moveDot(x,y,x-2,y,null,4);
        if (Math.random()<0.01 || y<1) killDot(x,y);
        
      // Oil  
      } else if (d==5) {
        var dbc = dot(x,y+1);
        if (dbc==3 && Math.random()<0.2) moveDot(x,y,x,y+1,5,5);  // Fire and Oil
        else if (dbc==0) {if (Math.random()<0.7) moveDot(x,y,x,y+1,null,5);}
        else if (dbc==0 && Math.random()<0.05) addDot(x,y+1,5);
        else if (dbc>0) liquid(x,y,5);
      }

}// for x
  }// for y
          
  for (var y=height; y>=0; y--) {
    for (var x=0; x<=width; x++) {
      var d = dot(x,y);
      if (d != matrix_old[x][y]) draw(x,y,d);
      matrix_old[x][y] = d;
      matrix_lock[x][y] = false;
    }
  }

}

function killFire() {
  for (var y=height; y>=0; y--) {
    for (var x=0; x<=width; x++) {
      if (dot(x,y)==3) addDot(x,y,4);
    }
  }
}

function spawnDragStart(e) {
  selectedFountainIdx = e.data.spawnId;
  canvas.live('mousemove', {s:this}, spawnDragMove);
  spawns[selectedFountainIdx].live('mouseup', spawnDragStop);
}

function spawnDragStop(e) {
  selectedFountainIdx = null;
  $(e.currentTarget).die('mouseup');
  canvas.die('mousemove');
}

function spawnDragMove(e) {
  var pos = mousePos(e);
  var spawn = e.data.s;
  spawns[selectedFountainIdx].css('left', pos.x*dotw-8);
  spawns[selectedFountainIdx].css('top', pos.y*doth-8);
  if (fountains[selectedFountainIdx]) {
    fountains[selectedFountainIdx].x = pos.x;
    fountains[selectedFountainIdx].y = pos.y+2;
  }
}

function mousePos(e) {
  return {x: Math.round((e.pageX-canvas.offset().left)/dotw), y: Math.round((e.pageY-canvas.offset().top)/doth) }
}

function paintEvent(e) {
  var pos = mousePos(e);
  spawnDot(pos.x, pos.y);
}

function delEvent(e) {
  var pos = mousePos(e);
  for (var h=-2;h<2;h++) {
    for (var i=-2;i<2;i++) {
      killDot(pos.x+i, pos.y+h);
    }
  }
}

function updateToMousePos(e) {
  var pos = mousePos(e);
  if (fountains[selectedFountainIdx]) {
    fountains[selectedFountainIdx].x = pos.x+2;
    fountains[selectedFountainIdx].y = pos.y+2;
  }
}

function stopMouseMove(e) {
  canvas.die('mousemove');
}

function setSpawnFountain(x,y,t) {
  if (x>width || y>height) return;
  var fountain = {
    x: x, y: y,  typ: t
  }
  fountains.push(fountain);
}

function spawnFountain() {
  for (i=0; i<fountains.length; i++) {
    if (f=fountains[i]) {
      if (f.x>=0 && f.y>=0 && f.x<=width && f.y<=height) matrix[f.x][f.y] = f.typ;
    }
  }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="chrome=1" /> 
 
<title>Element Dots</title> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</div> 
</div> 
 
<div style="clear:both"></div> 
</div> 
 
</body> 
</html>

body {
  background: rgb(245, 245, 250);
  background-image: -webkit-gradient(linear, 0% 16%, 0% 0%, from(rgb(245, 245, 250)), to(rgb(210, 210, 250)));
  background-image: -moz-linear-gradient(center bottom, rgb(245, 245, 250) 16%, rgb(210, 210, 250) 80%);
  background-repeat: no-repeat;
  color: #444;
  font-family: Arial;
  font-size: 10pt;
}

#page {
    width: 700px;
    height: 100%;
    margin: 20px auto;
    position: relative;
   -moz-user-select: none;
   -khtml-user-select: none;
   user-select: none;
}

h1, h2, h3, h4 {
/*  font-family: impact, fantasy;*/
  font-weight: bolder;
  color: #931;
/*  text-shadow: 1px 1px 1px #222;*/
  margin: 0 0 0 0;
  letter-spacing: 0.1em;
}

hgroup h1 {
  margin-top: 0px;
  padding-top: 0;
}

h5 {
  color: #666;
  margin: 0;
  padding: 0;
  font-size: 7pt;
  font-weight: normal;
}

img {
  border: 0;
}

p {
  width: 420px;
  font-size: 8pt;
}

a {
  color: #fa5c00;
  text-decoration: none;
}

label:hover {
  color: #e11;
}

label.disabled {
  color: #bbb;
}

.rounded {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

#canvasarea { 
  border-bottom: 3px solid #d50;
  border-left: 3px solid #a40;
  border-top: 3px solid #931;
  border-right: 3px solid #d50;
  /*cursor: url(../gfx/001_10.png);*/
  cursor: crosshair;
  float: left;
  width: 420px;
  height: 460px;
  position: relative;
  overflow: hidden;
  background: #fff;
}

#canvas { 
  position: absolute;
  left: 0px;
  top: 0px;
}

#canvas_bg { 
  position: absolute;
  left: 0px;
  top: 0px;
}

#sidebar {
  float: left;
  width: 180px;
  height: 450px;
  position: relative;
}

#author {
  font-size: 7pt;
  color: #bbb;
  margin-left: 22px;
}

#tools {
  float: left;
  width: 200px;
  height: 456px;
  padding: 0 0 0 26px;
  position: relative;
}

#tools .toolset {
  margin-bottom: 12px;
  font-weight: bold;
  font-size: 11pt;
  color: #655;
}

#tools .toolset h3{
  font-size: 12pt;
        font-weight: bold;
  text-shadow: none;
}

#subtitle {
  position:absolute;
  left:203px;
  top:26px;
  width:260px;
        margin: 0px;
        padding: 0px;
        color: #666;
}

input[type=button]:hover{
    color: #fff;
}

input[type=button]{
  background: #43a2dd;
  margin: 0 0 4px 0;
  padding: 1px 10px;
  color: #ddf;
  text-decoration: none;
  font-weight: bold;
  line-height: 1;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
/*  text-shadow: 0 -1px 1px #222;*/
  position: relative;
  cursor: pointer;
  width: 80px;
  height: 23px;
  font-size: 10pt;
/*  background: #ff5c00;
  display: inline-block;
  margin: 0 0 4px 0;
  padding: 1px 10px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  line-height: 1;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: 0 1px 3px 1px #999;
  -webkit-box-shadow: 0 1px 3px 1px #999;
  text-shadow: 0 -1px 1px #222;
  border-bottom: 1px solid #222;
  position: relative;
  cursor: pointer;
  width: 80px;
  height: 23px;
  font-size: 10pt;*/
}

.spawn {
  position: absolute;
  width: 16px;
  height: 16px;
  display: inline-block;
  background: url(/attach/001_11.png);
}

.spawn:hover {
  border: 1px solid red;
  cursor: move;
}

Pop out