6. Canvas JavaScript
CreateJS 2D gskinner
Context2D
Adobe Animate CC
PixiJS 2D GoodBoyDigital
Flash
WebGL
WebGL
Three.js 3D mr.doob WebGL
BabylonJS 3D Microsoft 3D Unity
22. particle.vy -= 1; // 重⼒
particle.vy *= 0.92; // 摩擦
particle.y += particle.vy; // 速度を座標へ
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/particle_0.htmlKeynote
23. // パーティクルのサイズを寿命に⽐例にする
const scale = particle.life / MAX_LIFE;
particle.scale = scale;
particle.life -= 1; // 寿命を減らす
if (particle.life <= 0) { // 寿命の判定
// 削除
}
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/particle_1.htmlKeynote
24. function tick() {
requestAnimationFrame(tick);
// パーティクルを発⽣
emitParticles();
// ・・・
}
// パーティクルを発⽣させます
function emitParticles() {
// パーティクルの⽣成
for (let i = 0; i < 1; i++) {
const particle = new Particle();
particles.push(particle);
}
}
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/particle_3.htmlKeynote
25. context.beginPath();
context.arc(particle.x, particle.y, ・・・);
const alpha = Math.random() * 0.2 + 0.8;
switch (particle.type) {
case '0':
context.fillStyle = `hsla(0, 0%, 50%, ${alpha})`;
context.fill();
break;
case '1':
context.strokeStyle = `hsla(0, 0%, 50%, ${alpha})`;
context.lineWidth = 5;
context.stroke();
break;
}
context.closePath();
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/particle_3.htmlKeynote
26. CreateJS - ICS MEDIA
https://ics.media/tutorial-createjs/particle.html
34. :
const x = Math.random();
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/particle_random.htmlKeynote
35. :
const x = (Math.random() + Math.random()) / 2;
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/particle_random.htmlKeynote
36. :
const valueA = (Math.random() + Math.random()) / 2;
const valueB = (Math.random() + Math.random()) / 2;
const x = (valueA + valueB) / 2;
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/particle_random.htmlKeynote
37. :
const base = Math.random() * Math.random() * Math.random();
const inverse = 1.0 - base;
const x = Math.random() < 0.5 ? base : inverse;
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/particle_random.htmlKeynote