Stereoscopic 3d

Simple anaglyph 3d

by fordcars

HTML

<body>
    <canvas id="canId" height="400" width="400">Doh!</canvas>
</body>

CSS

canvas {border: solid black;}

JavaScript

var canNode;
var can;

var redColor = "rgba(255,255,0,0.5)"; //Why yellow? It works better with my 3D glasses :)
var cyanColor = "rgba(0,255,255,0.5)";
var lineWidth = 4;

var canHeight = 400;
var canWidth = 400;

var mouseEvent;
var keyboardEvent;

var testLineDepth = 30;
var goingRight = true;
var goingOut = true;

var linesLocX;
var linesLocY;

function start()
{
    canNode = document.getElementById("canId");
    can = canNode.getContext("2d");
    mouseEvent = canNode.addEventListener("click",function(){clicked(event);},false);
    keyboardEvent = canNode.addEventListener("keydown",function(){keyboardPressed(event);},false);
    
    linesLocX = canWidth/2;
    linesLocY = canHeight/2;
    drawCan();
    window.setInterval(drawCan,20);
}

start();

function keyboardPressed(event)
{
    event = event || window.event;
    
    alert("HI");
}

function clicked(event)
{
    event = event || window.event;
    
    var clickedX = event.clientX;
    var clickedY = event.clientY;
}

function drawCan()
{
    can.clearRect(0,0,canWidth,canHeight);
    draw3dLine(linesLocX,linesLocY-10,linesLocX-20,linesLocY+100,testLineDepth);
    draw3dLine(linesLocX-20,linesLocY-30,linesLocX-80,linesLocY+140,testLineDepth);
    
    if(goingRight)
    {
        linesLocX = linesLocX + 0.5;
    }
    else
    {
        linesLocX = linesLocX - 0.5;
    }
    
    if(linesLocX>390)
    {
        goingRight = false;
    }
    
    if(linesLocX<10)
    {
        goingRight = true;
    }
    
    if(goingOut)
    {
        testLineDepth = testLineDepth + 0.4;
    }
    else
    {
        testLineDepth = testLineDepth - 0.4;
    }
    
    if(testLineDepth<-30)
    {
        goingOut = true;
    }
    
    if(testLineDepth>30)
    {
        goingOut = false;
    }
}

function draw3dLine(lineStartX,lineStartY,lineEndX,lineEndY,depth)
{
    can.lineWidth = lineWidth;
    can.strokeStyle = redColor;
    can.beginPath();
    can.moveTo(lineStartX-depth,lineStartY);
   ...