Download as PDF, PPTX
![[...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](https://image.slidesharecdn.com/180723creativecoding-180725100318/75/JavaScript-WebGL-12-2048.jpg)
![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](https://image.slidesharecdn.com/180723creativecoding-180725100318/75/JavaScript-WebGL-14-2048.jpg)
![[...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](https://image.slidesharecdn.com/180723creativecoding-180725100318/75/JavaScript-WebGL-17-2048.jpg)
![[...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](https://image.slidesharecdn.com/180723creativecoding-180725100318/75/JavaScript-WebGL-18-2048.jpg)
![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%)`;
// (省略)
})](https://image.slidesharecdn.com/180723creativecoding-180725100318/75/JavaScript-WebGL-19-2048.jpg)
![[...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](https://image.slidesharecdn.com/180723creativecoding-180725100318/75/JavaScript-WebGL-20-2048.jpg)
![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](https://image.slidesharecdn.com/180723creativecoding-180725100318/75/JavaScript-WebGL-30-2048.jpg)
Uploaded byYasunobu Ikeda
JavaScriptとWebGLで取り組む クリエイティブコーディング
The document discusses various coding techniques and tools for creating 2D and 3D visualizations using JavaScript, WebGL, and CreateJS, including examples and code snippets. It highlights different libraries like Three.js and Babylon.js, as well as particle animation techniques. Links to samples and additional resources provided enhance understanding and practical application of the discussed concepts.
JavaScriptとWebGLで取り組む クリエイティブコーディング
- 1. JavaScript WebGL ICS 20187 25 @ Frontend de KANPAI! #4 - -
- 2.
- 3. HSL : ICS MEDIA ICSMEDIA - Web / https://ics.media/
- 4.
- 5.
- 6. Canvas JavaScript CreateJS 2Dgskinner 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.
- 9.
- 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 => { constx = 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 => { constx = 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 => { consth = 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.
- 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, ･･･); constalpha = 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 - ICSMEDIA https://ics.media/tutorial-createjs/particle.html
- 27.
- 28. particle = newParticle() particle.dispose() particle = null GC
- 29.
- 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 FALWorks https://www.fal-works.com/creative-coding-posts/object-pool
- 32.
- 33.
- 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 - ICSMEDIA https://ics.media/entry/11292
- 39.
- 40.
- 42.
- 43. Adobe Sensei PhotoshopXD - ICS MEDIA https://ics.media/entry/16558
- 45. 2011 Flash 2015CreateJS 2018 Three.js2009 Flash Flash WebGL
- 46. Twitter ICS ikeda@ics-web.jp @clockmaker Copyright 2018 ICSINC. All rights reserved.