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

Transcript

  1. 22.

    εέονͷجຊߏ଄ function setup() { createCanvas(400, 400); ... } function draw()

    { } setupϒϩοΫ͸͸͡Ίʹ౓͚࣮ͩߦ͞ΕΔ ΩϟϯόεαΠζͷઃఆ΍ม਺ͷॳظԽͳͲͷ ॲཧ͸͜͜ʹॻ͘ drawϒϩοΫ͸ඵؒʹճ΄Ͳɺ܁Γฦ͠
 ࣮ߦ͞ΕΔ ਤܗ΍ը૾ͳͲͷඳըॲཧ͸جຊతʹ͜͜ʹ
 ॻ͘ 22
  2. 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 ); ઢΛඳ͘
  3. 25.

    QKTͷجຊɿృΓɾઢͷ৭ 25 function draw() { ... fill(0, 200, 0); stroke(0,

    0, 0); // ࢦఆͨ͠৭ͰਤܗΛඳ͘ rect(50, 100, 150, 200); } fill ( ੺ , ྘ , ੨ , ෆಁ໌౓ ); ృΓͷ৭Λઃఆ͢Δ ͦΕͧΕ 0 ~ 255 ͷൣғͰࢦఆ͢Δ ෆಁ໌౓͸লུͰ͖Δ stroke ( ੺ , ྘ , ੨ , ෆಁ໌౓ ); ઢͷ৭Λઃఆ͢Δ ͦΕͧΕ 0 ~ 255 ͷൣғͰઃఆ͢Δ ෆಁ໌౓͸লུͰ͖Δ
  4. 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);
  5. 30.

    ؆୯ͳϚ΢εͷΠϯλϥΫγϣϯ 30 function draw() { ... if (mouseIsPressed) { line(0,

    0, mouseX, mouseY); } ... } mouseIsPressed Ϛ΢εͷϘλϯ͕ԡ͞Ε͍ͯΔͱ͖ true ʹͳΔ mouseX, mouseY ͦΕͧΕɺϚ΢εΧʔιϧͷX/Y࠲ඪ
  6. 33.

    ؆୯ͳϚ΢εͷΠϯλϥΫγϣϯͷվ଄ྫ 33 function draw() { ... let sz; // ਤܗͷαΠζ

    if (mouseIsPressed) { sz = 100; // Ϙλϯ͕ԡ͞Ε͍ͯΔͱ͖͸େ͖Ί } else { sz = 50; // ԡ͞Ε͍ͯͳ͍ͱ͖͸খ͞Ί } // ઃఆͨ͠αΠζͰԁΛඳ͘ ellipse(0, 0, sz, sz); }
  7. 37.

    ෮शɿQKTʹ͓͚Δ৭ͷදݱ 37 function draw() { ... fill(0, 200, 0); stroke(0,

    0, 0); // ࢦఆͨ͠৭ͰਤܗΛඳ͘ rect(50, 100, 150, 200); } fill ( ੺ , ྘ , ੨ , ෆಁ໌౓ ); ృΓͷ৭Λઃఆ͢Δ ͦΕͧΕ 0 ~ 255 ͷൣғͰࢦఆ͢Δ ෆಁ໌౓͸লུͰ͖Δ stroke ( ੺ , ྘ , ੨ , ෆಁ໌౓ ); ઢͷ৭Λઃఆ͢Δ ͦΕͧΕ 0 ~ 255 ͷൣғͰઃఆ͢Δ ෆಁ໌౓͸লུͰ͖Δ
  8. 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 ( ࠷খ஋ , ࠷େ஋ ) ࢦఆͨ͠ൣғͰϥϯμϜͳ਺஋ʢখ਺ʣΛ
 ൃੜ͢Δ
  9. 42.

    ൃ૝ͷλωᶃɿݪ৭ಉ࢜Ͱ੍໿Λઃ͚ͯΈΔ 42 // ˒ృΓͷ৭Λઃఆ // ྘Λ׬શϥϯμϜʹઃఆ let g = random(0,

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

    ൃ૝ͷλωᶅɿಁաͯ͠ॏͶͯΈΔ 44 // ృΓͷ৭Λઃఆ fill(r, g, b, 50); // ˒൒ಁ໌ʹ͢Δ

    ... // ηϧΛඳը // ˒ߴ͞Λ૿΍ͯ࣍͠ͷߦͱͷॏͳΓΛੜΈग़͢ rect(x, y, w, w); ൒ಁ໌ͷਤܗΛॏͶΔ͜ͱͰɺݸʑͷྠֲ͕ফ͑ͯෳࡶͳ৭߹͍͕ੜ·ΕΔ ! palette-idea-3
  11. 46.

    ൃ૝ͷλωᶆɿը૾͔Β৭ΛआΓΔ 46 // ˒ඞཁͳσʔλΛಡΈࠐΉϒϩοΫ // ʢը૾ͳͲͷϩʔυʹར༻͢Δʣ function preload() { img

    = loadImage('night.jpg'); } ... // ˒ରԠ͢Δ৔ॴͷը૾ͷ৭Λऔಘͯ͠ɺృΓ৭ʹઃఆ fill(img.get(x, y)); ը૾͸׬੒͞Εͨ৭߹͍ͷๅݿ ը૾ͷ৭Λഈआ͢Δ͚ͩͰɺௐ࿨ͨ͠৭߹͍͕ੜΈग़ͤΔ ! palette-idea-4
  12. 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
  13. 55.

    // ˒ృΓͷ৭Λઃఆ // ྘Λ׬શϥϯμϜʹઃఆ let g = random(0, 255); //

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

    άϦου +INTERACTION 56 ֤ηϧͱΧʔιϧͱͷڑ཭Λܭࢉͯ͠αΠζʹ൓ө͢Δͱɺ Ϣʔβʔͱͷ૬ޓ࡞༻͕ੜ·ΕΔ // ˒ΧʔιϧҐஔͱͷڑ཭Λܭࢉ let d =

    dist(x, y, mouseX, mouseY); // ˒ΧʔιϧҐஔͱͷڑ཭ΛαΠζʹ൓ө let sz = d * 0.3; // ˒άϦουͷηϧΛඳը ellipse(x, y, sz, sz); ! grid-interaction-1
  15. 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
  16. 60.

    άϦου 60 +IMAGE ֤ηϧͷ৭Λը૾͔Βऔಘ͢Ε͹ɺҰຯҧͬͨը૾ͷදݱʹ // ˒ඞཁͳσʔλΛಡΈࠐΉϒϩοΫ // ʢը૾ͳͲͷϩʔυʹར༻͢Δʣ function preload()

    { img = loadImage('night.jpg'); } ... // ˒ରԠ͢Δ৔ॴͷը૾ͷ৭Λऔಘͯ͠ɺృΓ৭ʹઃఆ fill(img.get(x, y)); // άϦουͷηϧΛඳը ellipse(x, y, 4, 4); ˞ຖճ৭Λऔಘ͢ΔͱύϑΥʔϚϯε͕མͪΔ ͷͰɺΩϟογϡ͢Δͷ͕Α͍ ! grid-image ! grid-image-cached
  17. 61.

    ൃ૝ͷλωɿ໌౓ΛηϧͷαΠζʹ൓ө͢Δ 61 // ˒ը૾ͷ໌Δ͞ΛηϧͷαΠζʹ൓ө͢Δ let sz = brightness(col) * 0.1;

    // ˒ϥϯμϜͳ਺஋Λֻ͚ͯॠ͔ͤΔ sz = sz * random(0.5, 1); // ˒άϦουͷηϧΛඳը ellipse(x, y, sz, sz); ৭ͷ৘ใʢ৭૬ɺ࠼౓ɺ໌౓ʣΛɺ·ͬͨ͘ผͷ৘ใ ʢ͜ͷྫͰ͸ηϧͷαΠζʣʹ൓ө͢Δͷ΋͓΋͠Ζ͍ ! grid-image-idea-1
  18. 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);
  19. 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
  20. 71.

    71