New Year tree

Readme
JavaScript 151 lines
HTML 1 lines
CSS 6 lines

NY tree in the breeze

New Year tree

// forked from clockmaker's "Tree in the breeze" http://jsdo.it/clockmaker/tree2d And yes - it was all posible because of clockmaker http://jsdo.it/clockmaker Merry Xmas and Happy NY

var FPS = 30;
var FRAMERATE = 1000 / 60 >> 0;

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var step = 0.0;
var toRadian = Math.PI / 180;

var MAX_NUM = 2500;

var mouseX = canvas.width/2;
var mouseY = canvas.height;
var first;
var old;

for(var i=0; i<MAX_NUM; i++) {
  var p = new Particle(
    Math.random() * 465,
    Math.random() * 465
  );
  
  if(first == null) {
    first = old = p;
  } else {
    old.next = p;
    old = p;
  }
}

setInterval(intervalHandler, FRAMERATE );
canvas.onmousemove = mouseMoveHandler;
function mouseMoveHandler(e) {
  var rect = e.target.getBoundingClientRect();

mouseX = e.clientX - rect.left;  
  mouseY = e.clientY - rect.top;  
}
function intervalHandler(){
  
  // context.fillStyle = "rgb(0, 0, 0)";
 // context.fillRect(0, 0, 465, 465);
 context.clearRect(0, 0, 465, 465);
  //context.fillStyle = "rgb(200, 200, 255)";
      creatTree(context, 232, 465, 90, 180, 5); 
    creatTree(context, 232, 465, 60, 120,4); 
    creatTree(context, 232, 465, 120, 150, 4);
  context.fillStyle = "rgb(200, 220, 255)";
  var gravityX = mouseX;
  var gravityY = mouseY;
  
  var n = first;
do {
    var diffX = gravityX - n.x;
    var diffY = gravityY - n.y;
    var acc = 50 / (diffX * diffX + diffY * diffY);
    var accX = acc * diffX;
    var accY = acc * diffY;
    
    n.vx += accX;
    n.vy += accY;
    n.x += n.vx;
    n.y += n.vy;
    
    n.vx *= 0.96;
    n.vy *= 0.96;
    
    if (n.x > 465)
      n.x = 0;
    else if (n.x < 0)
      n.x = 465;
    if (n.y > 465)
      n.y = 0;
    else if (n.y < 0)
      n.y = 465;
    
   
    context.fillRect(n.x, n.y, 1, 1);  
    }
  while (n = n.next);  
  //  context.clearRect(0, 0, 465, 465);
  
 
    step += (Math.PI / 80) % Math.PI;

}

New Year tree

NY tree in the breeze// forked from clockmaker's "Tree in the breeze" http://jsdo.it/clockmaker/tree2d And yes - it was all posible because of clockmaker http://jsdo.it/clockmaker Merry Xmas and Happy NY function Particle() { this.initialize.apply(this, arguments); } Particle.prototype = { initialize: function(x, y) { this.x = x; this.y = y; }, x : 0, y : 0, vx : 0, vy : 0, next : null }; var FPS = 30; var FRAMERATE = 1000 / 60 >> 0; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var step = 0.0; var toRadian = Math.PI / 180; var MAX_NUM = 2500; var mouseX = canvas.width/2; var mouseY = canvas.height; var first; var old; for(var i=0; i<MAX_NUM; i++) { var p = new Particle( Math.random() * 465, Math.random() * 465 ); if(first == null) { first = old = p; } else { old.next = p; old = p; } } setInterval(intervalHandler, FRAMERATE ); canvas.onmousemove = mouseMoveHandler; function mouseMoveHandler(e) { var rect = e.target.getBoundingClientRect(); mouseX = e.clientX - rect.left; mouseY = e.clientY - rect.top; } function intervalHandler(){ // context.fillStyle = "rgb(0, 0, 0)"; // context.fillRect(0, 0, 465, 465); context.clearRect(0, 0, 465, 465); //context.fillStyle = "rgb(200, 200, 255)"; creatTree(context, 232, 465, 90, 180, 5); creatTree(context, 232, 465, 60, 120,4); creatTree(context, 232, 465, 120, 150, 4); context.fillStyle = "rgb(200, 220, 255)"; var gravityX = mouseX; var gravityY = mouseY; var n = first; do { var diffX = gravityX - n.x; var diffY = gravityY - n.y; var acc = 50 / (diffX * diffX + diffY * diffY); var accX = acc * diffX; var accY = acc * diffY; n.vx += accX; n.vy += accY; n.x += n.vx; n.y += n.vy; n.vx *= 0.96; n.vy *= 0.96; if (n.x > 465) n.x = 0; else if (n.x < 0) n.x = 465; if (n.y > 465) n.y = 0; else if (n.y < 0) n.y = 465; context.fillRect(n.x, n.y, 1, 1); } while (n = n.next); // context.clearRect(0, 0, 465, 465); step += (Math.PI / 80) % Math.PI; } function creatTree(g, px, py, angle, len, n){ if (n > 0) { angle += 1 * Math.cos(step) - 2; var x1 = px + 0.1 * len * Math.cos(angle * toRadian); var y1 = py - 0.1 * len * Math.sin(angle * toRadian); var x2 = px + len * Math.cos(angle * toRadian); var y2 = py - len * Math.sin(angle * toRadian); drawLine(g, n - 1, px, py, x2, y2); var angleLeft = angle + 30; var angleRight = angle - 30; len = len * 2 / 3; creatTree(g, x2, y2, angle - 3 * Math.sin(step), len, n - 1); creatTree(g, x1, y1, angleLeft, len * 2 / 3, n - 1); creatTree(g, x1, y1, angleRight, len * 2 / 3, n - 1); creatTree(g, x2, y2, angleLeft, len * 2 / 3, n - 1); creatTree(g, x2, y2, angleRight, len * 2 / 3, n - 1); } } var img = new Image(); img.src = 'http://superior0.narod.ru/5050.png'; var img = new Image(); img.src = 'http://superior0.narod.ru/5050.png'; function drawLine(g, n, x1, y1, x2, y2){ /* g.beginPath(); g.lineWidth = n > 0 ? n : 1; g.strokeStyle = "rgb(0, 128, 32)"; g.moveTo(x1, y1); g.lineTo(x2, y2); g.stroke();*/ /// img.rotate( Math.PI / 180); g.drawImage(img,x2,y2,10,15); }<canvas id='myCanvas' width="465" height="465"></canvas>body { margin: 0; padding: 0; overflow: hidden; background: #000; }