Kurze Scripte und Codeschnipsel ,explodierendecanvas uhr

explodierendecanvas-uhr.php

Quell Code

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
       
 <style>
 
canvas {
  height: 100%;
  left: 0;
  position:fixed;
  z-index:-1;
  top: 0;
  width: 100%;
   overflow:hidden;
}
 h1{
    margin-left:30%;
    font-size:40px;
    text-decoration:underline;
    color:white;
}
 h2{
    margin-left:36%;
    font-size:30px;
    text-decoration:underline;
    color:white;
    margin-bottom:0px;
}



canvas {
  background-image: radial-gradient(black, hsl(10,90%,15%));
  margin:0;
}
</style>
</head>

 <body>
<div id="seitenmenu1"></div>
<span id="tooltip_container"> </span>

<h1>Canvas Hintergrund </h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<canvas id="canvas"></canvas>




















<script>
var ctx;
var stage;
var stageWidth;
var stageHeight;
var particles = [];
var particleCount = 850;
var speed = 0.3;
var cull = 3;
var r = 0;

function init(){
  var canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  stage = new createjs.Stage(canvas);

  for(var i = 0; i < particleCount; i++){
    var color = "rgba("+_.random(64)+","+_.random(32,192)+",255,1)";
    var radius = Math.floor(Math.random()*10)/10 + 0.5;
    var x = 0;
    var y = 0;
    var vx = (1 - Math.random()*2);
    var vy = (1 - Math.random()*2);
    var vx2 = (1 - Math.random()*2)*0.1;
    var vy2 = (1 - Math.random()*2)*0.1;

    var particle = createParticle(color, radius, x, y, vx, vy, vx2, vy2);
    particles.push(particle);
    stage.addChild(particle);
  }

  resize();
  clock();
}

init();

function createParticle(color, radius, x, y, vx, vy, vx2, vy2){
  var particle = new createjs.Shape();
  particle.graphics.beginFill(color);
  particle.graphics.drawCircle(0,0,radius);
  particle.x = x;
  particle.y = y;
  particle.endX = x;
  particle.endY = y;
  particle.vx = vx;
  particle.vy = vy;
  particle.vx2 = vx2;
  particle.vy2 = vy2;

  return particle;
}

function clock(){
  var date = new Date();
  var h = (date.getHours() > 9) ? date.getHours() : "0"+date.getHours();
  var m = (date.getMinutes() > 9) ? date.getMinutes() : "0"+date.getMinutes();
  var s = (date.getSeconds() > 9) ? date.getSeconds() : "0"+date.getSeconds();
  var time = h + " " + m + " " + s;

  var text = new createjs.Text(time,"85px Arial","#fff");
  text.w = Math.floor(text.getMeasuredWidth());
  text.h = Math.floor(text.getMeasuredLineHeight());
  text.x = Math.floor(stageWidth/2 - text.w/2);
  text.y = Math.floor(stageHeight/2 - text.h/2);

  var rect = new createjs.Shape();
  rect.graphics.beginFill("#000");
  rect.graphics.drawRect(0,0,stageWidth,stageHeight);

  stage.compositeOperation = "default";

  stage.addChild(rect);
  stage.addChild(text);
  stage.update();

  var pixels = ctx.getImageData(text.x,text.y,text.w,text.h);

  stage.removeChild(rect);
  stage.removeChild(text);
  stage.update();

  stage.compositeOperation = "lighter";

  var i = 0;
  for(var w = 0; w < text.w; w += cull){
    for(var h = 0; h < text.h; h += cull){
      if(pixels.data[(w+text.w*h)*4] !== 0 && i < particles.length){
        var particle = particles[i];

        particle.endX = text.x+w;
        particle.endY = text.y+h;
        particle.vx = (1 - Math.random()*2);
        particle.vy = (1 - Math.random()*2);
        scale = _.random(1,40);
        particle.scaleX = scale;
        particle.scaleY = scale;
        
        i++;
      }
    }
  }

  for(var j = i; j < particles.length; j++){
    var particle = particles[j];

    if(j < r){
      particle.endX = _.random(stageWidth);
      particle.endY = _.random(stageHeight);
    }
    scale = _.random(1,5);
    particle.scaleX = scale;
    particle.scaleY = scale;
  }
  r = i;

  setTimeout(clock, 1000);
}

function tick(){
  for(var i = 0; i < particleCount; i++){
    var particle = particles[i];

    if(i < r){
      particle.endX += 1 * particle.vx/10;
      particle.endY += 1 * particle.vy/10;
      v = 1.05 + Math.random()/100;
      particle.vx *= v;
      particle.vy *= v;
    }else{
      particle.endX += particle.vx2;
      particle.endY += particle.vy2;
    }

    if(particle.x < 0){
      particle.x = stageWidth;
      particle.endX = stageWidth;
    }else if(particle.x > stageWidth){
      particle.x = 0;
      particle.endX = 0;
    }

    if(particle.y < 0){
      particle.y = stageHeight;
      particle.endY = stageHeight;
    }else if(particle.y > stageHeight){
      particle.y = 0;
      particle.endY = 0;
    }

    particle.x = particle.x + (particle.endX - particle.x)*speed;
    particle.y = particle.y + (particle.endY - particle.y)*speed;

    if(particle.scaleX > 1) particle.scaleX = particle.scaleX*0.85;
    if(particle.scaleY > 1) particle.scaleY = particle.scaleY*0.85;
  }

  stage.update();
}

function resize(){
  $("#canvas").attr("width", $(window).width());
  $("#canvas").attr("height", $(window).height());
  stageWidth = $(window).width();
  stageHeight = $(window).height();

  for(var i = 0; i < particleCount; i++){
    var particle = particles[i];

    particle.x = particle.endX = _.random(stageWidth);
    particle.y = particle.endY = _.random(stageHeight);
  }
}

$(window).resize(resize);

createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
</script>