Generative Design with p5.js Workshop

2018/07/06に蔦屋家電で開催された、書籍『Generative Design with p5.js』の発売記念ワークショップの資料です。

ジェネラティブデザインとは何か？どのように習得していけばよいのか？

そのプロセスや考えかたについて、本書からテーマをいくつかピックアップして、実際に手を動かしながら体験してもらいます。プログラミング未経験の人でも、ジェネラティブデザインに触れて、変えて、楽しめる内容を目指しました。

https://cocopon.me/blog/2018/07/generative-design-p5js-workshop/

Transcript

1. Generative Design with p5.js ϫʔΫγϣοϓ!௱԰Ոి 2018.07.06 Hiroki Kokubun (@cocopon) 1
2. ຊ೔ͷࢿྉ͸ͪ͜Β https://goo.gl/NnKvyM 2
3. ͸͡Ίʹ INTRODUCTION 3
4. ߨࢣ঺հ ࠃ෼
   ޺थʢ͘͜ͿΜ
   ͻΖ͖ʣ େखϝʔΧʔۈ຿Λܦͯɺݱࡏ͸ओʹݸਓͰ׆ಈதɻ8FCJ04ͳͲ ͷϑϩϯτΤϯυΛओମʹɺ6*σβΠϯ͔Β։ൃશൠ·Ͱख͕͚Δɻ
   ϓϥΠϕʔτʹ͓͍ͯ΋ɺυοτֆͷలࣔ΍δΣωϥςΟϒΞʔτͷ ੍࡞ͳͲɺ෯޿͍ྖҬͰ׆ಈ͍ͯ͠Δɻ 4
5. ࡞඼঺հ Llumino PWA https://llumino.app 5
6. ࡞඼঺հ ͢͠ͽ͜ http://sushipi.co 6
7. δΣωϥςΟϒσβΠϯͱ͸ ίϯϐϡʔλʔϓϩάϥϜʹೖྗͱنଇΛ༩͑Δ͜ͱͰɺ

   ը૾΍ΞχϝʔγϣϯͳͲΛੜΈͩ͢ख๏ͷ͜ͱ 7
8. ݪయʰ(FOFSBUJWF
   %FTJHOʱ ίϯϐϡʔλʔΞʔτͷڭຊͱͯ͠ɺւ֎Ͱ޿͘਌͠·Ε͖ͯͨ ʰ(FOFSBUJWF
   (FTUBMUVOHʱͷ೔ຊޠ൛ɻ
   
   
   ϓϩάϥϛϯά؀ڥʮ1SPDFTTJOHʯΛ༻͍ͯɺੜ੒త૑ൃతͳ
 ϏδϡΞϧΛ࡞Γग़͢ํ๏Λ·ͱΊͨҰ࡭ɻඒ͍͠࡞ྫͱ๛෋ͳ
 αϯϓϧɺஸೡͳղઆʹΑͬͯɺϓϩάϥϚʔҎ֎ʹ΋৽ͨͳ
 σβΠϯମݧ΁ͷಓےΛఏڙ͢Δɻ
   8
9. ௨শʮಷثʯ 9
10. (FOFSBUJWF
    %FTJHO
    XJUI
    QKT ʰ(FOFSBUJWF
    %FTJHOʱͷجૅύʔτʮ#BTJD
    1SJODJQMFTʯͷΈΛ ൈ͖ग़͠ɺQKTʹରԠͨ͠࠶ฤू൛ɻ
    
 ר಄ͷ࡞඼ࣄྫΛҰ৽ɺղઆ͢Δ࡞ྫ΋Ұ෦มߋɾ௥Ճ͞Εͨɻ 10
11. 1SPDFTTJOHͱQKT +BWB +BWB4DSJQU 11 1SPDFTTJOH QKT ϓϩάϥϛϯάݴޠ ಈ࡞؀ڥ ಈ࡞଎౓ ओʹ1$ 8FCϒϥ΢β ී௨ ΍΍஗͍
12. 1SPDFTTJOHͱQKT +BWB +BWB4DSJQU 12 1SPDFTTJOH QKT ϓϩάϥϛϯάݴޠ ಈ࡞؀ڥ ಈ࡞଎౓ ओʹ1$ 8FCϒϥ΢β ී௨ ΍΍஗͍
13. QKTΛબ୒͢Δཧ༝ 13 8FCαΠτͷ੍࡞ʹͦͷ··׆͔ͤΔ ϞόΠϧ୺຤্Ͱ΋ಈ࡞͢Δ +BWB4DSJQUͷࢿ࢈͕׆༻Ͱ͖Δ
14. ϫʔΫγϣοϓͷ४උ SETUP 14
15. QKTͰεέονΛॻ͘ํ๏ ϩʔΧϧ؀ڥΛ੔͑Δ
    (PPHMF
    $ISPNF
    
    "UPN
    ͳͲ ΦϯϥΠϯαʔϏεΛར༻͢Δ
    FEJUPSQKTPSH
    ͳͲ 15
16. QKTͰεέονΛॻ͘ํ๏ ϩʔΧϧ؀ڥΛ੔͑Δ
    (PPHMF
    $ISPNF
    
    "UPN
    ͳͲ ΦϯϥΠϯαʔϏεΛར༻͢Δ
    FEJUPSQKTPSH
    ͳͲ 16
17. ຊ೔ͷ໨ඪ ʮδΣωϥςΟϒσβΠϯ͓ͬͯ΋͠Ζ͍ʯ
 ʮࣗ෼ʹ΋Ͱ͖ͦ͏ʂʯͱײͯ͡΋Β͏ ຊॻΛ׆༻ͨ͠දݱͷ޿͔͛ͨΛ
 ମݧͯ͠΋Β͏ 17 1 2
18. ϫʔΫγϣοϓͷߏ੒ ΢ΥʔϛϯάΞοϓ ςʔϚʮ৭ʯ ςʔϚʮάϦουʯ 18 40 ෼ 40 ෼ 10 ෼ ➞ ➞
19. ΢ΥʔϛϯάΞοϓ 0.WARM-UP 19
20. ΦϯϥΠϯΤσΟλΛ։͍ͯΈΑ͏ editor.p5js.org 20
21. ΦϯϥΠϯΤσΟλͷઆ໌ ίʔυ ϓϨϏϡʔ ϓϩδΣ Ϋτ 21
22. εέονͷجຊߏ଄ function setup() { createCanvas(400, 400); ... } function draw() { } setupϒϩοΫ͸͸͡Ίʹ౓͚࣮ͩߦ͞ΕΔ
    ΩϟϯόεαΠζͷઃఆ΍ม਺ͷॳظԽͳͲͷ ॲཧ͸͜͜ʹॻ͘ drawϒϩοΫ͸ඵؒʹճ΄Ͳɺ܁Γฦ͠
 ࣮ߦ͞ΕΔ
    ਤܗ΍ը૾ͳͲͷඳըॲཧ͸جຊతʹ͜͜ʹ
 ॻ͘ 22
23. QKTͷجຊɿΩϟϯόεͱ࠲ඪܥ 23 ࠨ্͕ݪ఺ɾӈԼํ޲ʹ࠲ඪ͕૿͍͑ͯ͘
24. QKTͷجຊɿਤܗͷඳը 24 function draw() { background(0, 100, 255); rect(50, 50, 200, 250); ellipse(250, 300, 200, 150); line(0, 0, 400, 400); } background ( ੺ , ྘ , ੨ ); ࢦఆͨ͠৭ͰΩϟϯόεશମΛృΓͭͿ͢ ͦΕͧΕ 0 ~ 255 ͷൣғͰࢦఆ͢Δ rect ( X࠲ඪ , Y࠲ඪ , ෯ , ߴ͞ ); ࢛֯ܗΛඳ͘ ellipse ( X࠲ඪ , Y࠲ඪ , ෯ , ߴ͞ ); ପԁΛඳ͘ line ( X࠲ඪ1 , Y࠲ඪ1 , X࠲ඪ2 , Y࠲ඪ2 ); ઢΛඳ͘
25. QKTͷجຊɿృΓɾઢͷ৭ 25 function draw() { ... fill(0, 200, 0); stroke(0, 0, 0); // ࢦఆͨ͠৭ͰਤܗΛඳ͘ rect(50, 100, 150, 200); } fill ( ੺ , ྘ , ੨ , ෆಁ໌౓ ); ృΓͷ৭Λઃఆ͢Δ ͦΕͧΕ 0 ~ 255 ͷൣғͰࢦఆ͢Δ ෆಁ໌౓͸লུͰ͖Δ stroke ( ੺ , ྘ , ੨ , ෆಁ໌౓ ); ઢͷ৭Λઃఆ͢Δ ͦΕͧΕ 0 ~ 255 ͷൣғͰઃఆ͢Δ ෆಁ໌౓͸লུͰ͖Δ
26. QKTͷجຊɿಁ໌ͱઢͷଠ͞ 26 // ృΓ৭Λઃఆ fill(0, 200, 0); // ࿮ઢ͸ͳ͠ noStroke(); ellipse(200, 200, 200, 200); // ృΓ͸ͳ͠ noFill(); // ࿮ઢͷଠ͞Λઃఆ strokeWeight(5); stroke(0, 200, 0); ellipse(200, 200, 200, 200);
27. ৭ͷઃఆͷॱং 27 fill()
    ΍
    stroke()
    Ͱ
    ֆචΛ͔࣋ͬͯΒʜ ਤܗΛඳ͘ ➞ 1 2
28. ࠲ඪ΍৭Λม࣮͑ͯߦͯ͠ΈͯɺQKTʹ׳ΕΑ͏ 28
29. ࡞ۀ࣌ؒ
    5
    ෼ 29
30. ؆୯ͳϚ΢εͷΠϯλϥΫγϣϯ 30 function draw() { ... if (mouseIsPressed) { line(0, 0, mouseX, mouseY); } ... } mouseIsPressed Ϛ΢εͷϘλϯ͕ԡ͞Ε͍ͯΔͱ͖ true ʹͳΔ mouseX, mouseY ͦΕͧΕɺϚ΢εΧʔιϧͷX/Y࠲ඪ
31. Ϛ΢εͷΠϯλϥΫγϣϯʹ׳ΕΑ͏ 31
32. ࡞ۀ࣌ؒ
    5
    ෼ 32
33. ؆୯ͳϚ΢εͷΠϯλϥΫγϣϯͷվ଄ྫ 33 function draw() { ... let sz; // ਤܗͷαΠζ if (mouseIsPressed) { sz = 100; // Ϙλϯ͕ԡ͞Ε͍ͯΔͱ͖͸େ͖Ί } else { sz = 50; // ԡ͞Ε͍ͯͳ͍ͱ͖͸খ͞Ί } // ઃఆͨ͠αΠζͰԁΛඳ͘ ellipse(0, 0, sz, sz); }
34. ςʔϚʮ৭ʯ 1.COLORS 34
35. ʮ৭ʯͷ࡞ྫ ➞ P_1_2_3_03 ➞ P_1_2_3_04 35
36. σδλϧͷੈքʹ͓͚Δʮ৭ʯ 3(#ʢ੺ɺ྘ɺ੨ʣ )4#ʢ৭૬ɺ࠼౓ɺ໌౓ʣ ͭͷ࣠Λ΋ͭ৘ใͰɺҰൠతʹ͸ͦΕͧΕஈ֊ɺ
 ৭º৭º৭㲈ສ৭Ͱදݱ͢Δɻ
    
    ࣠ͷऔΓ͔ͨ͸͞·͟· ʜʜ 36
37. ෮शɿQKTʹ͓͚Δ৭ͷදݱ 37 function draw() { ... fill(0, 200, 0); stroke(0, 0, 0); // ࢦఆͨ͠৭ͰਤܗΛඳ͘ rect(50, 100, 150, 200); } fill ( ੺ , ྘ , ੨ , ෆಁ໌౓ ); ృΓͷ৭Λઃఆ͢Δ ͦΕͧΕ 0 ~ 255 ͷൣғͰࢦఆ͢Δ ෆಁ໌౓͸লུͰ͖Δ stroke ( ੺ , ྘ , ੨ , ෆಁ໌౓ ); ઢͷ৭Λઃఆ͢Δ ͦΕͧΕ 0 ~ 255 ͷൣғͰઃఆ͢Δ ෆಁ໌౓͸লུͰ͖Δ
38. ຊ೔࢖༻͢ΔεέονͷҰཡ editor.p5js.org/gdp5ws/sketches 38
39. ςʔϚͷ͓୊ɿʮηϧͷෑ͖٧Ίʯ ϥϯμϜͳ෯ͷηϧΛෑ͖٧ΊΔεέονΛ୊ࡐʹɺ
    ண৭ʹ͍࣮ͭͯݧ͍ͯ͜͠͏ 39 function draw() { // ˒ృΓͷ৭Λઃఆ let r = random(0, 255); let g = random(0, 255); let b = random(0, 255); fill(r, g, b); ... } ! palette
40. SBOEPN ؔ਺ 40 function draw() { // ˒ృΓͷ৭Λઃఆ let r = random(0, 255); let g = random(0, 255); let b = random(0, 255); fill(r, g, b); ... } random ( ࠷খ஋ , ࠷େ஋ ) ࢦఆͨ͠ൣғͰϥϯμϜͳ਺஋ʢখ਺ʣΛ
 ൃੜ͢Δ
41. ࡞ۀ࣌ؒ
    20
    ෼ 41
42. ൃ૝ͷλωᶃɿݪ৭ಉ࢜Ͱ੍໿Λઃ͚ͯΈΔ 42 // ˒ృΓͷ৭Λઃఆ // ྘Λ׬શϥϯμϜʹઃఆ let g = random(0, 255); // ੨΋ϥϯμϜ͕ͩɺ྘ΑΓେ͖͘ͳΒͳ͍ let b = random(0, g); // ੺΋ϥϯμϜ͕ͩɺ੨ΑΓେ͖͘ͳΒͳ͍ let r = random(0, b); fill(r, g, b); ྘Λݩʹ੨Λɺ੨Λݩʹ੺Λɺʜͱ͍ͬͨΑ͏ʹ
    ݪ৭ಉ࢜Ͱ੍໿Λઃ͚ͯΈΔͱɺશମʹௐ࿨͕ੜ·ΕΔ ! palette-idea-1
43. ൃ૝ͷλωᶄɿ·ͬͨ͘ҟͳΔ৘ใΛར༻͢Δ 43 ྫ͑͹ηϧͷ:࠲ඪͳͲɺ·ͬͨ͘ҟͳΔ৘ใΛ
    ར༻ͯ͠৭Λܭࢉ͢Δ͜ͱ΋Ͱ͖Δ // ˒ృΓͷ৭Λઃఆ // ηϧͷY࠲ඪΛ৭ʹ൓ө͢Δ let br = random(y / 2, y); fill(br, br, br); ! palette-idea-2
44. ൃ૝ͷλωᶅɿಁաͯ͠ॏͶͯΈΔ 44 // ృΓͷ৭Λઃఆ fill(r, g, b, 50); // ˒൒ಁ໌ʹ͢Δ ... // ηϧΛඳը // ˒ߴ͞Λ૿΍ͯ࣍͠ͷߦͱͷॏͳΓΛੜΈग़͢ rect(x, y, w, w); ൒ಁ໌ͷਤܗΛॏͶΔ͜ͱͰɺݸʑͷྠֲ͕ফ͑ͯෳࡶͳ৭߹͍͕ੜ·ΕΔ ! palette-idea-3
45. ൃ૝ͷλωᶆɿը૾͔Β৭ΛआΓΔ 45 ը૾͸׬੒͞Εͨ৭߹͍ͷๅݿ
    ը૾ͷ৭Λഈआ͢Δ͚ͩͰɺௐ࿨ͨ͠৭߹͍͕ੜΈग़ͤΔ ➞ ΰοϗʮ੕݄໷ʯ
46. ൃ૝ͷλωᶆɿը૾͔Β৭ΛआΓΔ 46 // ˒ඞཁͳσʔλΛಡΈࠐΉϒϩοΫ // ʢը૾ͳͲͷϩʔυʹར༻͢Δʣ function preload() { img = loadImage('night.jpg'); } ... // ˒ରԠ͢Δ৔ॴͷը૾ͷ৭Λऔಘͯ͠ɺృΓ৭ʹઃఆ fill(img.get(x, y)); ը૾͸׬੒͞Εͨ৭߹͍ͷๅݿ
    ը૾ͷ৭Λഈआ͢Δ͚ͩͰɺௐ࿨ͨ͠৭߹͍͕ੜΈग़ͤΔ ! palette-idea-4
47. ࣗ෼Ͱը૾Λ௥Ճ͢Δʹ͸ 47 ʮ"EE
    pMFʯΛΫϦοΫ ಡΈࠐΈ͍ͨը૾Λυϩοϓ ➞
48. ࡞ۀ࣌ؒ
    20
    ෼ 48
49. ςʔϚʮάϦουʯ 2.GRID 49
50. ʮάϦουʯͷ࡞ྫ ➞ P_2_1_1_01 50 ➞ P_4_3_1_02
51. ςʔϚͷ͓୊ɿʮάϦουʯ 51 for (let y = 0; y <= height; y += 40) { for (let x = 0; x <= width; x += 40) { // άϦουͷηϧΛඳը ellipse( x, y, 10, 10 ); } } ॏͷGPSจͰ9:ํ޲ͷ࠲ඪΛࢦఆ͢Δ͜ͱͰɺ
    ηϧΛ౳ִؒʹฒ΂Δ͜ͱ͕Ͱ͖Δ ! grid
52. Ξχϝʔγϣϯͤͯ͞ΈΑ͏ 52 ηϧͷαΠζΛϥϯμϜʹ͢Δ͜ͱͰɺ
    ؆୯ͳΞχϝʔγϣϯΛ࡞ͬͯΈΑ͏ // ˒ηϧͷαΠζΛϥϯμϜʹ͢Δ let sz = random(0, 8); // ˒άϦουͷηϧΛඳը ellipse( x, y, sz, sz ); ! grid-animation
53. ૊Έ߹ΘͤΔɺͱ͍͏දݱͷ޿͔͛ͨ INTERACTION GRID COLOR IMAGE ͻͱͭͻͱͭ͸୯७Ͱ΋ɺ૊Έ߹ΘͤΔͱෳࡶͳ݁ՌΛੜΈग़͢͜ͱ͕Ͱ͖Δ ʴ 53
54. ͋͞ɺ૊Έ߹ΘͤͯΈΑ͏ 54
55. // ˒ృΓͷ৭Λઃఆ // ྘Λ׬શϥϯμϜʹઃఆ let g = random(0, 255); // ੨΋ϥϯμϜ͕ͩɺ྘ΑΓେ͖͘ͳΒͳ͍ let b = random(0, g); // ੺΋ϥϯμϜ͕ͩɺ੨ΑΓେ͖͘ͳΒͳ͍ let r = random(0, b); fill(r, g, b); άϦου +COLOR 55 ςʔϚͰੜ੒ͨ͠৭ΛɺάϦουͷηϧʹద༻ͯ͠ΈΔ ! grid-color
56. άϦου +INTERACTION 56 ֤ηϧͱΧʔιϧͱͷڑ཭Λܭࢉͯ͠αΠζʹ൓ө͢Δͱɺ
    Ϣʔβʔͱͷ૬ޓ࡞༻͕ੜ·ΕΔ // ˒ΧʔιϧҐஔͱͷڑ཭Λܭࢉ let d = dist(x, y, mouseX, mouseY); // ˒ΧʔιϧҐஔͱͷڑ཭ΛαΠζʹ൓ө let sz = d * 0.3; // ˒άϦουͷηϧΛඳը ellipse(x, y, sz, sz); ! grid-interaction-1
57. ηϧͷछྨΛม͑Δ͚ͩͰɺ·ͬͨ͘ผͷදݱʹ 57 ! grid-interaction-1 ! grid-interaction-2 ! grid-interaction-3
58. ࡞ۀ࣌ؒ
    20
    ෼ 58
59. άϦου +COLOR 59 +INTERACTION // ˒ΧʔιϧҐஔͱͷڑ཭Λܭࢉ let d = dist(x, y, mouseX, mouseY); // ˒ڑ཭Λઢͷ֯౓ʹ൓ө let dx = cos(d * 0.02) * 20; let dy = sin(d * 0.02) * 20; // ܭࢉޙͷڑ཭Λ৭ʹ΋൓ө fill(d, dx * 10, dy * 10); ֤ηϧͱΧʔιϧͱͷڑ཭Λɺ৭ʹ൓ө͢Δͷ΋͓΋͠Ζ͍ ! grid-interaction-color
60. άϦου 60 +IMAGE ֤ηϧͷ৭Λը૾͔Βऔಘ͢Ε͹ɺҰຯҧͬͨը૾ͷදݱʹ // ˒ඞཁͳσʔλΛಡΈࠐΉϒϩοΫ // ʢը૾ͳͲͷϩʔυʹར༻͢Δʣ function preload() { img = loadImage('night.jpg'); } ... // ˒ରԠ͢Δ৔ॴͷը૾ͷ৭Λऔಘͯ͠ɺృΓ৭ʹઃఆ fill(img.get(x, y)); // άϦουͷηϧΛඳը ellipse(x, y, 4, 4); ˞ຖճ৭Λऔಘ͢ΔͱύϑΥʔϚϯε͕མͪΔ ͷͰɺΩϟογϡ͢Δͷ͕Α͍ ! grid-image ! grid-image-cached
61. ൃ૝ͷλωɿ໌౓ΛηϧͷαΠζʹ൓ө͢Δ 61 // ˒ը૾ͷ໌Δ͞ΛηϧͷαΠζʹ൓ө͢Δ let sz = brightness(col) * 0.1; // ˒ϥϯμϜͳ਺஋Λֻ͚ͯॠ͔ͤΔ sz = sz * random(0.5, 1); // ˒άϦουͷηϧΛඳը ellipse(x, y, sz, sz); ৭ͷ৘ใʢ৭૬ɺ࠼౓ɺ໌౓ʣΛɺ·ͬͨ͘ผͷ৘ใ
    ʢ͜ͷྫͰ͸ηϧͷαΠζʣʹ൓ө͢Δͷ΋͓΋͠Ζ͍ ! grid-image-idea-1
62. ࢀߟɿ৭৘ใͷऔಘ 62 // ը૾ͷ৭Λऔಘ͢Δ let col = img.get(x, y); // ৭૬ʢ0 ~ 360ʣ let h = hue(col); // ࠼౓ʢ0 ~ 100ʣ let s = saturation(col); // ໌౓ʢ0 ~ 100ʣ let b = brightness(col);
63. ࡞ۀ࣌ؒ
    20
    ෼ 63
64. ͓ΘΓʹ CONCLUSION 64
65. εέονΛ࡞ͬͨͦͷઌʹɿ8FCαΠτ΁ͷ૊ΈࠐΈ 65 ഑ஔઌͷࢦఆ΍΢Οϯυ΢ͷϦαΠζରԠͳͲɺ
    গ͠ख௚͢͠Ε͹ͦͷ··8FCαΠτʹ૊ΈࠐΊΔ ! embed
66. 8FCϖʔδʹ૊ΈࠐΉͨΊͷख௚͠ྫ 66 function setup() { // ΩϟϯόεΛੜ੒ let canvas = createCanvas(800, 400); // ˒εέονͷ഑ஔઌΛDOMཁૉͷIDͰࢦఆ canvas.parent('container'); ... // ΢Οϯυ΢ͷϦαΠζ࣌ʹݺ͹ΕΔϒϩοΫ function windowResized() { // ˒਌ཁૉͷαΠζΛऔಘͯ͠ϦαΠζ let parent = document.getElementById('container'); let b = parent.getBoundingClientRect(); resizeCanvas(b.width, b.height); } ! embed
67. ·ͣ͸ύϥϝʔλʔΛม͑Δͱ͜Ζ͔Β 67 αϯϓϧ௨ΓʹεέονΛ࡞ͬͯύϥϝʔλʔΛม͑Δ͚ͩͰ΋ɺ
    ·ͬͨ͘ҟͳΔද৘͕ੜ·ΕΔ ! grid-interaction-3
68. جຊཁૉͷ૊Έ߹ΘͤͰɺදݱ͕޿͕Δ INTERACTION GRID COLOR IMAGE 68 ૊Έ߹ΘͤΔཁૉΛ૿΍͍͚ͯ͠͹ɺ
    ແݶͷදݱΛੜΈग़ͤΔ ʴ COLOR GRID GRID INTERACTION ʴ ʴ ʴ
69. ൃలྫ 69 +RANDOM +INTERACTION +IMAGE +GRID ! advanced
70. ॻ੶Λ׆༻͠Α͏ εέονʹ৮ΕͯجຊཁૉΛֶͼͳ͕Βɺ
    ૊Έ߹ΘͤͷόϦΤʔγϣϯʹՃ͍͑ͯ͜͏ INTERACTION GRID COLOR IMAGE FONT AGENT PACKING MOIRE RANDOM 70
72. Generative Design with p5.js 2018.07.06 Hiroki Kokubun (@cocopon) 72 ϫʔΫγϣοϓ!௱԰Ոి