lazy animated demo. Should fix parent issue benpryke#3

SignpostMarv · Sep 9, 2013 · a8f7aa3 · a8f7aa3
1 parent 86d96a6
commit a8f7aa3
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 0 deletions.
diff --git a/demos/stars/stars-animated.html b/demos/stars/stars-animated.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+
+<!--
+    This file is part of a demo for the Cloudgen.js JavaScript library.
+    
+    https://github.com/Ninjakannon/Cloudgen.js
+    
+    Copyright 2012 Benjamin Pryke
+    Released under the MIT license
+    https://github.com/Ninjakannon/Cloudgen.js/blob/master/LICENSE.txt
+-->
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>Cloudgen.js Demo: Stars</title>
+    <script type="text/javascript" src="../../cloudgen-min.js"></script>
+</head>
+
+<body>
+    <canvas id="sky"></canvas>
+    <script type="text/javascript" src="stars-animated.js"></script>
+</body>
+</html>
diff --git a/demos/stars/stars-animated.js b/demos/stars/stars-animated.js
@@ -0,0 +1,94 @@
+/*
+    This file is part of a demo for the Cloudgen.js JavaScript library.
+    
+    https://github.com/Ninjakannon/Cloudgen.js
+    
+    Copyright 2012 Benjamin Pryke
+    Released under the MIT license
+    https://github.com/Ninjakannon/Cloudgen.js/blob/master/LICENSE.txt
+*/
+
+// Get the canvas and set up some parameters.
+var canvas = document.getElementById("sky");
+var context = canvas.getContext("2d");
+var starCount = 100;
+var canvasWidth = 800;
+var canvasHeight = 600;
+var reqAnim = requestAnimationFrame ? requestAnimationFrame : function(func){ setTimeout(func, 1000 / 30); };
+
+// Set the canvas size.
+canvas.width = canvasWidth;
+canvas.height = canvasHeight;
+
+function render(){
+// Background.
+// We create a radial gradient from the bottom-left.
+var gradient = context.createRadialGradient(0, canvasHeight, 0, 0, canvasHeight, 1000);
+gradient.addColorStop(0, "#344599");
+gradient.addColorStop(1, "#151530");
+
+context.fillStyle = gradient;
+context.beginPath();
+context.arc(0, canvasHeight, 1000, 0, Math.PI * 2, true);
+context.fill();
+
+
+// Stars.
+// We randomly place a number of stars using shadows as a highlight.
+context.fillStyle = "#dadffa";
+context.shadowOffsetX = 0;
+context.shadowOffsetY = 0;
+context.shadowColor = "#a3ade6";
+
+for (var i = 0; i < starCount; i++) {
+    var radius = 1 + Math.random() * 2;
+
+    context.beginPath();
+    context.arc(canvasWidth * Math.random(), canvasHeight * Math.random(), radius, 0, Math.PI * 2, true);
+    context.shadowBlur = 1 + Math.random() * 4 * radius;
+    context.fill();
+}
+
+
+// Clouds.
+// We create clouds using lots of circles filled with gradients. No shadows
+// are used, these were slower and harder to use. The context "globalAlpha"
+// property is useful for changing the transparency of the clouds.
+
+// Cloudgen.js cloud formation.
+var cloudGrid = [[0, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
+                 [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                 [1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1],
+                 [1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0],
+                 [1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+                 [0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1],
+                 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
+                 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
+                 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0]];
+
+$cloudgen.drawCloudGroup(context, cloudGrid, 50, 60, 19, {r:255, g:255, b:255}, 0.2, 30);
+
+// Left-hand green cloud.
+cloudGrid = [[0, 1, 0, 0],
+             [1, 1, 1, 0],
+             [1, 1, 0, 1],
+             [0, 0, 0, 1]];
+
+$cloudgen.drawCloudGroup(context, cloudGrid, 50, 300, 100, {r:100, g:255, b:0});
+
+// Middle red cloud.
+cloudGrid = [[1, 0, 1, 1],
+             [0, 1, 1, 0]];
+
+$cloudgen.drawCloudGroup(context, cloudGrid, 300, 350, 100, {r:255, g:0, b:0});
+
+// Right-hand light blue cloud.
+cloudGrid = [[0, 0, 1, 1],
+             [1, 1, 1, 1]];
+
+$cloudgen.drawCloudGroup(context, cloudGrid, 600, 350, 100, {r:180, g:200, b:255});
+
+reqAnim(render);
+}
+
+render();