Canvas-Befunge-Forth
Like Befunge Language On The Canvas
by Ruslan Alikberov
HTML
<body onload='main()'>
<svg width="0" height="0" style="position:absolute;z-index:-1;">
<defs>
<filter id="remove-alpha" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 1"></feFuncA>
</feComponentTransfer>
</filter>
</defs>
</svg>
<caption-bar menu=MenuBar>CCCP - Common Creative Collection Project</caption-bar>
<label id=MenuBar>
<menu>File<ul>
<li onclick='window.localStorage.clear(); window.location=""'>New</li>
<li onclick='hImFile.click()'>Open</li>
<li onclick='DoExample(Example.join("\r\n"))'>Demo</li>
<li><a href='' onclick='this.href=hLayer.toDataURL("png");' download='Scenary.png'>Save</a></li>
<li>Close</li>
</ul>
</menu><menu>Edit<ul>
<li onclick='DoLayerRotate(false)'>Rotate</li>
<li onclick='DoLayerCopy(false)'>Cut</li>
<li onclick='DoLayerCopy(true)'>Copy</li>
<li onclick='DoLayerPaste()'>Paste</li>
</ul>
</menu><menu>Mo<span id=ModeLED style=display:none>●</span>de<ul>
<li><select id=Action></select></li>
<li>Speed<input id=Speed type=range min=1 max=100 value=100 /></li>
<li>Loop<input id=Loop type=number min=1 max=100000 value=1 /></li>
</ul></menu><menu>View<ul>
<li>Grid<input id=Grid type=checkbox onclick='onLayerDraw()' /></li>
<li>Side<input id=Side type=checkbox onclick='cMatrix.wrest(); onLayerDraw()' /></li>
<li onclick='DoEncode()'>Encode</li>
</ul></menu><menu>Help<ul>
<li onclick='hRegs.innerHTML = sHint'>Info</li>
<li>Help</li>
<li onclick='return false'>About</li>
<li><a href='http://youtu.be/7oh29aNswm0'>Youtube</a></li>
</ul></menu>
<span id=State></span></label>
<table style=white-space:nowrap>
<tr><td><canvas id=Layer width=1024 height=768></canvas></td><td id=Port></td></tr>
<tr><td><canvas id=Binary width=1024 height=48></canvas></td><td><canvas id=Matrix width=64 height=48></canvas></td></tr>
</table>
<pre id=Registers>
Press'n'Drag directly at horizontaly or verticaly for Line Draw;
Press'n'Drag diagonaly for set the...
CSS
body
{
padding :0px 0px 0px 0px;
margin :0px 0px 0px 0px;
background-color:ThreeDFace;
color :WindowText;
overflow :auto;
}
caption-bar > label
{
background-color:Menu;
color :MenuText;
display :block;
}
caption-bar > label menu
{
background-color:inherit;
color :inherit;
border :none;
padding :1px 9px 1px 9px;
margin :0 0 0 0;
display :inline-block;
}
caption-bar input ~ menu:hover
{
border :1px outset;
padding :0px 8px 0px 8px;
}
caption-bar input:checked ~ menu:hover
{
border :1px inset;
padding :0px 8px 0px 8px;
}
caption-bar input:checked ~ menu:active
{
border :1px inset;
}
caption-bar menu ul
{
background-color:inherit;
color :inherit;
position :absolute;
border :1px outset;
display :none;
list-style-type :none;
list-style-type :none;
list-style-position :outside;
}
caption-bar li
{
background-color:inherit;
color :inherit;
}
caption-bar input:checked ~ menu:hover ul
{
background-color:inherit;
color :inherit;
display :block;
padding :0px 0px 0px 0px;
margin :0px 0px 0px 0px;
}
caption-bar input:checked ~ menu:hover li:hover
{
background-color:Highlight;
color :HighlightText;
}
caption-bar input:checked ~ menu:hover li menu
{
padding-left :0px;
}
caption-bar input:checked ~ menu:hover li menu ul
{
background-color:Menu;
color :MenuText;
display :none;
position :absolute;
}
caption-bar input:checked ~ menu:hover li:hover menu ul
{
background-color:Highlight;
color :HighlightText;
display :inline-block;
}
input[type="file"]
{
display :none;
}
input[type="radio"]
{
background-color:cyan;
}
select#Action
{
display :none;
}
td#Port
{
border :0px 0px 0px 0px;
display :inline-block;
font-size :0px;
}
td#Port > button
{
padding :0px 0px 0px 0px;
font-family :Courier New;
font-size :10px;
height :16px;
width :32px;
}
td#Port > input
{
font-family :Courier...
JavaScript
(function() {
var gue = Object.create(HTMLTableElement.prototype); // Graphic Unical Element
gue.createdCallback = function() {
var cpt = document.createElement("TR");
var pic = cpt.insertCell(0);
var title = cpt.insertCell(1);
var buttons = cpt.insertCell(2);
this.style.width = "100%";
this.style.position = "fixed";
this.style.top = "0px";
cpt.style.backgroundColor = "ActiveCaption";
cpt.style.color = "CaptionText";
cpt.style.width = "100%";
pic.style.width = "16px";
title.style.width = "100%";
buttons.style.whiteSpace = "nowrap";
var picture = new Image();
this.minimizer = document.createElement("BUTTON");
this.maximizer = document.createElement("BUTTON");
this.optimizer = document.createElement("BUTTON");
this.minimizer.style.fontFamily = "Marlett";
this.maximizer.style.fontFamily = "Marlett";
this.optimizer.style.fontFamily = "Marlett";
try{ picture.src = document.querySelector("link[rel*='icon']").href; } catch(e) {}
picture.style.width = "16px";
picture.style.height = "16px";
this.minimizer.textContent = "0";
this.maximizer.textContent = "2";
this.optimizer.textContent = "r";
pic.appendChild(picture);
title.textContent = this.innerHTML;
buttons.appendChild(this.minimizer);
buttons.appendChild(this.maximizer);
buttons.appendChild(this.optimizer);
this.textContent = "";
this.appendChild(cpt);
if(this.attributes.menu) {
var mnu = document.getElementById(this.attributes.menu.nodeValue);
var chk = document.createElement("INPUT");
chk.type = "checkbox";
chk.style.display = "none";
mnu.insertBefore(chk, mnu.firstChild);
this.appendChild(mnu);
}
document.body.style.paddingTop = this.offsetHeight + "px";
};
document.registerElement("caption-bar", {
prototype :gue
});
})();
//////////////////////////////////////////////////////////////////////////////
CanvasRenderingContext2D.prototype.line =
function(x1, y1, x2, y2, color) {
var logic =...