「Frontend de KANPAI! #4 - ものづくりの遊びごころ -」( https://frokan.connpass.com/event/92028/ )での発表資料「JavaScriptとWebGLで取り組む
クリエイティブコーディング」です。 作例もあわせて御覧ください。 ■2Dのサンプル 
https://github.com/ics-creative/180725_two_waves ■3Dのサンプル 
https://github.com/ics-creative/180725_three_waves

1. JavaScript WebGL
ICS
2018 7 25 @ Frontend de KANPAI! #4 - -

2. (Yasunobu Ikeda)
ICS /
@clockmaker

3. HSL
: ICS MEDIA
ICS MEDIA - Web /
https://ics.media/

4. 2D
https://github.com/ics-creative/180725_two_waves
3D
https://github.com/ics-creative/180725_three_waves
URL

5. JS

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

7. ICS
CreateJS 2012 2016
PixiJS
WebGL
CreateJS PixiJS
2017
Three.js 3D 2015
Babylon.js Three.js Babylon.js 2018

8. ICS Babylon.js
CEDEC 2018
https://2018.cedec.cesa.or.jp/session/detail/s5abfa25af2045
8月22日(水)
16:30

9. 2D 3D

11. context.moveTo(0, stageH / 2);
context.lineTo(stageW, stageH / 2);
context.stroke();
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/line.html

12. [...Array(分割数).keys()].forEach(i => {
const x = i / (分割数 - 1) * stageW;
const ラジアン = i / 分割数 * Math.PI + 時間;
const y = 振幅 * Math.sin(ラジアン) + stageH / 2;
context.lineTo(x, y);
context.stroke();
});
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/line_sin.htmlKeynote

13. const y = 振幅 * Math.sin(ラジアン);

14. const 分割数 = 100; // 分割数
[...Array(分割数).keys()].forEach(i => {
//･･･
context.lineTo(x, y);
});
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/line_sin.htmlKeynote

15. npmJS JS
simplenoise - npm
https://www.npmjs.com/package/simplenoise

16. x
y
0.1
x+0.1
y
0.15
x+0.2
y
0.2
const value = noise.perlin2(x, y)

17. [...Array(分割数).keys()].forEach(i => {
const x = i / (分割数 - 1) * stageW;
const px = i / 50; // 横軸の⼊⼒値
const py = 時間; // 時間の⼊⼒値
const y = amplitude * noise.perlin2(px, py) + stageH / 2;
context.lineTo(x, y);
});
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/line_perline.htmlKeynote

18. [...Array(線数).keys()].forEach(j => {
[...Array(分割数).keys()].forEach(i => {
const x = i / (分割数 - 1) * stageW;
const px = i / (50 + j);
const py = j / 50 + time;
const y = 振幅 * noise.perlin2(px, py) + stageH / 2;
context.lineTo(x, y);
});
context.stroke();
});
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/line_perlines.htmlKeynote

19. HSL
CreateJS HSL - ICS MEDIA
https://ics.media/tutorial-createjs/color_hsl.html
const MAX = 20;
[...Array(MAX).keys()].forEach(i => {
// HSLカラーを算出
const hue = i * (360 / MAX);
const color = `hsl(${hue}, 100%, 50%)`;
// (省略)
})

20. [...Array(線数).keys()].forEach(j => {
const h = Math.round(j / lineNum * 360); // ⾊相
const s = 100; // 彩度
const l = Math.round(j / lineNum * 100); // 明度
context.strokeStyle = `hsl(${h}, ${s}%, ${l}%)`;
[...Array(分割数).keys()].forEach(i => {
// ･･･
});
context.stroke();
});
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/line_perlines_colorful.htmlKeynote

21. =
CG

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

27. (GC)
GC

28. particle = new Particle() particle.dispose()
particle = null
GC

29. particle = fromPool()
particle.reset()
toPool(particle)
GC

30. const objectPool = []; // オブジェクトプール
function toPool(particle) {
// 使⽤済み粒⼦はプールに移動
objectPool.unshift(particle);
}
function fromPool() {
if (objectPool.length === 0) {
// プールが空なら新規⽣成
return new Particle();
} else {
// プールにストックがあれば取り出す
return objectPool.pop();
}
}
▶ Play sample with new window
https://ics-creative.github.io/180725_two_waves/particle_4.htmlKeynote

31. Object Pool FAL Works
https://www.fal-works.com/creative-coding-posts/object-pool

32. - Qiita
https://qiita.com/bkzen/items/d84312246061778ee870

33. Math.random()

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

38. JavaScript - ICS MEDIA
https://ics.media/entry/11292

39. Three.js 3

40. Three.js 3

42. HSL

43. Adobe Sensei Photoshop XD - ICS MEDIA
https://ics.media/entry/16558

45. 2011 Flash 2015 CreateJS 2018 Three.js2009 Flash
Flash WebGL

46. Twitter
ICS
ikeda@ics-web.jp
@clockmaker
Copyright 2018 ICS INC. All rights reserved.