JavaScript × Mathematics go to Digital Art

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!😁
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/
25. Sample & Code
27. r = sin(θ n d )
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