JavaScriptを使用してコンチェッティ効果を作成する方法

Question

フレークが三角形（現在は正方形）でなければならないコンチェッティ効果（スクリーンショット付き）を作成します。私は次のJavaScriptコードを使用して効果を得ています。しかし、私はフレークがウェブページが開かれたときに上から下に落ち始めることを望みます。今は、ページを開く瞬間、そのページはフレークにあふれています。私は、画面を空白にして、フレークをゆっくりと下ろす方法を見ていました。誰もがこの効果を整理するために私を助けてくださいすることができます

window.onload = function() { 
 
    var canvas = document.getElementById("canvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    var W = window.innerWidth; 
 
    var H = window.innerHeight; 
 
    canvas.width = W; 
 
    canvas.height = H; 
 

 
    var mp = 1000; //max particles 
 
    var particles = []; 
 
    for (var i = 0; i < mp; i++) { 
 
    particles.push({ 
 
     x: Math.random() * W, //x-coordinate 
 
     y: Math.random() * H, //y-coordinate 
 
     r: Math.random() * 18 + 1, //radius 
 
     d: Math.random() * mp, //density 
 
     color: "rgba(" + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", 0.8)", 
 
     tilt: Math.floor(Math.random() * 5) - 5 
 
    }); 
 
    } 
 

 
    //Lets draw the flakes 
 
    function draw() { 
 
    ctx.clearRect(0, 0, W, H); 
 
    for (var i = 0; i < mp; i++) { 
 
     var p = particles[i]; 
 
     ctx.beginPath(); 
 
     ctx.lineWidth = p.r; 
 
     ctx.strokeStyle = p.color; // Green path 
 
     ctx.moveTo(p.x, p.y); 
 
     ctx.lineTo(p.x + p.tilt + p.r/2, p.y + p.tilt); 
 
     ctx.stroke(); // Draw it 
 
    } 
 

 
    update(); 
 
    } 
 

 
    var angle = 0; 
 

 
    function update() { 
 
    angle += 0.01; 
 
    for (var i = 0; i < mp; i++) { 
 
     var p = particles[i]; 
 
     p.y += Math.cos(angle + p.d) + 1 + p.r/2; 
 
     p.x += Math.sin(angle) * 2; 
 
     if (p.x > W + 5 || p.x < -5 || p.y > H) { 
 
     if (i % 3 > 0) //66.67% of the flakes 
 
     { 
 
      particles[i] = { 
 
      x: Math.random() * W, 
 
      y: -10, 
 
      r: p.r, 
 
      d: p.d, 
 
      color: p.color, 
 
      tilt: p.tilt 
 
      }; 
 
     } 
 
     } 
 
    } 
 
    } 
 
    setInterval(draw, 20); 
 
}

<canvas id="canvas"></canvas>

フィドルJS Fiddle link

最終目標：Image

Answer 1

三角形を作るために、あなたが描くしたいと思います太い線を描くのではなく、形を変えてください。

• 四角形が三角形
• に変更されているページは5つの三角形で始まり、その後、雪の結晶を追加するsetTimeoutを使用しています。次のコードは、あなたが欲しいものの両方を行うように更新され

  // Rectangle 
  ctx.strokeStyle = p.color; 
  ctx.moveTo(p.x, p.y); 
  ctx.lineTo(p.x + p.tilt + p.r/2, p.y + p.tilt); 
  ctx.stroke(); 
  
  // Triangle 
  ctx.fillStyle = p.color; 
  ctx.moveTo(p.x, p.y); 
  ctx.beginPath(); 
  ctx.moveTo(p.x, p.y); 
  ctx.lineTo(p.x + 10, p.y); 
  ctx.lineTo(p.x + 5, p.y + 10); 
  ctx.fill(); 
  

  10分の1秒ごとに。 （ループはまた、0雪片で開始するように除去することができ、または雪タイムアウトを変更することにより、より高速/より遅い添加することができる。）

フィドル：https://jsfiddle.net/72dun3fx/13/

window.onload = function() { 
 
    var canvas = document.getElementById("canvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    var W = window.innerWidth; 
 
    var H = window.innerHeight; 
 
    var particles = []; 
 
    var angle = 0; 
 
    canvas.width = W; 
 
    canvas.height = H; 
 

 
    // Add starting particles 
 
    for (var i = 0; i < 5; i++) { 
 
    addParticle(); 
 
    } 
 
    // Add a particle every tenth of a second 
 
    setInterval(addParticle, 100); 
 
    // Update the particles so they fall 
 
    setInterval(draw, 20); 
 

 
    // Add a single particle 
 
    function addParticle() { 
 
    if (particles.length > 1000) { 
 
     return false; 
 
    } 
 

 
    particles.push({ 
 
     x: Math.random() * W, //x-coordinate 
 
     y: Math.random() * H, //y-coordinate 
 
     r: Math.random() * 18 + 1, //radius 
 
     d: Math.random() * particles.length, //density 
 
     color: "rgba(" + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", 0.8)", 
 
     tilt: Math.floor(Math.random() * 5) - 5 
 
    }); 
 
    } 
 

 
    /* Draw the particles */ 
 
    function draw() { 
 
    ctx.clearRect(0, 0, W, H); 
 
    for (var i = 0; i < particles.length; i++) { 
 
     var p = particles[i]; 
 
     ctx.beginPath(); 
 
     ctx.lineWidth = p.r; 
 
     ctx.fillStyle = p.color; 
 
     ctx.moveTo(p.x, p.y); 
 
     ctx.beginPath(); 
 
     ctx.moveTo(p.x, p.y); 
 
     ctx.lineTo(p.x + 10, p.y); 
 
     ctx.lineTo(p.x + 5, p.y + 10); 
 
     ctx.fill(); 
 
    } 
 

 
    update(); 
 
    } 
 

 
    function update() { 
 
    angle += 0.01; 
 
    for (var i = 0; i < particles.length; i++) { 
 
     var p = particles[i]; 
 
     p.y += Math.cos(angle + p.d) + 1 + p.r/2; 
 
     p.x += Math.sin(angle) * 2; 
 
     if (p.x > W + 5 || p.x < -5 || p.y > H) { 
 
     if (i % 3 > 0) //66.67% of the flakes 
 
     { 
 
      particles[i] = { 
 
      x: Math.random() * W, 
 
      y: -10, 
 
      r: p.r, 
 
      d: p.d, 
 
      color: p.color, 
 
      tilt: p.tilt 
 
      }; 
 
     } 
 
     } 
 
    } 
 
    } 
 
};

<canvas id="canvas"></canvas>

Answer 2

I上記の答えを少し編集して、あなたの仕様に向かってそれをさらにtweekします。三角形がキャンバスの中央を通過できないようにYコンポーネントを編集しました。次に、三角形をキャンバスの上部から始めるようにしました。うまくいけば、これは役に立ちます。

編集：これはあなたが探していたものですか？
サイドノート：draw（）関数でMath.random（）* 7を追加しましたが、効果はクールだと思いますが、好きではない場合は、それを10に置き換えてください説明したように前に。

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var W = window.innerWidth; 
 
var H = window.innerHeight - 30; 
 
canvas.width = W; 
 
canvas.height = H; 
 

 
var particles = []; 
 
for (var i = 0; i < 100; i++) { 
 
    addParticle(); 
 
} 
 
setInterval(addParticle(), 10); 
 

 
/* Add a single particle */ 
 
function addParticle() { 
 
    if (particles.length > 1000) { 
 
    return false; 
 
    } 
 

 
    particles.push({ 
 
    x: Math.random() * W, //x-coordinate 
 
    y: H, //y-coordinate 
 
    r: Math.random() * 18 + 1, //radius 
 
    d: Math.random() * particles.length, //density 
 
    color: "rgba(" + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", 0.8)", 
 
    tilt: Math.floor(Math.random() * 5) - 5 
 
    }); 
 
} 
 

 
/* Draw the particles */ 
 
function draw() { 
 
    ctx.clearRect(0, 0, W, H); 
 
    for (var i = 0; i < particles.length; i++) { 
 
    var p = particles[i]; 
 
    ctx.beginPath(); 
 
    ctx.lineWidth = p.r; 
 
    ctx.fillStyle = p.color; 
 
    ctx.moveTo(p.x, p.y); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(p.x, p.y); 
 
    ctx.lineTo(p.x + 10, p.y); 
 
    ctx.lineTo(p.x + 5, p.y + (Math.random() * 7)); 
 
    ctx.fill(); 
 
    } 
 

 
    update(); 
 
} 
 

 
var angle = 0.02; 
 

 
function update() { 
 
    for (var i = 0; i < particles.length; i++) { 
 
    var p = particles[i]; 
 
    p.y += Math.cos(angle) + 1 + p.r/10; 
 
    p.x += Math.sin(angle) * 2; 
 
    if (p.x > W + 5 || p.x < -5 || p.y > H) { 
 
     if (i % 3 > 0) //66.67% of the flakes 
 
     { 
 
     particles[i] = { 
 
      x: Math.random() * W, 
 
      y: -10, 
 
      r: p.r, 
 
      d: p.d, 
 
      color: p.color, 
 
      tilt: p.tilt 
 
     }; 
 
     } 
 
    } 
 
    } 
 
} 
 
setInterval(draw, 20);

canvas { 
 
    z-index: 999; 
 
} 
 

 
.thankYouBanner { 
 
    position:absolute; 
 
    height:30px; 
 
    bottom:20%; 
 
    left:50%; 
 
    z-index: 1000; 
 
} 
 

 
.thankYouBanner h2 { 
 
    position:relative; 
 
    text-align:center; 
 
    width: 100%; 
 
    left: -50%; 
 
    color: #fff; 
 
    background-color: rgba(0,0,0,0.6); 
 
    box-shadow: 0 0 15px 10px #fff; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    border-radius: 10px; 
 
}

<canvas id="canvas"></canvas> 
 
<div class="thankYouBanner"> 
 
    <h2> 
 
    Thank You, John Doh 
 
    </h2> 
 
</div>