Generative Design with p5.js Workshop

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

͸͡Ίʹ INTRODUCTION 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

δΣωϥςΟϒσβΠϯͱ͸ ίϯϐϡʔλʔϓϩάϥϜʹೖྗͱنଇΛ༩͑Δ͜ͱͰɺ  ը૾΍ΞχϝʔγϣϯͳͲΛੜΈͩ͢ख๏ͷ͜ͱ 7

Slide 8

Slide 8 text

ݪయʰ(FOFSBUJWF%FTJHOʱ ίϯϐϡʔλʔΞʔτͷڭຊͱͯ͠ɺւ֎Ͱ޿͘਌͠·Ε͖ͯͨ ʰ(FOFSBUJWF(FTUBMUVOHʱͷ೔ຊޠ൛ɻ ϓϩάϥϛϯά؀ڥʮ1SPDFTTJOHʯΛ༻͍ͯɺੜ੒త૑ൃతͳ  ϏδϡΞϧΛ࡞Γग़͢ํ๏Λ·ͱΊͨҰ࡭ɻඒ͍͠࡞ྫͱ๛෋ͳ  αϯϓϧɺஸೡͳղઆʹΑͬͯɺϓϩάϥϚʔҎ֎ʹ΋৽ͨͳ  σβΠϯମݧ΁ͷಓےΛఏڙ͢Δɻ 8

Slide 9

Slide 9 text

௨শʮಷثʯ 9

Slide 10

Slide 10 text

(FOFSBUJWF%FTJHOXJUIQKT ʰ(FOFSBUJWF%FTJHOʱͷجૅύʔτʮ#BTJD1SJODJQMFTʯͷΈΛ ൈ͖ग़͠ɺQKTʹରԠͨ͠࠶ฤू൛ɻ   ר಄ͷ࡞඼ࣄྫΛҰ৽ɺղઆ͢Δ࡞ྫ΋Ұ෦มߋɾ௥Ճ͞Εͨɻ 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ຊ೔ͷ໨ඪ ʮδΣωϥςΟϒσβΠϯ͓ͬͯ΋͠Ζ͍ʯ  ʮࣗ෼ʹ΋Ͱ͖ͦ͏ʂʯͱײͯ͡΋Β͏ ຊॻΛ׆༻ͨ͠දݱͷ޿͔͛ͨΛ  ମݧͯ͠΋Β͏ 17 1 2

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

QKTͷجຊɿಁ໌ͱઢͷଠ͞ 26 // ృΓ৭Λઃఆ fill(0, 200, 0); // ࿮ઢ͸ͳ͠ noStroke(); ellipse(200, 200, 200, 200); // ృΓ͸ͳ͠ noFill(); // ࿮ઢͷଠ͞Λઃఆ strokeWeight(5); stroke(0, 200, 0); ellipse(200, 200, 200, 200);

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

࡞ۀ࣌ؒ 5෼ 29

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

࡞ۀ࣌ؒ 5෼ 32

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

ςʔϚʮ৭ʯ 1.COLORS 34

Slide 35

Slide 35 text

ʮ৭ʯͷ࡞ྫ ➞ P_1_2_3_03 ➞ P_1_2_3_04 35

Slide 36

Slide 36 text

σδλϧͷੈքʹ͓͚Δʮ৭ʯ 3(#ʢ੺ɺ྘ɺ੨ʣ )4#ʢ৭૬ɺ࠼౓ɺ໌౓ʣ ͭͷ࣠Λ΋ͭ৘ใͰɺҰൠతʹ͸ͦΕͧΕஈ֊ɺ  ৭º৭º৭㲈ສ৭Ͱදݱ͢Δɻ ࣠ͷऔΓ͔ͨ͸͞·͟· ʜʜ 36

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

SBOEPN ؔ਺ 40 function draw() { // ˒ృΓͷ৭Λઃఆ let r = random(0, 255); let g = random(0, 255); let b = random(0, 255); fill(r, g, b); ... } random ( ࠷খ஋ , ࠷େ஋ ) ࢦఆͨ͠ൣғͰϥϯμϜͳ਺஋ʢখ਺ʣΛ  ൃੜ͢Δ

Slide 41

Slide 41 text

࡞ۀ࣌ؒ 20෼ 41

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

࡞ۀ࣌ؒ 20෼ 48

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

ςʔϚͷ͓୊ɿʮάϦουʯ 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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

࡞ۀ࣌ؒ 20෼ 58

Slide 59

Slide 59 text

άϦου +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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

ࢀߟɿ৭৘ใͷऔಘ 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);

Slide 63

Slide 63 text

࡞ۀ࣌ؒ 20෼ 63

Slide 64

Slide 64 text

͓ΘΓʹ CONCLUSION 64

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Slide 72

Slide 72 text

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