Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Generative Design with p5.js Workshop

30a0fa53945400e145718f57155869d3?s=47 cocopon
July 06, 2018

Generative Design with p5.js Workshop

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

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

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

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

30a0fa53945400e145718f57155869d3?s=128

cocopon

July 06, 2018
Tweet

More Decks by cocopon

Other Decks in Design

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%FTJHOXJUIQKT ʰ(FOFSBUJWF%FTJHOʱͷجૅύʔτʮ#BTJD1SJODJQMFTʯͷΈΛ ൈ͖ग़͠ɺ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 ʮ"EEpMFʯΛΫϦοΫ ಡΈࠐΈ͍ͨը૾Λυϩοϓ ➞

  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
  71. 71

  72. Generative Design with p5.js 2018.07.06 Hiroki Kokubun (@cocopon) 72 ϫʔΫγϣοϓ!௱԰Ոి