<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pseudo3D Engine</title>
</head><body>
<style>
body {
background-color: black;
}
</style>
<div id="cnt">
<svg id="svg" width="8000" height="6000"></svg>
</div>
<div id="values"></div>
<div id="last"><input type="hidden" id="lastid" value=" "></div>
<script>
function calcBottom(objcount, ofset, firstx, firsty, length, width, height) {
var screen = document.getElementById("svg");
var resolutionx = screen.width.baseVal.value;
var resolutiony = screen.height.baseVal.value;
var centx = resolutionx / 2;
var centy = resolutiony / 2;
var originx = centx;
var originy = ofset;
firsty = firsty + originy;
firstx = firstx + originx;
var secx = firstx + width;
var secy = firsty;
if(firsty > originy) {
var foury = firsty + length;
var thirdy = foury;
}
else {
var foury = firsty - length;
var thirdy = foury;
}
if(firsty > originy) {
if(firstx > originx ) {
var fourx = (firstx - originx) / (firsty - originy);
fourx = (foury - originy) * fourx;
fourx = fourx + originx;
}
else {
var fourx = (foury - originy) / (firsty-originy);
fourx = fourx * ( originx - firstx);
fourx = originx - fourx;
}
}
else {
if(firstx > originx ) {
var fourx = (originy - foury) / (originy - firsty);
fourx = fourx / (originx + firstx);
fourx = fourx + originx;
}
else {
var fourx = (originy - foury) / (originy - firsty);
fourx = fourx / (originx - ( originx - firstx));
fourx = originx - fourx;
}
}
if(secy > originy) {
if(secx > originx) {
var thirdx = (secx - originx) / (secy - originy);
thirdx = (thirdy - originy) * thirdx;
thirdx = thirdx + originx;
}
else {
var thirdx = (thirdy - originy) / (secy-originy);
thirdx = thirdx * ( originx - secx);
thirdx = originx - thirdx;
}
}
else {
if(secx > originx ) {
var thirdx = (originy - thirdy) / (originy - secy);
thirdx = thirdx / (originx + thirdx);
thirdx = thirdx + originx;
}
else {
var thirdx = (originy - thirdy) / (originy - secy);
thirdx = thirdx / (originx - ( originx - secx));
thirdx = originx - thirdx;
}
}
if(firstx > originx) {
foury = (firstx - originx) / (firsty - originy);
foury = (fourx - originx) / foury;
foury = foury + originy;
}
else {
foury = (originx - fourx) / (originx - firstx);
foury = foury * (firsty - originy);
foury = foury + originy;
}
if(secx > originx) {
thirdy = (secx - originx) / (secy - originy);
thirdy = (thirdx - originx) / thirdy;
thirdy = thirdy + originy;
}
else {
thirdy = (originx - thirdx) / (originx - secx);
thirdy = thirdy * (secy - originy);
thirdy = thirdy + originy;
}
return '<polygon id="a' + objcount + '" points="' + firstx.toString() + ',' + firsty.toString() + ' ' + secx.toString() + ',' + secy.toString() + ' ' + thirdx.toString() + ',' + thirdy.toString() + ' ' + fourx.toString() + ',' + foury.toString() + '" style="fill:none;stroke:rgb(255,255,255);stroke-width:3"></polygon>';
}
function calcTop(objcount, ofset, firstx, firsty, length, width, height) {
var screen = document.getElementById("svg");
var resolutionx = screen.width.baseVal.value;
var resolutiony = screen.height.baseVal.value;
var centx = resolutionx / 2;
var centy = resolutiony / 2;
var originx = centx;
var originy = ofset;
firsty = firsty + originy;
firstx = firstx + originx;
var secx = firstx + width;
var secy = firsty;
if(firsty > originy) {
var foury = firsty + length;
var thirdy = foury;
}
else {
var foury = firsty - length;
var thirdy = foury;
}
if(firsty > originy) {
if(firstx > originx ) {
var fourx = (firstx - originx) / (firsty - originy);
fourx = (foury - originy) * fourx;
fourx = fourx + originx;
}
else {
var fourx = (foury - originy) / (firsty-originy);
fourx = fourx * ( originx - firstx);
fourx = originx - fourx;
}
}
else {
if(firstx > originx ) {
var fourx = (originy - foury) / (originy - firsty);
fourx = fourx / (originx + firstx);
fourx = fourx + originx;
}
else {
var fourx = (originy - foury) / (originy - firsty);
fourx = fourx / (originx - ( originx - firstx));
fourx = originx - fourx;
}
}
if(secy > originy) {
if(secx > originx) {
var thirdx = (secx - originx) / (secy - originy);
thirdx = (thirdy - originy) * thirdx;
thirdx = thirdx + originx;
}
else {
var thirdx = (thirdy - originy) / (secy-originy);
thirdx = thirdx * ( originx - secx);
thirdx = originx - thirdx;
}
}
else {
if(secx > originx ) {
var thirdx = (originy - thirdy) / (originy - secy);
thirdx = thirdx / (originx + thirdx);
thirdx = thirdx + originx;
}
else {
var thirdx = (originy - thirdy) / (originy - secy);
thirdx = thirdx / (originx - ( originx - secx));
thirdx = originx - thirdx;
}
}
if(firstx > originx) {
foury = (firstx - originx) / (firsty - originy);
foury = (fourx - originx) / foury;
foury = foury + originy;
}
else {
foury = (originx - fourx) / (originx - firstx);
foury = foury * (firsty - originy);
foury = foury + originy;
}
if(secx > originx) {
thirdy = (secx - originx) / (secy - originy);
thirdy = (thirdx - originx) / thirdy;
thirdy = thirdy + originy;
}
else {
thirdy = (originx - thirdx) / (originx - secx);
thirdy = thirdy * (secy - originy);
thirdy = thirdy + originy;
}
firsty = firsty - height;
secy = secy - height;
if(firstx > originx) {
foury = (firstx - originx) / (firsty - originy);
foury = (fourx - originx) / foury;
foury = foury + originy;
}
else {
foury = (originx - fourx) / (originx - firstx);
foury = foury * (firsty - originy);
foury = foury + originy;
}
if(secx > originx) {
thirdy = (secx - originx) / (secy - originy);
thirdy = (thirdx - originx) / thirdy;
thirdy = thirdy + originy;
}
else {
thirdy = (originx - thirdx) / (originx - secx);
thirdy = thirdy * (secy - originy);
thirdy = thirdy + originy;
}
return '<polygon id="b' + objcount + '" points="' + firstx.toString() + ',' + firsty.toString() + ' ' + secx.toString() + ',' + secy.toString() + ' ' + thirdx.toString() + ',' + thirdy.toString() + ' ' + fourx.toString() + ',' + foury.toString() + '" style="fill:none;stroke:rgb(255, 255, 255);stroke-width:1"></polygon>';
}
function decideIt(ofset, firsty, firstx) {
var screen = document.getElementById("svg");
var resolutionx = screen.width.baseVal.value;
var centx = resolutionx / 2;
firstx = firstx + centx;
var decide = 0;
if(firsty < ofset && firstx > centx) {
decide = 3;
}
else if(firsty < ofset && firstx < centx) {
decide = 2;
}
else if(firsty > ofset && firstx > centx) {
decide = 0;
}
else if(firsty > ofset && firstx < centx) {
decide = 1;
}
return decide;
}
function decideB(id, ofset) {
var bobj = document.getElementById("b" + id);
var by = bobj.points[0].y;
var decide = 0;
if(by > ofset) {
decide = 0;
}
else {
decide = 1;
}
return decide;
}
function sideFront(id) {
var aobj = document.getElementById("a" + id);
var bobj = document.getElementById("b" + id);
return '<polygon id="c' + id + '" points="' + bobj.points[3].x + ',' + bobj.points[3].y + ' ' + bobj.points[2].x + ',' + bobj.points[2].y + ' ' + aobj.points[2].x + ',' + aobj.points[2].y + ' ' + aobj.points[3].x + ',' + aobj.points[3].y + '" style="fill:rgb(180, 0, 0);stroke:rgb(180, 0, 0);stroke-width:1"></polygon>';
}
function sideBack(id) {
var aobj = document.getElementById("a" + id);
var bobj = document.getElementById("b" + id);
return '<polygon id="d' + id + '" points="' + bobj.points[0].x + ',' + bobj.points[0].y + ' ' + bobj.points[1].x + ',' + bobj.points[1].y + ' ' + aobj.points[1].x + ',' + aobj.points[1].y + ' ' + aobj.points[0].x + ',' + aobj.points[0].y + '" style="fill:rgb(210, 0, 0);stroke:rgb(210, 0, 0);stroke-width:1"></polygon>';
}
function sideRight(id) {
var aobj = document.getElementById("a" + id);
var bobj = document.getElementById("b" + id);
return '<polygon id="e' + id + '" points="' + bobj.points[1].x + ',' + bobj.points[1].y + ' ' + aobj.points[1].x + ',' + aobj.points[1].y + ' ' + aobj.points[2].x + ',' + aobj.points[2].y + ' ' + bobj.points[2].x + ',' + bobj.points[2].y + '" style="fill:rgb(255, 0, 0);stroke:rgb(255, 0, 0);stroke-width:1"></polygon>';
}
function sideLeft(id) {
var aobj = document.getElementById("a" + id);
var bobj = document.getElementById("b" + id);
return '<polygon id="f' + id + '" points="' + bobj.points[0].x + ',' + bobj.points[0].y + ' ' + aobj.points[0].x + ',' + aobj.points[0].y + ' ' + aobj.points[3].x + ',' + aobj.points[3].y + ' ' + bobj.points[3].x + ',' + bobj.points[3].y + '" style="fill:rgb(146,39,39);stroke:rgb(146,39,39);stroke-width:1"></polygon>';
}
function redoBottom(id) {
var aobj = document.getElementById("a" + id);
return '<polygon id="aa' + id + '" points="' + aobj.points[0].x + ',' + aobj.points[0].y + ' ' + aobj.points[1].x + ',' + aobj.points[1].y + ' ' + aobj.points[2].x + ',' + aobj.points[2].y + ' ' + aobj.points[3].x + ',' + aobj.points[3].y + '" style="fill:rgb(193,36,36);stroke:rgb(193,36,36);stroke-width:1"></polygon>';
}
function redoTop(id) {
var bobj = document.getElementById("b" + id);
return '<polygon id="bb' + id + '" points="' + bobj.points[0].x + ',' + bobj.points[0].y + ' ' + bobj.points[1].x + ',' + bobj.points[1].y + ' ' + bobj.points[2].x + ',' + bobj.points[2].y + ' ' + bobj.points[3].x + ',' + bobj.points[3].y + '" style="fill:rgb(193,36,36);stroke:rgb(193,36,36);stroke-width:1"></polygon>';
}
function makeNew(objcount, ofset, firstx, firsty, length, width, height) {
var screen = document.getElementById("svg");
var bottom = calcBottom(objcount, ofset, firstx, firsty, length, width, height);
var top = calcTop(objcount, ofset, firstx, firsty, length, width, height);
screen.innerHTML = screen.innerHTML + bottom + top;
var front = sideFront(objcount);
// var back = sideBack(objcount);
var right = sideRight(objcount);
var left = sideLeft(objcount);
var retop = redoTop(objcount);
var rebottom = redoBottom(objcount);
var decide = decideIt(ofset, firsty, firstx);
if(decide == 0) {
screen.innerHTML = screen.innerHTML + left + front;
var bdeci = decideB(objcount, ofset);
if (bdeci == 0) { screen.innerHTML = screen.innerHTML + retop; }
}
if(decide == 1) {
screen.innerHTML = screen.innerHTML + right + front;
var bdeci = decideB(objcount, ofset);
if (bdeci == 0) { screen.innerHTML = screen.innerHTML + retop; }
}
if(decide == 2) {
screen.innerHTML = screen.innerHTML + right + front + rebottom;
}
if(decide == 3) {
screen.innerHTML = screen.innerHTML + left + front + rebottom;
}
}
function selectionBox(objcount, ofset, firstx, firsty, length, width, height) {
var screen = document.getElementById("svg");
var bottom = calcBottom(objcount, ofset, firstx, firsty, length, width, height);
var top = calcTop(objcount, ofset, firstx, firsty, length, width, height);
screen.innerHTML = screen.innerHTML + bottom + top;
}
function saveNewValue(id, ofset, firstx, firsty, length, width, height) {
var valuesdiv = document.getElementById("values");
valuesdiv.innerHTML = valuesdiv.innerHTML + '<div id="' + id + '"><input type="hidden" class="ofset" value="' + ofset + '"><input type="hidden" class="firstx" value="' + firstx + '"><input type="hidden" class="firsty" value="' + firsty + '"><input type="hidden" class="length" value="' + length + '"><input type="hidden" class="width" value="' + width + '"><input type="hidden" class="height" value="' + height + '"></div>';
}
// function changeValue(id, ofset, firstx, firsty, length, width, height) {
// var iddiv = document.getElementById(id);
// iddiv.innerHTML = valuesdiv.innerHTML + '<input type="hidden" class="ofset" value="' + ofset + '"><input type="hidden" class="firstx" value="' + firstx + '"><input type="hidden" class="firsty" value="' + firsty + '"><input type="hidden" class="length" value="' + length + '"><input type="hidden" class="width" value="' + width + '"><input type="hidden" class="height" value="' + height + '">';
// }
function start() {
var screen = document.getElementById("svg");
screen.width.baseVal.value = window.screen.availWidth + (window.screen.availWidth * 0.1);
screen.height.baseVal.value = window.screen.availHeight + (window.screen.availHeight * 0.1);
var ofset = 200;
makeNew(15, ofset, -340, 210, 480, 620, 10);
var random = 50 + (Math.floor(Math.random() * 551));
makeNew(6, ofset, 555, 500, 100, 100, random);
var random = 50 + (Math.floor(Math.random() * 551));
makeNew(14, ofset, -776, 500, 100, 100, random);
var random = 50 + (Math.floor(Math.random() * 551));
makeNew(5, ofset, 444, 500, 100, 100, random);
var random = 50 + (Math.floor(Math.random() * 551));
makeNew(13, ofset, -665, 500, 100, 100, random);
var random = 50 + (Math.floor(Math.random() * 551));
makeNew(4, ofset, 333, 500, 100, 100, random);
var random = 50 + (Math.floor(Math.random() * 551));
makeNew(12, ofset, -554, 500, 100, 100, random);
var random = 50 + (Math.floor(Math.random() * 551));
makeNew(3, ofset, 222, 500, 100, 100, random);
var random = 50 + (Math.floor(Math.random() * 551));
makeNew(11, ofset, -443, 500, 100, 100, random);
var random = 50 + (Math.floor(Math.random() * 551));
makeNew(2, ofset, 111, 500, 100, 100, random);
var random = 50 + (Math.floor(Math.random() * 551));
makeNew(10, ofset, -332, 500, 100, 100, random);
var random = 50 + (Math.floor(Math.random() * 551));
makeNew(9, ofset, -221, 500, 100, 100, random);
var random = 50 + (Math.floor(Math.random() * 551));
makeNew(8, ofset, -110, 500, 100, 100, random);
var random = 50 + (Math.floor(Math.random() * 551));
makeNew(1, ofset, 1, 500, 100, 100, random);
var random = 50 + (Math.floor(Math.random() * 551));
selectionBox("select", ofset, 1, 500, 100, 100, random);
saveNewValue("select", ofset, 1, 500, 100, 100, random);
}
setInterval(frame, 100);
function frame() {
function move(id, keyc) {
var speed = 15;
if(keyc == 65) {
//left
var actobj = document.getElementById('aselect').outerHTML = '';
var bctobj = document.getElementById('bselect').outerHTML = '';
var ofset = document.getElementById("select").getElementsByClassName("ofset")[0];
var firstx = document.getElementById("select").getElementsByClassName("firstx")[0];
var firsty = document.getElementById("select").getElementsByClassName("firsty")[0];
var length = document.getElementById("select").getElementsByClassName("length")[0];
var width = document.getElementById("select").getElementsByClassName("width")[0];
var height = document.getElementById("select").getElementsByClassName("height")[0];
firstx.value = parseInt(firstx.value) - speed;
selectionBox("select", parseInt(ofset.value), parseInt(firstx.value), parseInt(firsty.value), parseInt(length.value), parseInt(width.value), parseInt(height.value));
}
if(keyc == 87) {
//up
var actobj = document.getElementById('aselect').outerHTML = '';
var bctobj = document.getElementById('bselect').outerHTML = '';
var ofset = document.getElementById("select").getElementsByClassName("ofset")[0];
var firstx = document.getElementById("select").getElementsByClassName("firstx")[0];
var firsty = document.getElementById("select").getElementsByClassName("firsty")[0];
var length = document.getElementById("select").getElementsByClassName("length")[0];
var width = document.getElementById("select").getElementsByClassName("width")[0];
var height = document.getElementById("select").getElementsByClassName("height")[0];
firsty.value = parseInt(firsty.value) - speed;
selectionBox("select", parseInt(ofset.value), parseInt(firstx.value), parseInt(firsty.value), parseInt(length.value), parseInt(width.value), parseInt(height.value));
}
if(keyc == 68) {
//right
var actobj = document.getElementById('aselect').outerHTML = '';
var bctobj = document.getElementById('bselect').outerHTML = '';
var ofset = document.getElementById("select").getElementsByClassName("ofset")[0];
var firstx = document.getElementById("select").getElementsByClassName("firstx")[0];
var firsty = document.getElementById("select").getElementsByClassName("firsty")[0];
var length = document.getElementById("select").getElementsByClassName("length")[0];
var width = document.getElementById("select").getElementsByClassName("width")[0];
var height = document.getElementById("select").getElementsByClassName("height")[0];
firstx.value = parseInt(firstx.value) + speed;
selectionBox("select", parseInt(ofset.value), parseInt(firstx.value), parseInt(firsty.value), parseInt(length.value), parseInt(width.value), parseInt(height.value));
}
if(keyc == 83) {
//down
var actobj = document.getElementById('aselect').outerHTML = '';
var bctobj = document.getElementById('bselect').outerHTML = '';
var ofset = document.getElementById("select").getElementsByClassName("ofset")[0];
var firstx = document.getElementById("select").getElementsByClassName("firstx")[0];
var firsty = document.getElementById("select").getElementsByClassName("firsty")[0];
var length = document.getElementById("select").getElementsByClassName("length")[0];
var width = document.getElementById("select").getElementsByClassName("width")[0];
var height = document.getElementById("select").getElementsByClassName("height")[0];
firsty.value = parseInt(firsty.value) + speed;
selectionBox("select", parseInt(ofset.value), parseInt(firstx.value), parseInt(firsty.value), parseInt(length.value), parseInt(width.value), parseInt(height.value));
}
}
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '65') {
move("1", "65");
}
else if (e.keyCode == '87') {
move("1", "87");
}
else if (e.keyCode == '68') {
move("1", "68");
}
else if (e.keyCode == '83') {
move("1", "83");
}
}
}
start();
</script>
</body></html>