PWA Night vol.44 ～クリエイティブコーディング〜 - connpass https://pwanight.connpass.com/event/262565/ で発表した「クリエイティブコーディングとは？」の資料です。 ※動画はツイートのURLを埋め込んでいますのでそちらで再生してください

1. @reona396

2. • @reona396 ( )
• 10
• web
(VR )

3. •
•
•
•

4. p5.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background("#ccc");
circle(200, 200, 300);
}

5. p5.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background("#ccc");
circle(200, 200, 300);
}

6. p5.js
// スケッチ全体の設定を書く関数
// 開始時に⼀度だけ実⾏される
function setup() {
// 400x400のサイズでキャンバスを作成
createCanvas(400, 400);
}
function draw() {
background("#ccc");
circle(200, 200, 300);
}

7. p5.js
function setup() {
createCanvas(400, 400);
}
// 描画にまつわる設定を書く関数
// 1秒間に60回実⾏される
function draw() {
// 背景⾊を#cccに設定
background("#ccc");
// 円を(200, 200)の位置に直径300pxで描画
circle(200, 200, 300);
}

8. p5.js
function setup() {
createCanvas(400, 400);
}
function draw() {
background("#ccc");
circle(200, 200, 300);
}

9. for
function setup() {
createCanvas(400, 400);
}
function draw() {
background("#ccc");
circle(40, 200, 40);
}

10. for
function setup() {
createCanvas(400, 400);
}
function draw() {
background("#ccc");
// 9個の円を並べる
for (let i = 0; i < 9; i++) {
circle(i * 40 + 40, 200, 40);
}
}

11. if
function setup() {
createCanvas(400, 400);
}
function draw() {
background("#ccc");
// 9個の円を並べ偶数奇数で⾊を変える
for (let i = 0; i < 9; i++) {
if(i % 2 == 0) {
fill("#AB39F5");
}
else {
fill("#F1CC4D");
}
circle(i * 40 + 40, 200, 40);
}
}

12. function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
noStroke();
}
function draw() {
background("#000");
// 360個の⼩さな円を
// サインとコサインを使って花の形に配置
for (let i = 0; i < 360; i++) {
if (i % 2 == 0) {
fill("#AB39F5");
}
else {
fill("#F1CC4D");
}
let r = 180 * sin(i * 4);
let x = r * cos(i) + 200;
let y = r * sin(i) + 200;
circle(x, y, 10);
}
}

13. 背景⾊は⿊。
⼩さな円を360個描く。
円の⾊は偶数番の時は紫、
奇数番の時は明るいオレンジ。
円の位置は下記の式にそって設定。
(iは円が何番⽬かのインデックス)
let r = 180 * sin(i * 4);
let x = r * cos(i) + 200;
let y = r * sin(i) + 200;

14. •
•
•

15. •
•
•

18. •
•
• fork

19. •
•
•

20. : SYM (@hyappy717)
: reona396
p5.js + Handsfree.js
https://twitter.com/reona396/status/1433351113978232833

21. •
•
•
• Web
•

22. •
•
•
• Web
•

23. Web +
• web +
•
•
• Kinect LeapMotion
•
• web

24. •
•
•

25. • 1
• 2
• 3
• 4
• 5, 6

26. • 1
• 2
• 3
• 4
• 5, 6

29. ( )
•
• ( )
• /

35. https://twitter.com/reona396/status/1278317931655380992

36. /
3 1

37. /

38. •
•

39. •
•

40. :
: NFT
NFT

41. NFT
•
( ) NFT
•
NFT
•
T

42. •
•
•
• Web +
•
• NFT