Permalink
Browse files

modification and clean up of examples.

  • Loading branch information...
1 parent 6c5beef commit 7fe66930c046983fcb306466821fe2e7bed33e23 @corbanbrook corbanbrook committed Mar 8, 2011
View
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>WebGL-2D Example</title>
+
+ <script src="../webgl-2d.js" type="text/javascript"></script>
+
+ <script type="text/javascript">
+ document.addEventListener("DOMContentLoaded", init, false);
+
+ var cvs2D, cvsGL, ctx2D, ctxGL, width, height;
+ var frameCount = 0;
+
+ function init() {
+ cvs2D = document.getElementById("canvas2D");
+ cvsGL = document.getElementById("canvasGL");
+
+ width = cvs2D.width, height = cvs2D.height;
+
+ WebGL2D.enable(cvsGL); // adds new context "webgl-2d" to cvs
+
+ // Easily switch between regular canvas 2d context and webgl-2d
+ ctx2D = cvs2D.getContext("2d");
+ ctxGL = cvsGL.getContext("webgl-2d");
+
+ draw(ctx2D);
+ draw(ctxGL);
+ }
+
+ function draw(ctx) {
+ ctx.strokeStyle = "rgba(255, 50, 255, 0.5)";
+ ctx.fillStyle = "rgb(50, 0, 50)";
+ ctx.fillRect(0, 0, width, height);
+
+ ctx.strokeStyle = "rgba(50, 255, 255, 0.5)";
+ ctx.beginPath();
+ ctx.lineTo(0, 0);
+ ctx.lineTo(100, 100);
+ ctx.lineTo(100, 0);
+ ctx.lineTo(0, 0);
+
+ ctx.moveTo(width, height);
+ ctx.lineTo(width - 100, height - 100);
+ ctx.lineTo(width - 100, height);
+ ctx.closePath();
+
+ ctx.moveTo(260, 300);
+ ctx.lineTo(300, 300);
+ ctx.lineTo(350, 100);
+ ctx.stroke();
+ ctx.closePath();
+
+ ctx.beginPath();
+ ctx.stroke();
+ ctx.closePath();
+ }
+ </script>
+
+ <style type="text/css">
+ body, * {
+ font-family: sans-serif;
+ }
+ </style>
+
+ </head>
+
+ <body>
+ <h1>Example: WebGL-2D Comparison</h1>
+ <h2>beginPath, closePath, moveTo, lineTo, fill, stroke</h2>
+ <div style="float: left; margin-right: 10px;">
+ <h2>WebGL-2D</h2>
+ <canvas id="canvasGL" width="350" height="350" style="border: 1px solid black;"></canvas>
+ </div>
+ <div style="float: left;">
+ <h2>Canvas2D</h2>
+ <canvas id="canvas2D" width="350" height="350" style="border: 1px solid black;"></canvas>
+ </div>
+ </body>
+</html>
View
@@ -12,8 +12,6 @@
var frameCount = 0;
var img = new Image();
img.src = "images/spin0000.png";
- var img2 = new Image();
- img2.src = "images/spin0015.png";
function init() {
cvs2D = document.getElementById("canvas2D");
@@ -27,62 +25,22 @@
ctx2D = cvs2D.getContext("2d");
ctxGL = cvsGL.getContext("webgl-2d");
- draw(ctx2D);
- draw(ctxGL);
-
- // Enable animation
- //setInterval(function() { frameCount++; draw(ctxGL); draw(ctx2D); }, 1000/30);
+ img.onload = function() {
+ draw(ctx2D);
+ draw(ctxGL);
+ };
}
function draw(ctx) {
- ctx.lineWidth = 5;
- ctx.strokeStyle = "rgba(255, 50, 255, 0.5)";
- ctx.fillStyle = "rgb(50, 0, 50)";
- ctx.fillRect(0, 0, width, height);
-
- ctx.save();
- ctx.translate(width/2, height/2);
- ctx.rotate(frameCount/100);
- ctx.save();
- ctx.fillStyle = "rgba(50, 255, 255, 0.1)";
- for (var i = 0; i < 50; i++) {
- ctx.scale(2,2);
- ctx.fillRect(0, 0, 50, 50);
- ctx.scale(.5, .5);
- ctx.rotate(-2*Math.PI/50);
- }
- ctx.restore();
- ctx.translate(-150, -150);
- ctx.strokeRect(0, 0, 300, 300);
- ctx.restore();
-
- /*
- ctx.strokeStyle = "rgba(50, 255, 255, 0.5)";
- ctx.beginPath();
- ctx.lineTo(0, 0);
- ctx.lineTo(100, 100);
- ctx.lineTo(100, 0);
- ctx.lineTo(0, 0);
-
- ctx.moveTo(width, height);
- ctx.lineTo(width - 100, height - 100);
- ctx.lineTo(width - 100, height);
- ctx.closePath();
-
- ctx.moveTo(260, 300);
- ctx.lineTo(300, 300);
- ctx.lineTo(350, 100);
- ctx.stroke();
- ctx.closePath();
-
- ctx.beginPath();
- ctx.stroke();
- ctx.closePath();
- */
-
- ctx.drawImage(img, 10, 10);
- ctx.drawImage(img2, 40, 10, 50, 50);
- ctx.strokeRect(0, 0, 300, 300);
+ for (var col = 0; col < width/img.width; col++) {
+ ctx.drawImage(img, col * img.width, 0);
+ }
+ for (var row = 1; row < height/img.height; row++) {
+ for (var col = 0; col < width/img.width; col++) {
+ var scale = row + col;
+ ctx.drawImage(img, col * img.width + scale/2, row * img.height + scale/2, img.width - scale, img.height - scale);
+ }
+ }
}
</script>
@@ -96,6 +54,7 @@
<body>
<h1>Example: WebGL-2D Comparison</h1>
+ <h2>drawImage</h2>
<div style="float: left; margin-right: 10px;">
<h2>WebGL-2D</h2>
<canvas id="canvasGL" width="350" height="350" style="border: 1px solid black;"></canvas>
@@ -33,16 +33,19 @@
function draw(ctx) {
ctx.fillStyle = "rgb(50, 0, 50)";
ctx.fillRect(0, 0, width, height);
- ctx.fillStyle = "rgba(50, 255, 255, 0.1)";
- ctx.translate(width/2, width/2);
+
ctx.save();
- for (var i=1; i<256; i*=1.15) {
- ctx.rotate(0.5);
+ ctx.translate(width/2, height/2);
+ ctx.rotate(frameCount/100);
ctx.save();
- ctx.translate(i*2, 0);
- ctx.fillRect(-i, -i, i*2, i*2);
+ ctx.fillStyle = "rgba(50, 255, 255, 0.1)";
+ for (var i = 0; i < 50; i++) {
+ ctx.scale(2,2);
+ ctx.fillRect(0, 0, 50, 50);
+ ctx.scale(.5, .5);
+ ctx.rotate(-2*Math.PI/50);
+ }
ctx.restore();
- } //for
ctx.restore();
}
</script>
@@ -57,6 +60,7 @@
<body>
<h1>Example: WebGL-2D Comparison</h1>
+ <h2>fillRect</h2>
<div style="float: left; margin-right: 10px;">
<h2>WebGL-2D</h2>
<canvas id="canvasGL" width="350" height="350" style="border: 1px solid black;"></canvas>
View
@@ -76,6 +76,7 @@
<body>
<h1>Example: WebGL-2D Comparison</h1>
+ <h2>getImageData and putImageData</h2>
<div style="float: left; margin-right: 10px;">
<h2>WebGL-2D</h2>
<canvas id="canvasGL" width="170" height="170" style="border: 1px solid black;"></canvas>
@@ -35,17 +35,17 @@
}
function draw(ctx) {
- ctx.lineWidth = 5;
+ ctx.lineWidth = 1;
ctx.strokeStyle = "rgba(255, 50, 255, 0.5)";
ctx.fillStyle = "rgb(50, 0, 50)";
ctx.fillRect(0, 0, width, height);
ctx.translate(width/2, height/2);
ctx.save();
ctx.save();
- ctx.fillStyle = "rgba(50, 255, 255, 0.1)";
+ ctx.strokeStyle = "rgb(50, 255, 255)";
for (var i = 0; i < 50; i++) {
ctx.scale(2,2);
- ctx.fillRect(0, 0, 50, 50);
+ ctx.strokeRect(0, 0, 50, 50);
ctx.scale(.5, .5);
ctx.rotate(-2*Math.PI/50);
}
@@ -66,6 +66,7 @@
<body>
<h1>Example: WebGL-2D Comparison</h1>
+ <h2>strokeRect</h2>
<div style="float: left; margin-right: 10px;">
<h2>WebGL-2D</h2>
<canvas id="canvasGL" width="350" height="350" style="border: 1px solid black;"></canvas>
View
@@ -33,19 +33,16 @@
function draw(ctx) {
ctx.fillStyle = "rgb(50, 0, 50)";
ctx.fillRect(0, 0, width, height);
-
+ ctx.fillStyle = "rgba(50, 255, 255, 0.1)";
+ ctx.translate(width/2, width/2);
ctx.save();
- ctx.translate(width/2, height/2);
- ctx.rotate(frameCount/100);
+ for (var i=1; i<256; i*=1.15) {
+ ctx.rotate(0.5);
ctx.save();
- ctx.fillStyle = "rgba(50, 255, 255, 0.1)";
- for (var i = 0; i < 50; i++) {
- ctx.scale(2,2);
- ctx.fillRect(0, 0, 50, 50);
- ctx.scale(.5, .5);
- ctx.rotate(-2*Math.PI/50);
- }
+ ctx.translate(i*2, 0);
+ ctx.fillRect(-i, -i, i*2, i*2);
ctx.restore();
+ } //for
ctx.restore();
}
</script>
@@ -60,6 +57,7 @@
<body>
<h1>Example: WebGL-2D Comparison</h1>
+ <h2>transform stack</h2>
<div style="float: left; margin-right: 10px;">
<h2>WebGL-2D</h2>
<canvas id="canvasGL" width="350" height="350" style="border: 1px solid black;"></canvas>

0 comments on commit 7fe6693

Please sign in to comment.