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
   

   View Slide

2. ຊ೔ͷࢿྉ͸ͪ͜Β
   https://goo.gl/NnKvyM
   2
   
   

   View Slide

3. ͸͡Ίʹ
   INTRODUCTION
   3
   

   View Slide

4. ߨࢣ঺հ
   ࠃ෼޺थʢ͘͜ͿΜͻΖ͖ʣ
   େखϝʔΧʔۈ຿Λܦͯɺݱࡏ͸ओʹݸਓͰ׆ಈதɻ8FCJ04ͳͲ
   ͷϑϩϯτΤϯυΛओମʹɺ6*σβΠϯ͔Β։ൃશൠ·Ͱख͕͚Δɻ
   ϓϥΠϕʔτʹ͓͍ͯ΋ɺυοτֆͷలࣔ΍δΣωϥςΟϒΞʔτͷ
   ੍࡞ͳͲɺ෯޿͍ྖҬͰ׆ಈ͍ͯ͠Δɻ
   4
   

   View Slide

5. ࡞඼঺հ
   Llumino PWA
   https://llumino.app
   5
   

   View Slide

6. ࡞඼঺հ
   ͢͠ͽ͜
   http://sushipi.co
   6
   

   View Slide

7. δΣωϥςΟϒσβΠϯͱ͸
   ίϯϐϡʔλʔϓϩάϥϜʹೖྗͱنଇΛ༩͑Δ͜ͱͰɺ

   ը૾΍ΞχϝʔγϣϯͳͲΛੜΈͩ͢ख๏ͷ͜ͱ
   7
   

   View Slide

8. ݪయʰ(FOFSBUJWF%FTJHOʱ
   ίϯϐϡʔλʔΞʔτͷڭຊͱͯ͠ɺւ֎Ͱ޿͘਌͠·Ε͖ͯͨ
   ʰ(FOFSBUJWF(FTUBMUVOHʱͷ೔ຊޠ൛ɻ
   
   ϓϩάϥϛϯά؀ڥʮ1SPDFTTJOHʯΛ༻͍ͯɺੜ੒త૑ൃతͳ

   ϏδϡΞϧΛ࡞Γग़͢ํ๏Λ·ͱΊͨҰ࡭ɻඒ͍͠࡞ྫͱ๛෋ͳ

   αϯϓϧɺஸೡͳղઆʹΑͬͯɺϓϩάϥϚʔҎ֎ʹ΋৽ͨͳ

   σβΠϯମݧ΁ͷಓےΛఏڙ͢Δɻ
   8
   

   View Slide

9. ௨শʮಷثʯ
   9
   

   View Slide

10. (FOFSBUJWF%FTJHOXJUIQKT
    ʰ(FOFSBUJWF%FTJHOʱͷجૅύʔτʮ#BTJD1SJODJQMFTʯͷΈΛ
    ൈ͖ग़͠ɺQKTʹରԠͨ͠࠶ฤू൛ɻ
    

    ר಄ͷ࡞඼ࣄྫΛҰ৽ɺղઆ͢Δ࡞ྫ΋Ұ෦มߋɾ௥Ճ͞Εͨɻ
    10
    

    View Slide

11. 1SPDFTTJOHͱQKT
    +BWB +BWB4DSJQU
    11
    1SPDFTTJOH QKT
    ϓϩάϥϛϯάݴޠ
    ಈ࡞؀ڥ
    ಈ࡞଎౓
    ओʹ1$ 8FCϒϥ΢β
    ී௨ ΍΍஗͍
    

    View Slide

12. 1SPDFTTJOHͱQKT
    +BWB +BWB4DSJQU
    12
    1SPDFTTJOH QKT
    ϓϩάϥϛϯάݴޠ
    ಈ࡞؀ڥ
    ಈ࡞଎౓
    ओʹ1$ 8FCϒϥ΢β
    ී௨ ΍΍஗͍
    

    View Slide

13. QKTΛબ୒͢Δཧ༝
    13
    8FCαΠτͷ੍࡞ʹͦͷ··׆͔ͤΔ
    ϞόΠϧ୺຤্Ͱ΋ಈ࡞͢Δ
    +BWB4DSJQUͷࢿ࢈͕׆༻Ͱ͖Δ
    

    View Slide

14. ϫʔΫγϣοϓͷ४උ
    SETUP
    14
    

    View Slide

15. QKTͰεέονΛॻ͘ํ๏
    ϩʔΧϧ؀ڥΛ੔͑Δ
    (PPHMF$ISPNF"UPNͳͲ
    ΦϯϥΠϯαʔϏεΛར༻͢Δ
    FEJUPSQKTPSHͳͲ
    15
    

    View Slide

16. QKTͰεέονΛॻ͘ํ๏
    ϩʔΧϧ؀ڥΛ੔͑Δ
    (PPHMF$ISPNF"UPNͳͲ
    ΦϯϥΠϯαʔϏεΛར༻͢Δ
    FEJUPSQKTPSHͳͲ
    16
    

    View Slide

17. ຊ೔ͷ໨ඪ
    ʮδΣωϥςΟϒσβΠϯ͓ͬͯ΋͠Ζ͍ʯ

    ʮࣗ෼ʹ΋Ͱ͖ͦ͏ʂʯͱײͯ͡΋Β͏
    ຊॻΛ׆༻ͨ͠දݱͷ޿͔͛ͨΛ

    ମݧͯ͠΋Β͏
    17
    1 2
    

    View Slide

18. ϫʔΫγϣοϓͷߏ੒
    ΢ΥʔϛϯάΞοϓ ςʔϚʮ৭ʯ ςʔϚʮάϦουʯ
    18
    40 ෼
    40 ෼
    10 ෼
    ➞ ➞
    

    View Slide

19. ΢ΥʔϛϯάΞοϓ
    0.WARM-UP
    19
    

    View Slide

20. ΦϯϥΠϯΤσΟλΛ։͍ͯΈΑ͏
    editor.p5js.org
    20
    
    

    View Slide

21. ΦϯϥΠϯΤσΟλͷઆ໌
    ίʔυ ϓϨϏϡʔ
    ϓϩδΣ
    Ϋτ
    21
    

    View Slide

22. εέονͷجຊߏ଄
    function setup() {
    createCanvas(400, 400);
    ...
    }
    function draw() {
    }
    setupϒϩοΫ͸͸͡Ίʹ౓͚࣮ͩߦ͞ΕΔ
    ΩϟϯόεαΠζͷઃఆ΍ม਺ͷॳظԽͳͲͷ
    ॲཧ͸͜͜ʹॻ͘
    drawϒϩοΫ͸ඵؒʹճ΄Ͳɺ܁Γฦ͠

    ࣮ߦ͞ΕΔ
    ਤܗ΍ը૾ͳͲͷඳըॲཧ͸جຊతʹ͜͜ʹ

    ॻ͘
    22
    

    View Slide

23. QKTͷجຊɿΩϟϯόεͱ࠲ඪܥ
    23
    ࠨ্͕ݪ఺ɾӈԼํ޲ʹ࠲ඪ͕૿͍͑ͯ͘
    

    View Slide

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 );
    ઢΛඳ͘
    

    View Slide

25. QKTͷجຊɿృΓɾઢͷ৭
    25
    function draw() {
    ...
    fill(0, 200, 0);
    stroke(0, 0, 0);
    // ࢦఆͨ͠৭ͰਤܗΛඳ͘
    rect(50, 100, 150, 200);
    }
    fill ( ੺ , ྘ , ੨ , ෆಁ໌౓ );
    ృΓͷ৭Λઃఆ͢Δ
    ͦΕͧΕ 0 ~ 255 ͷൣғͰࢦఆ͢Δ
    ෆಁ໌౓͸লུͰ͖Δ
    stroke ( ੺ , ྘ , ੨ , ෆಁ໌౓ );
    ઢͷ৭Λઃఆ͢Δ
    ͦΕͧΕ 0 ~ 255 ͷൣғͰઃఆ͢Δ
    ෆಁ໌౓͸লུͰ͖Δ
    

    View Slide

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);
    

    View Slide

27. ৭ͷઃఆͷॱং
    27
    fill()΍stroke()Ͱ
    ֆචΛ͔࣋ͬͯΒʜ
    ਤܗΛඳ͘
    ➞
    1 2
    

    View Slide

28. ࠲ඪ΍৭Λม࣮͑ͯߦͯ͠ΈͯɺQKTʹ׳ΕΑ͏
    28
    

    View Slide

29. ࡞ۀ࣌ؒ
    5෼
    29
    

    View Slide

30. ؆୯ͳϚ΢εͷΠϯλϥΫγϣϯ
    30
    function draw() {
    ...
    if (mouseIsPressed) {
    line(0, 0, mouseX, mouseY);
    }
    ...
    }
    mouseIsPressed
    Ϛ΢εͷϘλϯ͕ԡ͞Ε͍ͯΔͱ͖ true ʹͳΔ
    mouseX, mouseY
    ͦΕͧΕɺϚ΢εΧʔιϧͷX/Y࠲ඪ
    

    View Slide

31. Ϛ΢εͷΠϯλϥΫγϣϯʹ׳ΕΑ͏
    31
    

    View Slide

32. ࡞ۀ࣌ؒ
    5෼
    32
    

    View Slide

33. ؆୯ͳϚ΢εͷΠϯλϥΫγϣϯͷվ଄ྫ
    33
    function draw() {
    ...
    let sz; // ਤܗͷαΠζ
    if (mouseIsPressed) {
    sz = 100; // Ϙλϯ͕ԡ͞Ε͍ͯΔͱ͖͸େ͖Ί
    } else {
    sz = 50; // ԡ͞Ε͍ͯͳ͍ͱ͖͸খ͞Ί
    }
    // ઃఆͨ͠αΠζͰԁΛඳ͘
    ellipse(0, 0, sz, sz);
    }
    

    View Slide

34. ςʔϚʮ৭ʯ
    1.COLORS
    34
    

    View Slide

35. ʮ৭ʯͷ࡞ྫ
    ➞ P_1_2_3_03 ➞ P_1_2_3_04
    35
    

    View Slide

36. σδλϧͷੈքʹ͓͚Δʮ৭ʯ
    3(#ʢ੺ɺ྘ɺ੨ʣ )4#ʢ৭૬ɺ࠼౓ɺ໌౓ʣ
    ͭͷ࣠Λ΋ͭ৘ใͰɺҰൠతʹ͸ͦΕͧΕஈ֊ɺ

    ৭º৭º৭㲈ສ৭Ͱදݱ͢Δɻ
    ࣠ͷऔΓ͔ͨ͸͞·͟·
    ʜʜ
    36
    

    View Slide

37. ෮शɿQKTʹ͓͚Δ৭ͷදݱ
    37
    function draw() {
    ...
    fill(0, 200, 0);
    stroke(0, 0, 0);
    // ࢦఆͨ͠৭ͰਤܗΛඳ͘
    rect(50, 100, 150, 200);
    }
    fill ( ੺ , ྘ , ੨ , ෆಁ໌౓ );
    ృΓͷ৭Λઃఆ͢Δ
    ͦΕͧΕ 0 ~ 255 ͷൣғͰࢦఆ͢Δ
    ෆಁ໌౓͸লུͰ͖Δ
    stroke ( ੺ , ྘ , ੨ , ෆಁ໌౓ );
    ઢͷ৭Λઃఆ͢Δ
    ͦΕͧΕ 0 ~ 255 ͷൣғͰઃఆ͢Δ
    ෆಁ໌౓͸লུͰ͖Δ
    

    View Slide

38. ຊ೔࢖༻͢ΔεέονͷҰཡ
    editor.p5js.org/gdp5ws/sketches
    38
    
    

    View Slide

39. ςʔϚͷ͓୊ɿʮηϧͷෑ͖٧Ίʯ
    ϥϯμϜͳ෯ͷηϧΛෑ͖٧ΊΔεέονΛ୊ࡐʹɺ
    ண৭ʹ͍࣮ͭͯݧ͍ͯ͜͠͏
    39
    function draw() {
    // ˒ృΓͷ৭Λઃఆ
    let r = random(0, 255);
    let g = random(0, 255);
    let b = random(0, 255);
    fill(r, g, b);
    ...
    }
    ! palette
    

    View Slide

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 ( ࠷খ஋ , ࠷େ஋ )
    ࢦఆͨ͠ൣғͰϥϯμϜͳ਺஋ʢখ਺ʣΛ

    ൃੜ͢Δ
    

    View Slide

41. ࡞ۀ࣌ؒ
    20෼
    41
    

    View Slide

42. ൃ૝ͷλωᶃɿݪ৭ಉ࢜Ͱ੍໿Λઃ͚ͯΈΔ
    42
    // ˒ృΓͷ৭Λઃఆ
    // ྘Λ׬શϥϯμϜʹઃఆ
    let g = random(0, 255);
    // ੨΋ϥϯμϜ͕ͩɺ྘ΑΓେ͖͘ͳΒͳ͍
    let b = random(0, g);
    // ੺΋ϥϯμϜ͕ͩɺ੨ΑΓେ͖͘ͳΒͳ͍
    let r = random(0, b);
    fill(r, g, b);
    ྘Λݩʹ੨Λɺ੨Λݩʹ੺Λɺʜͱ͍ͬͨΑ͏ʹ
    ݪ৭ಉ࢜Ͱ੍໿Λઃ͚ͯΈΔͱɺશମʹௐ࿨͕ੜ·ΕΔ
    ! palette-idea-1
    

    View Slide

43. ൃ૝ͷλωᶄɿ·ͬͨ͘ҟͳΔ৘ใΛར༻͢Δ
    43
    ྫ͑͹ηϧͷ:࠲ඪͳͲɺ·ͬͨ͘ҟͳΔ৘ใΛ
    ར༻ͯ͠৭Λܭࢉ͢Δ͜ͱ΋Ͱ͖Δ
    // ˒ృΓͷ৭Λઃఆ
    // ηϧͷY࠲ඪΛ৭ʹ൓ө͢Δ
    let br = random(y / 2, y);
    fill(br, br, br);
    ! palette-idea-2
    

    View Slide

44. ൃ૝ͷλωᶅɿಁաͯ͠ॏͶͯΈΔ
    44
    // ృΓͷ৭Λઃఆ
    fill(r, g, b, 50); // ˒൒ಁ໌ʹ͢Δ
    ...
    // ηϧΛඳը
    // ˒ߴ͞Λ૿΍ͯ࣍͠ͷߦͱͷॏͳΓΛੜΈग़͢
    rect(x, y, w, w);
    ൒ಁ໌ͷਤܗΛॏͶΔ͜ͱͰɺݸʑͷྠֲ͕ফ͑ͯෳࡶͳ৭߹͍͕ੜ·ΕΔ
    ! palette-idea-3
    

    View Slide

45. ൃ૝ͷλωᶆɿը૾͔Β৭ΛआΓΔ
    45
    ը૾͸׬੒͞Εͨ৭߹͍ͷๅݿ
    ը૾ͷ৭Λഈआ͢Δ͚ͩͰɺௐ࿨ͨ͠৭߹͍͕ੜΈग़ͤΔ
    ➞
    ΰοϗʮ੕݄໷ʯ
    

    View Slide

46. ൃ૝ͷλωᶆɿը૾͔Β৭ΛआΓΔ
    46
    // ˒ඞཁͳσʔλΛಡΈࠐΉϒϩοΫ
    // ʢը૾ͳͲͷϩʔυʹར༻͢Δʣ
    function preload() {
    img = loadImage('night.jpg');
    }
    ...
    // ˒ରԠ͢Δ৔ॴͷը૾ͷ৭Λऔಘͯ͠ɺృΓ৭ʹઃఆ
    fill(img.get(x, y));
    ը૾͸׬੒͞Εͨ৭߹͍ͷๅݿ
    ը૾ͷ৭Λഈआ͢Δ͚ͩͰɺௐ࿨ͨ͠৭߹͍͕ੜΈग़ͤΔ
    ! palette-idea-4
    

    View Slide

47. ࣗ෼Ͱը૾Λ௥Ճ͢Δʹ͸
    47
    ʮ"EEpMFʯΛΫϦοΫ ಡΈࠐΈ͍ͨը૾Λυϩοϓ
    ➞
    

    View Slide

48. ࡞ۀ࣌ؒ
    20෼
    48
    

    View Slide

49. ςʔϚʮάϦουʯ
    2.GRID
    49
    

    View Slide

50. ʮάϦουʯͷ࡞ྫ
    ➞ P_2_1_1_01
    50
    ➞ P_4_3_1_02
    

    View Slide

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
    

    View Slide

52. Ξχϝʔγϣϯͤͯ͞ΈΑ͏
    52
    ηϧͷαΠζΛϥϯμϜʹ͢Δ͜ͱͰɺ
    ؆୯ͳΞχϝʔγϣϯΛ࡞ͬͯΈΑ͏
    // ˒ηϧͷαΠζΛϥϯμϜʹ͢Δ
    let sz = random(0, 8);
    // ˒άϦουͷηϧΛඳը
    ellipse(
    x, y,
    sz, sz
    );
    ! grid-animation
    

    View Slide

53. ૊Έ߹ΘͤΔɺͱ͍͏දݱͷ޿͔͛ͨ
    INTERACTION
    GRID COLOR
    IMAGE
    ͻͱͭͻͱͭ͸୯७Ͱ΋ɺ૊Έ߹ΘͤΔͱෳࡶͳ݁ՌΛੜΈग़͢͜ͱ͕Ͱ͖Δ
    ʴ
    53
    

    View Slide

54. ͋͞ɺ૊Έ߹ΘͤͯΈΑ͏
    54
    

    View Slide

55. // ˒ృΓͷ৭Λઃఆ
    // ྘Λ׬શϥϯμϜʹઃఆ
    let g = random(0, 255);
    // ੨΋ϥϯμϜ͕ͩɺ྘ΑΓେ͖͘ͳΒͳ͍
    let b = random(0, g);
    // ੺΋ϥϯμϜ͕ͩɺ੨ΑΓେ͖͘ͳΒͳ͍
    let r = random(0, b);
    fill(r, g, b);
    άϦου +COLOR
    55
    ςʔϚͰੜ੒ͨ͠৭ΛɺάϦουͷηϧʹద༻ͯ͠ΈΔ
    ! grid-color
    

    View Slide

56. άϦου +INTERACTION
    56
    ֤ηϧͱΧʔιϧͱͷڑ཭Λܭࢉͯ͠αΠζʹ൓ө͢Δͱɺ
    Ϣʔβʔͱͷ૬ޓ࡞༻͕ੜ·ΕΔ
    // ˒ΧʔιϧҐஔͱͷڑ཭Λܭࢉ
    let d = dist(x, y, mouseX, mouseY);
    // ˒ΧʔιϧҐஔͱͷڑ཭ΛαΠζʹ൓ө
    let sz = d * 0.3;
    // ˒άϦουͷηϧΛඳը
    ellipse(x, y, sz, sz);
    ! grid-interaction-1
    

    View Slide

57. ηϧͷछྨΛม͑Δ͚ͩͰɺ·ͬͨ͘ผͷදݱʹ
    57
    ! grid-interaction-1 ! grid-interaction-2 ! grid-interaction-3
    

    View Slide

58. ࡞ۀ࣌ؒ
    20෼
    58
    

    View Slide

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
    

    View Slide

60. άϦου
    60
    +IMAGE
    ֤ηϧͷ৭Λը૾͔Βऔಘ͢Ε͹ɺҰຯҧͬͨը૾ͷදݱʹ
    // ˒ඞཁͳσʔλΛಡΈࠐΉϒϩοΫ
    // ʢը૾ͳͲͷϩʔυʹར༻͢Δʣ
    function preload() {
    img = loadImage('night.jpg');
    }
    ...
    // ˒ରԠ͢Δ৔ॴͷը૾ͷ৭Λऔಘͯ͠ɺృΓ৭ʹઃఆ
    fill(img.get(x, y));
    // άϦουͷηϧΛඳը
    ellipse(x, y, 4, 4);
    ˞ຖճ৭Λऔಘ͢ΔͱύϑΥʔϚϯε͕མͪΔ
    ͷͰɺΩϟογϡ͢Δͷ͕Α͍
    ! grid-image
    ! grid-image-cached
    

    View Slide

61. ൃ૝ͷλωɿ໌౓ΛηϧͷαΠζʹ൓ө͢Δ
    61
    // ˒ը૾ͷ໌Δ͞ΛηϧͷαΠζʹ൓ө͢Δ
    let sz = brightness(col) * 0.1;
    // ˒ϥϯμϜͳ਺஋Λֻ͚ͯॠ͔ͤΔ
    sz = sz * random(0.5, 1);
    // ˒άϦουͷηϧΛඳը
    ellipse(x, y, sz, sz);
    ৭ͷ৘ใʢ৭૬ɺ࠼౓ɺ໌౓ʣΛɺ·ͬͨ͘ผͷ৘ใ
    ʢ͜ͷྫͰ͸ηϧͷαΠζʣʹ൓ө͢Δͷ΋͓΋͠Ζ͍
    ! grid-image-idea-1
    

    View Slide

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);
    

    View Slide

63. ࡞ۀ࣌ؒ
    20෼
    63
    

    View Slide

64. ͓ΘΓʹ
    CONCLUSION
    64
    

    View Slide

65. εέονΛ࡞ͬͨͦͷઌʹɿ8FCαΠτ΁ͷ૊ΈࠐΈ
    65
    ഑ஔઌͷࢦఆ΍΢Οϯυ΢ͷϦαΠζରԠͳͲɺ
    গ͠ख௚͢͠Ε͹ͦͷ··8FCαΠτʹ૊ΈࠐΊΔ
    ! embed
    

    View Slide

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
    

    View Slide

67. ·ͣ͸ύϥϝʔλʔΛม͑Δͱ͜Ζ͔Β
    67
    αϯϓϧ௨ΓʹεέονΛ࡞ͬͯύϥϝʔλʔΛม͑Δ͚ͩͰ΋ɺ
    ·ͬͨ͘ҟͳΔද৘͕ੜ·ΕΔ
    ! grid-interaction-3
    

    View Slide

68. جຊཁૉͷ૊Έ߹ΘͤͰɺදݱ͕޿͕Δ
    INTERACTION
    GRID
    COLOR
    IMAGE
    68
    ૊Έ߹ΘͤΔཁૉΛ૿΍͍͚ͯ͠͹ɺ
    ແݶͷදݱΛੜΈग़ͤΔ
    ʴ
    COLOR
    GRID
    GRID
    INTERACTION
    ʴ
    ʴ
    ʴ
    

    View Slide

69. ൃలྫ
    69
    +RANDOM
    +INTERACTION +IMAGE
    +GRID
    ! advanced
    

    View Slide

70. ॻ੶Λ׆༻͠Α͏
    εέονʹ৮ΕͯجຊཁૉΛֶͼͳ͕Βɺ
    ૊Έ߹ΘͤͷόϦΤʔγϣϯʹՃ͍͑ͯ͜͏
    INTERACTION
    GRID
    COLOR
    IMAGE
    FONT
    AGENT PACKING
    MOIRE
    RANDOM
    70
    

    View Slide

71. View Slide

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

    View Slide