Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>Orbiting Planets</title>
- <style>
- body {
- margin: 0px;
- overflow: hidden;
- }
- </style>
- </head>
- <body>
- <canvas id="sky"></canvas>
- <script>
- // Get the canvas and set up some parameters.
- var canvas = document.getElementById("sky");
- var context = canvas.getContext("2d");
- var starCount = 200;
- var canvasWidth = window.innerWidth;
- var canvasHeight = window.innerHeight;
- // Set the canvas size.
- canvas.width = canvasWidth;
- canvas.height = canvasHeight;
- // Store star data
- storedStars = new Array();
- for (var i = 0; i < starCount; i++) {
- storedStars[i] = {radius: 0, x: 0, y:0, bluramount: 0};
- storedStars[i].radius = 1 + Math.random() * 2;
- storedStars[i].x = canvasWidth * Math.random();
- storedStars[i].y = canvasHeight * Math.random();
- storedStars[i].bluramount = 1 + Math.random() * 4 * storedStars[i].radius;
- }
- function drawBackground() {
- // Background.
- // We create a radial gradient from the bottom-left.
- var gradient = context.createRadialGradient(0, canvasHeight, 0, 0, canvasHeight, 1000);
- gradient.addColorStop(0, "#151530");
- gradient.addColorStop(1, "#252540");
- context.fillStyle = gradient;
- context.beginPath();
- context.arc(0, canvasHeight, canvasWidth*1.42, 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 = storedStars[i].radius;
- context.beginPath();
- context.arc(storedStars[i].x, storedStars[i].y, radius, 0, Math.PI * 2, true);
- context.shadowBlur = storedStars[i].bluramount;
- context.fill();
- }
- context.shadowBlur = 0;
- }
- function getFontHeight(name) {
- return (context.measureText(name).actualBoundingBoxAscent - context.measureText(name).actualBoundingBoxDescent);
- }
- function getFontWidth(name) {
- return context.measureText(name).width;
- }
- function drawCircle(x,y,radius,color,name) {
- context.fillStyle = "#000000";
- context.beginPath();
- context.arc(x,y,radius,0,Math.PI*2);
- context.fill();
- context.fillStyle = color;
- context.beginPath();
- context.arc(x,y,radius-8,0,Math.PI*2);
- context.fill();
- context.fillStyle = "#000000";
- var fontsize = 100;
- context.font = fontsize + "px sans-serif";
- while (getFontWidth(name) > 1.2*radius) {
- fontsize = fontsize - 1;
- context.font = fontsize + "px sans-serif";
- }
- context.fillText(name,x - getFontWidth(name)/2,y + getFontHeight(name)/2);
- }
- function orbitStar(distanceFromStar,radius,color,name,time) {
- if (name in savedPlanets) {
- context.putImageData(savedPlanets[name].imagedata,savedPlanets[name].x,savedPlanets[name].y);
- }
- planetx = canvasWidth/2 + distanceFromStar*Math.cos(time);
- planety = canvasHeight/2 + distanceFromStar*Math.sin(time);
- savedPlanets[name] = {imagedata: context.getImageData(planetx-radius-2,planety-radius-2,radius*2+4,radius*2+4), x: planetx-radius-2, y: planety-radius-2};
- drawCircle(planetx,planety,radius,color,name);
- }
- savedPlanets = new Array();
- drawBackground();
- drawCircle(canvasWidth/2,canvasHeight/2,100,"#FFFF00","Star");
- function step(time) {
- orbitStar(230,70,"#CC0000","Planet",time/1000);
- window.requestAnimationFrame(step);
- }
- window.requestAnimationFrame(step);
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
