Skip to content

Commit c729c2f

Browse files
peteroupcpeteroupc
committed
edit page demos to take better advantage of the page space
1 parent 84b07d6 commit c729c2f

16 files changed

+120
-125
lines changed

‎demos/builtinshapes.html‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
<head>
22
<meta charset=utf-8>
3+
<style>
4+
body { margin: 0px; }
5+
canvas { width:100%; height:100%; overflow: hidden; }
6+
</style>
37
<script type="text/javascript" src="../glutil_min.js"></script>
48
<script type="text/javascript" src="../camera.js"></script>
59
<script type="text/javascript" src="../frame.js"></script>
10+
<script type="text/javascript" src="demoutil.js"></script>
611
</head>
712
<body>
13+
<p style="position:absolute;left:0;top:1em">
814
<a href="javascript:sampleShape(0)">Sphere</a>,
915
<a href="javascript:sampleShape(1)">Cylinder</a>,
1016
<a href="javascript:sampleShape(2)">Closed cylinder</a>,
@@ -14,8 +20,8 @@
1420
<a href="javascript:sampleShape(6)">Cone</a>,
1521
<a href="javascript:sampleShape(7)">Disk</a>,
1622
<a href="javascript:sampleShape(8)">Partial Disk</a>
17-
<br>
18-
<canvas width="600" height="450" id=canvas></canvas>
23+
</p>
24+
<canvas id=canvas></canvas>
1925
<script id="demo">
2026
//<!--
2127
/*
@@ -80,11 +86,4 @@
8086
});
8187
//-->
8288
</script>
83-
<script>
84-
window.addEventListener("load",function(){
85-
var e=document.createElement("pre")
86-
e.innerHTML=document.getElementById("demo").textContent.replace(/</g,"&lt;")
87-
document.body.appendChild(e)
88-
})
89-
</script>
9089
</body>

‎demos/compositeMesh.html‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
<meta charset=utf-8>
21
<head>
2+
<meta charset=utf-8>
3+
<style>
4+
body { margin: 0px; }
5+
canvas { width:100%; height:100%; overflow: hidden; }
6+
</style>
37
<script type="text/javascript" src="../glutil_min.js"></script>
8+
<script type="text/javascript" src="demoutil.js"></script>
49
</head>
510
<body>
611
<a href="javascript:link1()">Single color</a>,
712
<a href="javascript:link2()">Multicolor</a><br>
8-
<canvas width="600" height="450" id=canvas></canvas>
13+
<canvas id=canvas></canvas>
914
<script id="demo">
1015
//<!--
1116
/*
@@ -96,11 +101,4 @@
96101

97102
//-->
98103
</script>
99-
<script>
100-
window.addEventListener("load",function(){
101-
var e=document.createElement("pre")
102-
e.innerHTML=document.getElementById("demo").textContent.replace(/</g,"&lt;")
103-
document.body.appendChild(e)
104-
})
105-
</script>
106104
</body>

‎demos/demoutil.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
window.addEventListener("load",function(){
3+
var a=document.createElement("a")
4+
a.setAttribute("style","margin-left:2px;margin-top:2px;margin-bottom:2px;position:absolute;left:80%;top:0;"+
5+
"background-color:white;text-align:center;text-decoration:none;font-weight:bold")
6+
a.href="javascript:void(null)"
7+
a.innerHTML="View Source"
8+
var e=document.createElement("pre")
9+
e.setAttribute("style","border:2px solid;margin:2px 2px 2px 2px;left:10;padding:2px 2px 2px 2px;"+
10+
"background:rgba(255,255,255,0.8);left:10%;width:85%;height:80%;overflow:scroll;position:absolute;float:right;top:2em")
11+
e.innerHTML=document.getElementById("demo").textContent.replace(/</g,"&lt;")
12+
e.style.display="none"
13+
document.body.appendChild(a)
14+
document.body.appendChild(e)
15+
var viewed=false;
16+
a.addEventListener("click",function(){
17+
if(viewed){
18+
viewed=false;
19+
a.innerHTML="View Source"
20+
e.style.display="none"
21+
} else {
22+
viewed=true;
23+
a.innerHTML="Hide Source"
24+
e.style.display="block"
25+
}
26+
})
27+
})

‎demos/gradient.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
<meta charset=utf-8>
2+
<style>
3+
body { margin: 0px; }
4+
canvas { width:100%; height:100%; overflow: hidden; }
5+
</style>
26
<head>
37
<script type="text/javascript" src="../glutil_min.js"></script>
48
<script type="text/javascript" src="../frame.js"></script>
9+
<script type="text/javascript" src="demoutil.js"></script>
510
</head>
611
<body>
712
<a href="javascript:link1()">Red/blue linear</a>,
813
<a href="javascript:link2()">Green/yellow linear</a>,
914
<a href="javascript:link3()">Red/blue radial</a>,
1015
<a href="javascript:link4()">Green/yellow radial</a>
11-
<canvas width="600" height="450" id=canvas></canvas>
16+
<canvas id=canvas></canvas>
1217
<script id="demo">
1318
//<!--
1419
/*
@@ -111,11 +116,4 @@
111116
})
112117
//-->
113118
</script>
114-
<script>
115-
window.addEventListener("load",function(){
116-
var e=document.createElement("pre")
117-
e.innerHTML=document.getElementById("demo").textContent.replace(/</g,"&lt;")
118-
document.body.appendChild(e)
119-
})
120-
</script>
121119
</body>

‎demos/perspective.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
<meta charset=utf-8>
2+
<style>
3+
body { margin: 0px; }
4+
canvas { width:100%; height:100%; overflow: hidden; }
5+
</style>
26
<head>
37
<script type="text/javascript" src="../glutil_min.js"></script>
48
<script type="text/javascript" src="../camera.js"></script>
59
<script type="text/javascript" src="frustum.js"></script>
10+
<script type="text/javascript" src="demoutil.js"></script>
611
</head>
712
<body>
8-
<canvas width="600" height="450" id=canvas></canvas>
13+
<canvas id=canvas></canvas>
914
<script id="demo">
1015
//<!--
1116
/*
@@ -300,11 +305,4 @@
300305
in order to show the effect better.) Spheres that would be clipped
301306
out by the wireframe volume are colored red.</p>
302307

303-
<script>
304-
window.addEventListener("load",function(){
305-
var e=document.createElement("pre")
306-
e.innerHTML=document.getElementById("demo").textContent.replace(/</g,"&lt;")
307-
document.body.appendChild(e)
308-
})
309-
</script>
310308
</body>

‎demos/platonic.html‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<head>
22
<meta charset=utf-8>
33
<script type="text/javascript" src="../glutil_min.js"></script>
4+
<script type="text/javascript" src="demoutil.js"></script>
45
</head>
56
<body>
67
<canvas width="600" height="450" id=canvas></canvas>
@@ -106,7 +107,6 @@
106107
// Create the 3D scene; find the HTML canvas and pass it
107108
// to Scene3D.
108109
var scene=new Scene3D(document.getElementById("canvas"));
109-
scene.setOrthoAspect(-20,20,-10,10,-20,20);
110110
var mesh;
111111
var dims=4.5*2/Math.sqrt(3);
112112
mesh=Meshes.createBox(dims,dims,dims);
@@ -127,6 +127,7 @@
127127
scene.makeShape(mesh).setMaterial(shiny("yellow")).setPosition(-15,-5,0))
128128
var rotation=[0,0,0];
129129
GLUtil.renderLoop(function(){
130+
scene.setOrthoAspect(-20,20,-10,10,-20,20);
130131
for(var i=0;i<scene.shapes.length;i++){
131132
scene.shapes[i].setQuaternion(
132133
GLMath.quatFromTaitBryan(rotation));
@@ -137,11 +138,4 @@
137138
});
138139
//-->
139140
</script>
140-
<script>
141-
window.addEventListener("load",function(){
142-
var e=document.createElement("pre")
143-
e.innerHTML=document.getElementById("demo").textContent.replace(/</g,"&lt;")
144-
document.body.appendChild(e)
145-
})
146-
</script>
147141
</body>

‎demos/selfpulse.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
<head>
22
<meta charset=utf-8>
3+
<style>
4+
body { margin: 0px; }
5+
canvas { width:100%; height:100%; overflow: hidden; }
6+
</style>
37
<script type="text/javascript" src="../glutil_min.js"></script>
8+
<script type="text/javascript" src="demoutil.js"></script>
49
</head>
510
<body>
6-
<canvas width="600" height="450" id=canvas></canvas>
11+
<canvas id=canvas></canvas>
712
<script id="demo">
813
//<!--
914
/*
@@ -52,11 +57,4 @@
5257
});
5358
//-->
5459
</script>
55-
<script>
56-
window.addEventListener("load",function(){
57-
var e=document.createElement("pre")
58-
e.innerHTML=document.getElementById("demo").textContent.replace(/</g,"&lt;")
59-
document.body.appendChild(e)
60-
})
61-
</script>
6260
</body>

‎demos/shapes.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
<head>
22
<meta charset=utf-8>
3+
<style>
4+
body { margin: 0px; }
5+
canvas { width:100%; height:100%; overflow: hidden; }
6+
</style>
37
<script type="text/javascript" src="../glutil_min.js"></script>
8+
<script type="text/javascript" src="demoutil.js"></script>
49
</head>
510
<body>
6-
<canvas width="600" height="450" id=canvas></canvas>
11+
<canvas id=canvas></canvas>
712
<script id="demo">
813
//<!--
914
/*
@@ -59,11 +64,4 @@
5964
});
6065
//-->
6166
</script>
62-
<script>
63-
window.addEventListener("load",function(){
64-
var e=document.createElement("pre")
65-
e.innerHTML=document.getElementById("demo").textContent.replace(/</g,"&lt;")
66-
document.body.appendChild(e)
67-
})
68-
</script>
6967
</body>

‎demos/simple.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
<meta charset=utf-8>
2+
<style>
3+
body { margin: 0px; }
4+
canvas { width:100%; height:100%; overflow: hidden; }
5+
</style>
26
<head>
37
<script type="text/javascript" src="../glutil_min.js"></script>
8+
<script type="text/javascript" src="demoutil.js"></script>
49
</head>
510
<body>
6-
<canvas width="600" height="450" id=canvas></canvas>
11+
<canvas id=canvas></canvas>
712
<script id="demo">
813
//<!--
914
/*
@@ -43,11 +48,4 @@
4348

4449
//-->
4550
</script>
46-
<script>
47-
window.addEventListener("load",function(){
48-
var e=document.createElement("pre")
49-
e.innerHTML=document.getElementById("demo").textContent.replace(/</g,"&lt;")
50-
document.body.appendChild(e)
51-
})
52-
</script>
5351
</body>

‎demos/squares.html‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
<meta charset=utf-8>
2+
<style>
3+
body { margin: 0px; }
4+
canvas { width:100%; height:100%; overflow: hidden; }
5+
</style>
26
<head>
37
<script type="text/javascript" src="../glutil_min.js"></script>
48
<script type="text/javascript" src="../frame.js"></script>
9+
<script type="text/javascript" src="demoutil.js"></script>
10+
<script type="text/javascript" src="demoutil.js"></script>
511
</head>
6-
<h1>Shader Filters</h1>
12+
<p style="position:absolute;left:0;top:1em">
713
<a href="javascript:link1()">Grayscale</a>,
814
<a href="javascript:link2()">Invert colors</a>,
915
<a href="javascript:link3()">Wave</a>,
@@ -15,8 +21,8 @@ <h1>Shader Filters</h1>
1521
<a href="javascript:linknone()">No filters</a><br>
1622
<a href="javascript:link1a()">Blinds</a>,
1723
<a href="javascript:link2a()">Platonic solids</a>
18-
<br>
19-
<canvas width="600" height="450" id=canvas></canvas>
24+
</p>
25+
<canvas id=canvas></canvas>
2026
<script id="demo">
2127
//<!--
2228
/*
@@ -412,11 +418,4 @@ <h1>Shader Filters</h1>
412418
});
413419
//-->
414420
</script>
415-
<script>
416-
window.addEventListener("load",function(){
417-
var e=document.createElement("pre")
418-
e.innerHTML=document.getElementById("demo").textContent.replace(/</g,"&lt;")
419-
document.body.appendChild(e)
420-
})
421-
</script>
422421
</body>

0 commit comments

Comments
 (0)