This app draws boxes in any shape with four sided faces and with any fill with a few exceptions.
First, a few tips on how to use:
To draw any new figure you must first click the New button:
Click Image for larger view
The New button must be green and the count box must read 0 for any new object to be drawn.
With the help of the grid, coordinates for the front face must be placed by clicking.
Seven points are required to define a box.
After the first four points are set, the front face is drawn and filled with the color selected from a color input box.
The fill is that chosen with two exceptions:
The default black of the input creates a gray fill and checking wireframe chooses no fill, instead, a wireframe is drawn.
The next two clicks create the box top and the final click finishes the figure with a total of three faces being visible.
Here is how a standared box may appear:
Click Image for larger view
You notice that the sample image does not have the grid. Selecting a background color and clicking Clear Grid removes the grid and highlights the box against the selected background.
This procedure should only be done as the last step, since to return to the drawing mode, the Undo button must be clicked, which removes anything drawn and turns the New button reddish as a warning that it must be clicked to draw anything new.
It is also possible to place multiple objects in the same drawing, as in this image, which also demonstrates a box with a non-rectangular face;
Click Image for larger view
This is an interesting optical illusion; If you focus on only one box, you see it as a box. But if you look at both boxes simultaneously, only one at a time can appear as a box, the other being a concave figure, and it flips back and forth between the two boxes as to which seems to be a box.
Here is a box made from parallelograms:
Click Image for larger view
Wireframes can be drawn with a limitation; either the first and second point must have the same y value or the first and fourth point must have the same x value. Here is a wireframe example:
This restriction does not occur in a filled box. In this example the first point is the upper right one:
Here is an Escher like figure:
Click Image for larger view
Here is the code:
<html xmlns='http://www.w3.org/1999/xhtml'>
<head profile='http://gmpg.org/xfn/11'>
<title>Box</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 12pt Arial;}a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
input{position: relative; top; 5px; height: 20px}
#t1 {font-size: 12pt; text-align: center}
#b1{background: #aaffaa}
</style>
</head>
<body>
<input type=”text” id=”t1″ name=”t1″ value=”Count” /> <input type=’color’ id=’color’ value= simple color /> <input type=”button” id=”b1″ name=”b1″ value=”New” onclick=’init();’ /> <input type=”button” id=”b2″ name=”b2″ value=”Undo” onclick=’undo();’ /> <input type=”button” id=”b3″ name=”b3″ value=”Clear Grid” onclick=’clar();’ /> <input type=”checkbox” id = “cb” name=”cb” value=”wireframe” />Wireframe
lbracket div class=”d1″ rbracket
<svg id=”svg1″ style=”cursor: crosshair” width=”100%” height=”100%” xmlns=”http://www.w3.org/2000/svg”>
<defs>
<pattern id=”smallGrid” width=”8″ height=”8″ patternUnits=”userSpaceOnUse”>
<path d=”M 8 0 L 0 0 0 8″ fill=”none” stroke=”black” stroke-width=”0.5″/>
</pattern>
<pattern id=”grid” width=”80″ height=”80″ patternUnits=”userSpaceOnUse”>
<rect width=”80″ height=”80″ fill=”url(#smallGrid)”/>
<path d=”M 80 0 L 0 0 0 80″ fill=”none” stroke=”black” stroke-width=”1″/>
</pattern>
</defs>
<rect width=”100%” height=”100%” fill=”url(#grid)” />
</svg>
</div>
lbracket script type=”text/javascript” rbracket
var posX;var posY; var cnt; var oldX; var oldY; var fl = “#dddddd”; var clr = “”;
var IE; Xpos = new Array(); Ypos = new Array();
function init() {
document.getElementById(“b1”).style.backgroundColor = “#aaffaa”;
for (var i = 1; i <= 10; i ++) {
Xpos[i] = 0;
Ypos[i] = 0;
}
if (document.getElementById(“color”).value != “#000000”) {
fl = document.getElementById(“color”).value;
cnt –;
} else {
fl = “#dddddd”;
cnt –;
}
if (document.getElementById(“cb”).checked) {
fl = “none”
cnt –;
}
cnt = -1;
oldX = 0;
oldY = 0;
IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onclick = getMouse2;
// document.onmousemove = getMouseXY;
}
function getMouse2(e) {
cnt ++;
document.getElementById(“t1”).value = cnt ;
if (IE) {
if (cnt > 0) {
posX = event.clientX + document.body.scrollLeft;
posY = event.clientY + document.body.scrollTop;
}
}
else {
if (cnt > 0) {
posX = e.pageX ;
posY = e.pageY – 35;
Xpos[cnt] = posX;
Ypos[cnt] = posY;
}
if (cnt < 8) document.getElementById(“svg1”) .innerHTML += ‘ <ellipse cx = ‘ + posX + ‘ cy = ‘ + posY + ‘ rx = “2” ry = “2” fill = “black” />’;
clr += ‘ <ellipse cx = ‘ + posX + ‘ cy = ‘ + posY + ‘ rx = “2” ry = “2” fill = “black” />’;
if (cnt == 4) {
document.getElementById(“svg1″) .innerHTML += ‘<polygon points= ” ‘ + Xpos[1] + ‘ ,’ + Ypos[1] + ‘ ‘ + Xpos[2] + ‘,’ + Ypos[2] + ‘ ‘ + Xpos[3] + ‘,’ + Ypos[3] + ‘ ‘ + Xpos[4] + ‘,’ + Ypos[4] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
clr += ‘<polygon points= ” ‘ + Xpos[1] + ‘ ,’ + Ypos[1] + ‘ ‘ + Xpos[2] + ‘,’ + Ypos[2] + ‘ ‘ + Xpos[3] + ‘,’ + Ypos[3] + ‘ ‘ + Xpos[4] + ‘,’ + Ypos[4] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
}
if (cnt == 6) {
document.getElementById(“svg1″) .innerHTML += ‘<polygon points= ” ‘ + Xpos[1] + ‘ ,’ + Ypos[1] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[5] + ‘ ‘ + Xpos[6] + ‘,’ + Ypos[6] + ‘ ‘ + Xpos[2] + ‘,’ + Ypos[2] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
clr += ‘<polygon points= ” ‘ + Xpos[1] + ‘ ,’ + Ypos[1] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[5] + ‘ ‘ + Xpos[6] + ‘,’ + Ypos[6] + ‘ ‘ + Xpos[2] + ‘,’ + Ypos[2] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
}
if (cnt == 7) {
document.getElementById(“svg1″) .innerHTML += ‘<polygon points= ” ‘ + Xpos[3] + ‘ ,’ + Ypos[3] + ‘ ‘ + Xpos[2] + ‘,’ + Ypos[2] + ‘ ‘ + Xpos[6] + ‘,’ + Ypos[6] + ‘ ‘ + Xpos[7] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
clr += ‘<polygon points= ” ‘ + Xpos[3] + ‘ ,’ + Ypos[3] + ‘ ‘ + Xpos[2] + ‘,’ + Ypos[2] + ‘ ‘ + Xpos[6] + ‘,’ + Ypos[6] + ‘ ‘ + Xpos[7] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
}
if (document.getElementById(“cb”).checked && cnt == 7) {
fl = “none”;
if ( Math.abs(Xpos[1] – Xpos[4]) < 5 ) {
document.getElementById(“svg1″) .innerHTML += ‘<polygon points= ” ‘ + Xpos[4] + ‘ ,’ + Ypos[4] + ‘ ‘ + Xpos[1] + ‘,’ + Ypos[1] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[5] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
document.getElementById(“svg1″).innerHTML += ‘<polygon points= ” ‘ + Xpos[5] + ‘ ,’ + Ypos[5] + ‘ ‘ + Xpos[6] + ‘,’ + Ypos[6] + ‘ ‘ + Xpos[7] + ‘,’ + Ypos[7] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
clr += ‘<polygon points= ” ‘ + Xpos[4] + ‘ ,’ + Ypos[4] + ‘ ‘ + Xpos[1] + ‘,’ + Ypos[1] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[5] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
clr += ‘<polygon points= ” ‘ + Xpos[5] + ‘ ,’ + Ypos[5] + ‘ ‘ + Xpos[6] + ‘,’ + Ypos[6] + ‘ ‘ + Xpos[7] + ‘,’ + Ypos[7] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
} else if (Xpos[1] > Xpos[4]) {
document.getElementById(“svg1″) .innerHTML += ‘<polygon points= ” ‘ + Xpos[4] + ‘ ,’ + Ypos[4] + ‘ ‘ + Xpos[1] + ‘,’ + Ypos[1] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[5] + ‘ ‘ + Xpos[1] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
document.getElementById(“svg1″).innerHTML += ‘<polygon points= ” ‘ + Xpos[5] + ‘ ,’ + Ypos[5] + ‘ ‘ + Xpos[6] + ‘,’ + Ypos[6] + ‘ ‘ + Xpos[7] + ‘,’ + Ypos[7] + ‘ ‘ + Xpos[1] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
clr += ‘<polygon points= ” ‘ + Xpos[4] + ‘ ,’ + Ypos[4] + ‘ ‘ + Xpos[1] + ‘,’ + Ypos[1] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[5] + ‘ ‘ + Xpos[1] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
clr += ‘<polygon points= ” ‘ + Xpos[5] + ‘ ,’ + Ypos[5] + ‘ ‘ + Xpos[6] + ‘,’ + Ypos[6] + ‘ ‘ + Xpos[7] + ‘,’ + Ypos[7] + ‘ ‘ + Xpos[1] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
} else {
document.getElementById(“svg1″) .innerHTML += ‘<polygon points= ” ‘ + Xpos[4] + ‘ ,’ + Ypos[4] + ‘ ‘ + Xpos[1] + ‘,’ + Ypos[1] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[5] + ‘ ‘ + Xpos[2] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
document.getElementById(“svg1″).innerHTML += ‘<polygon points= ” ‘ + Xpos[5] + ‘ ,’ + Ypos[5] + ‘ ‘ + Xpos[6] + ‘,’ + Ypos[6] + ‘ ‘ + Xpos[7] + ‘,’ + Ypos[7] + ‘ ‘ + Xpos[2] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
document.getElementById(“svg1″) .innerHTML += ‘<polygon points= ” ‘ + Xpos[4] + ‘ ,’ + Ypos[4] + ‘ ‘ + Xpos[1] + ‘,’ + Ypos[1] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[5] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
clr += ‘<polygon points= ” ‘ + Xpos[4] + ‘ ,’ + Ypos[4] + ‘ ‘ + Xpos[1] + ‘,’ + Ypos[1] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[5] + ‘ ‘ + Xpos[2] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
clr += ‘<polygon points= ” ‘ + Xpos[5] + ‘ ,’ + Ypos[5] + ‘ ‘ + Xpos[6] + ‘,’ + Ypos[6] + ‘ ‘ + Xpos[7] + ‘,’ + Ypos[7] + ‘ ‘ + Xpos[2] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
clr += ‘<polygon points= ” ‘ + Xpos[4] + ‘ ,’ + Ypos[4] + ‘ ‘ + Xpos[1] + ‘,’ + Ypos[1] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[5] + ‘ ‘ + Xpos[5] + ‘,’ + Ypos[7] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
}
}
}
if (posY > 35) {
document.getElementById(“t1”).value = cnt ;
}
}
function clar() {
document.getElementById(“svg1”).style.backgroundColor = document.getElementById(“color”).value;
document.getElementById(“svg1”) .innerHTML = clr;
}
function undo() {
document.getElementById(“svg1”).style.backgroundColor = “white”;
document.getElementById(“b1”).style.backgroundColor = “#ffaaaa”;
clr = “”;
cnt = -3;
for (var i = 1; i <= 10; i ++) {
Xpos[i] = 0;
posX = 0;
posY = 0;
Ypos[i] = 0;
}
document.getElementById(“svg1″) .innerHTML = ‘<defs>\n<pattern id=”smallGrid” width=”8″ height=”8″ patternUnits=”userSpaceOnUse”>\n<path d=”M 8 0 L 0 0 0 8″ fill=”none” stroke=”black” stroke-width=”0.5″/>\n </pattern>\n <pattern id=”grid” width=”80″ height=”80″ patternUnits=”userSpaceOnUse”>\n<rect width=”80″ height=”80″ fill=”url(#smallGrid)”/>\n<path d=”M 80 0 L 0 0 0 80″ fill=”none” stroke=”black” stroke-width=”1″/>n</pattern>\n </defs>\n<rect width=”100%” height=”100%” fill=”url(#grid)” />’;
}
/* function getMouseXY(e) {
if (IE) {
posX = event.clientX + document.body.scrollLeft;
posY = event.clientY + document.body.scrollTop;
}
else {
posX = e.pageX -10;
posY = e.pageY – 50;
}
document.getElementById(“t1”).value = posX;
}*/
</script>
</body></html>
The points are made from ellipses:
if (cnt < 8) document.getElementById(“svg1”) .innerHTML += ‘ <ellipse cx = ‘ + posX + ‘ cy = ‘ + posY + ‘ rx = “2” ry = “2” fill = “black” />’;
clr += ‘ <ellipse cx = ‘ + posX + ‘ cy = ‘ + posY + ‘ rx = “2” ry = “2” fill = “black” />’;
The boxes are created from a series of polygons when the point count reaches 4 6 or 7:
if (cnt == 4) {
document.getElementById(“svg1″) .innerHTML += ‘<polygon points= ” ‘ + Xpos[1] + ‘ ,’ + Ypos[1] + ‘ ‘ + Xpos[2] + ‘,’ + Ypos[2] + ‘ ‘ + Xpos[3] + ‘,’ + Ypos[3] + ‘ ‘ + Xpos[4] + ‘,’ + Ypos[4] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
clr += ‘<polygon points= ” ‘ + Xpos[1] + ‘ ,’ + Ypos[1] + ‘ ‘ + Xpos[2] + ‘,’ + Ypos[2] + ‘ ‘ + Xpos[3] + ‘,’ + Ypos[3] + ‘ ‘ + Xpos[4] + ‘,’ + Ypos[4] + ‘ ” fill = ‘ + fl + ‘ stroke = “black” stroke-width=”2″ />’;
}
The grid is set up with the following code:
<div class=”d1″>
<svg id=”svg1″ style=”cursor: crosshair” width=”100%” height=”100%” xmlns=”http://www.w3.org/2000/svg”>
<defs>
<pattern id=”smallGrid” width=”8″ height=”8″ patternUnits=”userSpaceOnUse”>
<path d=”M 8 0 L 0 0 0 8″ fill=”none” stroke=”black” stroke-width=”0.5″/>
</pattern>
<pattern id=”grid” width=”80″ height=”80″ patternUnits=”userSpaceOnUse”>
<rect width=”80″ height=”80″ fill=”url(#smallGrid)”/>
<path d=”M 80 0 L 0 0 0 80″ fill=”none” stroke=”black” stroke-width=”1″/>
</pattern>
</defs>
<rect width=”100%” height=”100%” fill=”url(#grid)” />
</svg>
</div>
Clicking the New button calls thew init() function, part of which sets up mouse input:
IE = document.all?true:false;
document.onclick = getMouse2;
}
function getMouse2(e) {
cnt ++;
document.getElementById(“t1”).value = cnt ;
if (IE) {
if (cnt > 0) {
posX = event.clientX + document.body.scrollLeft;
posY = event.clientY + document.body.scrollTop;
}
}
else {
if (cnt > 0) {
posX = e.pageX ;
posY = e.pageY – 35;
Xpos[cnt] = posX;
Ypos[cnt] = posY;
}
Any click will trigger a mouse event, so the following is needed to draw the points only within the confines of the grid:
if (posY > 35) {
document.getElementById(“t1”).value = cnt ;
}
Tips & Tricks 