Braindraw

by John Doe

HTML

<textarea id="textarea">+&lt;++++++++++v+++++++++++v+++++++++++v+v+&gt;+++++++++++&gt;+++++++++++^+++++++++++&gt;++++[&gt;+++++++++++&lt;-]</textarea>
<ul>
<li><a id="execute">exec</a></li>
</ul>
<p id="log">just some logging information</p>
<canvas width="500" height="500" id="canvas">Sorry, no canvas available</canvas>

CSS

body {
	background-color:#755;
	padding:0;
	margin:0;
	overflow:scroll;
  font-family:sans-serif;
  color:#fff;
}
canvas {
  border:1px solid #000;
  float:left;
  clear:both;
}
ul {
  padding:0;
  padding-left:20px;
  margin:0;
}
li {
  float:left;
  padding:0;
  padding-right:20px;
  margin:0;
}
a {
  cursor:pointer;
  color:#ccc;
}
a:hover {
  color:#fff;
}

JavaScript

/*
 * TODO: 
 */

var cnvs = document.getElementById('canvas'),
  ctx = cnvs.getContext('2d'),
  txt = document.getElementById('textarea')
  
  cnvs.width = 300
  cnvs.height = 300
 
var code = ""
var pxSize = 5
var maxIter = 10000
// start in the center of the canvas, in the channel R (red)
var state = {x:cnvs.width/2/pxSize|0, 
             y:cnvs.height/2/pxSize|0, 
             c:'r'}
var pointer = 0;
var R = (new Array(cnvs.height)).fill(0).map(t=>(new Array(cnvs.width)).fill(0))
var G = (new Array(cnvs.height)).fill(0).map(t=>(new Array(cnvs.width)).fill(0))
var B = (new Array(cnvs.height)).fill(0).map(t=>(new Array(cnvs.width)).fill(0))
  
function main(){
  // get code
  code = txt.value
  //set state
  state = {x:cnvs.width/2/pxSize|0, 
             y:cnvs.height/2/pxSize|0, 
             c:'r'}
  log(code)
  ctx.fillStyle = '#000'
  log('fillstyle')
  ctx.fillRect(0,0,cnvs.width,cnvs.height)
  pointer = 0
  log('before for loop')
  for(var k=0;k<maxIter;k++){
    if(pointer >= code.length){
      log('broken')
      break
    }
    execByte(code[pointer])
  }
  log('END')
}

function execByte(chr){
  switch(chr){ //moving
    case '>':
    case '<':
    case 'v':
    case '^':
      move(chr)
      break;
    case '+': //increment / decrement
    case '-':
      add(chr)
      break;
    case '[': //loops
    case ']':
      loop(chr)
      break;
    default: //color
      state.c = chr
  }
  log('before draw')
  pointer+=1
  //ctx.fillStyle = '#fff'
  //ctx.fillRect(state.x * pxSize, state.y * pxSize, pxSize, pxSize)
  log('after draw')
}

function loop(chr){
  var bR = R[state.y][state.x]==0 && state.c == 'r'
  var bG = G[state.y][state.x]==0 && state.c == 'g'
  var bB = B[state.y][state.x]==0 && state.c == 'b'
  if(chr == '['){
    if(bR || bG || bB){ // we skip loop
      while(pointer < code.length && coder[pointer] != ']'){
        pointer += 1
      }
    }
  } else {
    while(pointer >=0 && coder[pointer] != '['){
      pointer -= 1
    }
 ...