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

JavaScript × Mathematics go to Digital Art

kkeeth
November 19, 2022

JavaScript × Mathematics go to Digital Art

kkeeth

November 19, 2022
Tweet

More Decks by kkeeth

Other Decks in Programming

Transcript

  1. JavaScript × Mathematics go to Digital Art 19 Nov, 2022

    Front-end Conference Okinawa @kkeeth @kuwahara_jsri @kkeeth
  2. Who am I

  3. Who am I

  4. Image By: https://openprocessing.org/user/299354?o=13&view=sketches

  5. Introductory Remark1 💁 The title says "Digital Art”, but I'm

    talking about "Generative Art”.
  6. Introductory Remark2 💁 This slide is written in English. However,

    I’m still learning English, and there may be some inappropriate expressions. So, please give me MASAKARI for my expressions 👍
  7. Let’s start 😆

  8. What’s the Generative Art

  9. Do you know Generative Art? Let's look at some specific

    pieces!😁
  10. None
  11. None
  12. None
  13. Complex and unpredictable art created using algorithmic and mathematical methods

    💁
  14. ✕ Mathematics JavaScript

  15. ✕ Mathematics JavaScript 😆

  16. ✕ Mathematics JavaScript Frequently used 😆 • ɾBasics(function, variables, scope,

    if, for…) • ɾrandom() function •ɾclass
  17. ✕ JavaScript Mathematics 😱

  18. ✕ JavaScript Mathematics Don’t worry 😆 ɾBasic trigonometric functions ɾPolar

    coordinate system ɾVector Concepts
  19. Polar Coordinate System

  20. Vector Concepts

  21. Tool/Library

  22. URL: https://p5js.org/

  23. URL: https://editor.p5js.org/

  24. None
  25. Sample & Code

  26. None
  27. r = sin(θ n d )

  28. None
  29. core code 👉 only 10 lines!!

  30. At the end

  31. Statements

  32. Matt Pearson (ஶ), ԭ ܒհ (຋༁),ʮδΣωϥςΟϒɾΞʔτʕProcessingʹΑΔ࣮ફΨΠυʯ 2014 ংจ “δΣωϥςΟϒɾΞʔτ͸ίʔσΟϯάΛָ ͠ΉͨΊͷ΋ͷͰ͢ɻϓϩάϥϛϯά͸ɺྑ

    ͍࣮ફɺߏ଄ɺޮ཰ͷͨΊ͚ͩͷ΋ͷͰ͸͋ Γ·ͤΜɻͦΕ͸ࣗ༝ɺ૝૾ྗɺදݱʹ͍ͭ ͯͷ΋ͷͰ΋͋Γ·͢ɻ”
  33. Have fun with “Generative Art” 😆

  34. References P5.js Tutorial | Create a generative art using image

    data • https://youtu.be/me04ZrTJqWA p5.js Get Started • https://p5js.org/get-started/ δΣωϥςΟϒɾΞʔτɹProcessingʹΑΔ࣮ફΨΠυ • https://www.amazon.co.jp/dp/4861009634 Pinterst Search(generativeart) • https://onl.tw/2bhH4ZD Openprocessing • https://openprocessing.org/user/299354?o=13&view=sketches
  35. None