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

Generative Design with p5.js Workshop

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/

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

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

    View Slide

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

    View Slide