Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

improved canvas leds demo

  • Loading branch information...
commit cffd42f5539badabe8cc59e4263936036f45672e 1 parent bf2d273
@remcoder authored
View
153 demo2/demo.css
@@ -1,153 +0,0 @@
-
- html, body {
- width: 100%;
- height: 100%;
- }
-
- body {
- text-align: center;
- margin: 0;
- color: #FF1492;
- background-color: #000;
- xtext-shadow: white 0px 0px 20px;
- font-family: Arial;
- xoverflow: hidden;
- }
- h1
- {
- text-shadow: white 0px 0px 100px;
- }
- a
- {
- color: white;
- }
- .options
- {
-
- width: 400px;
- padding: 20px 20px 20px 20px;
- background-color: #666;
- border-radius: 20px;
- -webkit-border-radius: 20px;
- -moz-border-radius: 20px;
- -webkit-box-shadow: #666 0px 0px 140px;
- -moz-box-shadow: #666 0px 0px 40px;
-
- line-height: 25px;
-
- margin-bottom: 20px;
- }
-
- .options label
- {
- display:inline-block;
- color: white;
- background-color: #444;
- padding: 0 5px 0 5px;
- font-weight: bold;
- border-radius: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- width: 150px;
- margin: 3px;
- margin-right: 15px;
- }
- .options input, .options select
- {
- display:inline-block;
- width: 150px;
-
- height: 20px;
- margin: 3px;
- padding:0;
- }
-
- .options.text-input
- {
- width: 400px;
- margin-right: 20px;
- }
-
- .column
- {
- display: inline-block;
- vertical-align:top;
- }
- .text-input input
- {
- width: 320px;
- height: 40px;
- font-size: 200%;
- text-align: center;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- }
-
- canvas {
- display: inline-block;
- padding: 40px 20px 20px 20px;
- }
- .canvas-wrapper{
- min-height: 200px;
- }
- .instructions
- {
- color: black;
- font-size: 120%;
- background-color: #ffff88;
- padding: 2px 10px 2px 10px;
- border-radius: 4px;
- }
-
- .instructions-container
- {
- margin-bottom: 15px;
- }
-
- .instructions .number
- {
- background-color: black;
- color: white;
- padding: 0px 5px 0px 5px;
- font-family: courier;
- border-radius: 5px;
- }
- pre
- {
- color: #0f0;
- text-align: left;
- line-height: 16px;
- background-color: #000;
- padding: 5px;
- border-radius: 5px;
- margin: auto;
- display: inline-block;
- text-align:left;
- }
-
- .footer
- {
- position: fixed;
- bottom: 0;
- xleft: 15px;
- xmargin: auto;
- height: 22px;
- font-style: italic;
- width: 100%;
- background-color: rgba(10,100,100,0.8);
- text-align: left;
- padding-top: 5px;
- padding-left: 15px;
-
- color: white;
- }
- .footer .right {
- float: right;
- margin-right: 30px;
- }
-
- .demo
- {
- position: fixed;
- width: 100%;
- }
View
4 demo3/demo.css → demos/css3d/demo.css
@@ -52,6 +52,10 @@ pre
color: white;
}
+.ribbon .title {
+ font-weight: bold;
+}
+
.ribbon .right {
float: right;
margin-right: 30px;
View
7 demo3/index.html → demos/css3d/index.html
@@ -10,8 +10,7 @@
<div id="stage" class="stage"></div>
<div class="ribbon header">
- 3D CSS example
- <a href="#" onclick="location.href = 'view-source:'' + location.href; return false">view source</a>
+ <span class="title">3D CSS example</span>
<span class="right"> see the <a href="https://github.com/remcoder/Pxxl.js">Pxxl.js Github repo</a> for tha codez</span>
</div>
@@ -26,14 +25,14 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
- <script src="../build/pxxl-0.3.min.js" type="text/javascript"></script>
+ <script src="pxxl-0.3.min.js" type="text/javascript"></script>
<script type="text/javascript" id="code">
var stage = document.querySelector("#stage");
// load the c64 pixel font and use it to render a string to pixel coordinates
-pxxl("../fonts/c64.bdf", "Cubes!", function (pixels) {
+pxxl("../../fonts/c64.bdf", "Cubes!", function (pixels) {
var shape = new Shape(stage);
var cubes = [];
View
0  demo3/pxxl-0.3.min.js → demos/css3d/pxxl-0.3.min.js
File renamed without changes
View
0  demo/demo.css → demos/demo1/demo.css
File renamed without changes
View
26 demo/index.html → demos/demo1/index.html
@@ -14,31 +14,35 @@
<pre class="code">
+
+ </pre>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
+
+ <script src="pxxl-0.3.min.js" type="text/javascript"></script>
+
+ <script type="text/javascript" id="code">
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d');
function rgba(r,g,b,a) { return "rgba("+ ~~r +","+ ~~g +","+ ~~b +"," + a +")"; }
+
function randomColor() { return rgba(255*Math.random(),
255*Math.random(), 255*Math.random(),1) }
-pxxl("../fonts/c64.bdf", "random colors...", function (pixels) {
- var scale = 8;
+pxxl("../../fonts/c64d.bdf", "random colors...", function (pixels) {
+ var scale = 4;
ctx.clearRect(0,0,canvas.width,canvas.height);
- for (var p=0 ; p&lt;pixels.length ; p++) {
+ for (var p=0 ; p<pixels.length ; p++) {
var pixel = pixels[p];
ctx.fillStyle = randomColor();
ctx.fillRect(pixel.x*scale, pixel.y*scale, scale, scale)
}
});
- </pre>
-
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
-
- <script src="../build/pxxl-0.3.min.js" type="text/javascript"></script>
-
- <script type="text/javascript">
- eval($(".code").text());
+ </script>
+ <script>
+ document.querySelector("pre").innerText = document.getElementById("code").innerText;
</script>
</body>
</html>
View
0  demo2/pxxl-0.3.min.js → demos/demo1/pxxl-0.3.min.js
File renamed without changes
View
75 demos/leds/demo.css
@@ -0,0 +1,75 @@
+
+ html, body {
+ width: 100%;
+ height: 100%;
+ }
+
+ body {
+ text-align: center;
+ margin: 0;
+ color: #FF1492;
+ background-color: #000;
+ xtext-shadow: white 0px 0px 20px;
+ font-family: Arial;
+ xoverflow: hidden;
+ }
+ h1
+ {
+ text-shadow: white 0px 0px 100px;
+ }
+ a
+ {
+ color: white;
+ }
+
+ pre
+ {
+ color: #ccc;
+ text-align: left;
+ line-height: 16px;
+ background-color: #000;
+ padding: 5px;
+ border-radius: 5px;
+ margin: auto;
+ display: inline-block;
+ text-align:left;
+ }
+
+ .ribbon
+ {
+ position: fixed;
+ z-index:1;
+
+ height: 22px;
+ font-style: italic;
+ width: 100%;
+ background-color: rgba(50,0,50,0.8);
+ text-align: left;
+ padding-top: 5px;
+ padding-left: 15px;
+
+ color: #eee;
+ }
+
+ .ribbon .title {
+ font-weight: bold;
+ }
+
+ .footer {
+ bottom: 0;
+ }
+ .header {
+ top: 0;
+ }
+
+ .ribbon .right {
+ float: right;
+ margin-right: 30px;
+ }
+
+ .demo
+ {
+ position: fixed;
+ width: 100%;
+ opacity: 0.8;
+ }
View
39 demo2/index.html → demos/leds/index.html
@@ -9,8 +9,14 @@
<canvas class="demo"></canvas>
- <div class="footer">
- see the <a href="https://github.com/remcoder/Pxxl.js">Pxxl.js Github repo</a> for tha codez
+ <div class="ribbon header">
+ <span class="title">canvas demo</span>
+ <span class="right">see the <a href="https://github.com/remcoder/Pxxl.js">Pxxl.js Github repo</a> for tha codez</span>
+ </div>
+
+ <div class="ribbon footer">
+ <a href="https://realstuffforabstractpeople.com">realstuffforabstractpeople.com</a>
+
<span class="right">&copy; 2012 <a href="http://twitter.com/remcoder">@remcoder</a></span>
</div>
@@ -19,7 +25,7 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
- <script src="../build/pxxl-0.3.min.js" type="text/javascript"></script>
+ <script src="pxxl-0.3.min.js" type="text/javascript"></script>
<script type="text/javascript" id="code">
function rgba(r,g,b,a) { return "rgba("+ ~~r +","+ ~~g +","+ ~~b +"," + a +")"; }
@@ -27,20 +33,21 @@
255*Math.random(), 255*Math.random(),1) }
-
-pxxl("../fonts/c64.bdf", "leds are cool", function (pixels) {
+var text = "leds are cool";
+pxxl("../../fonts/c64.bdf", text , function (pixels) {
console.log("font loaded");
var canvas = document.querySelector("canvas");
- canvas.width = innerWidth;
-
var ctx = canvas.getContext('2d');
- var size = 10;
- canvas.height = size*8;
+ var size = 30;
+ var width = ~~(text.length * 8 * size * 1.2);
+ canvas.width = innerWidth;
+ canvas.height = innerHeight; //;
ctx.fillStyle = "red";
- var dx = 0;
+ var dx = innerWidth;
+ var dy = -40 +(innerHeight - size*8*1.4) /2;
setInterval(function() {
- ctx.fillStyle = "rgba(0,0,0,0.4)";
+ ctx.fillStyle = "rgba(0,0,0,0.7)";
ctx.fillRect(0,0,canvas.width, canvas.height);
ctx.fillStyle = "red";
for (var i=0 ; i<pixels.length ; i++)
@@ -49,20 +56,20 @@
var p = pixels[i];
var x = dx + p.x * size;
- x %= canvas.width;
- x += canvas.width;
- var y = p.y * size;
+ if (x < 0) x+= width;
+ var y = dy + p.y * size;
ctx.beginPath();
- ctx.arc(x, y, size/2, 0, Math.PI*2, true);
+ ctx.arc(x*1.2, y*1.4, size/2, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
dx-=size;
+ if (dx < -width) dx = 0;
}, 100);
});
</script>
<script>
- document.querySelector("pre").innerText = document.getElementById("code").innerText;
+ document.querySelector("pre").innerText = document.getElementById("code").innerText;
</script>
</body>
</html>
View
0  demo/pxxl-0.3.min.js → demos/leds/pxxl-0.3.min.js
File renamed without changes
Please sign in to comment.
Something went wrong with that request. Please try again.