Advertisement
mateon1

Pretty thing in Javascript

Apr 18th, 2015
248
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Try it, run in about:blank and paste in the console
  2.  
  3. document.body.appendChild(c=document.createElement("canvas"));
  4. c.width = 800;
  5. c.height = 800;
  6.  
  7. var ctx = c.getContext("2d");
  8. ctx.fillRect(0,0,800,800)
  9.  
  10. var ctr = 0;
  11.  
  12. function deg2rad(a) {
  13.   return (((a%360)+360)%360) / (180/Math.PI);
  14. }
  15.  
  16. var ps = [];
  17. var I = 0;
  18. function p(x,y,a) {
  19.   if ((I=(I+1)%3)==0)ps.push([x,y,a]);
  20.   for (var i = 0; i < ps.length; i++) {
  21.     var x = ps[i][0],
  22.         y = ps[i][1],
  23.         a = ps[i][2];
  24.     ctx.strokeStyle="hsl("+a+",50%,70%)";
  25.     ctx.beginPath();
  26.     ctx.moveTo(x,y);
  27.     x += Math.sin(deg2rad(a)) * 1.2;
  28.     y += Math.cos(deg2rad(a)) * 1.2;
  29.     ctx.lineTo(x,y);
  30.     ctx.stroke();
  31.     ps[i] = [x,y,a];
  32.   }
  33.   ps = ps.filter(function (p) {
  34.     return!(p[0] < -5 || p[0] > 805 || p[1] < -5 || p[1] > 805);
  35.   })
  36. }
  37.  
  38. ctx.lineWidth = 4;
  39. ctx.fillStyle = "#000";
  40. ctx.lineCap = "round";
  41.  
  42. function draw() {
  43.   ctr = (ctr + 4.4) % 360;
  44.   ctx.globalAlpha = 0.04;
  45.   ctx.fillRect(0,0,800,800);
  46.   ctx.globalAlpha = 1;
  47.   p(400,400,ctr);
  48. };
  49.  
  50. function frame() {
  51.   requestAnimationFrame(frame);
  52.   draw();
  53. }
  54. frame();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement