Rediscover the joy of coding with Creative Coding

Transcript

1. Rediscover the joy of coding with Creative Coding 26 Sep, 2023 We Are JavaScripters! @42nd @kkeeth @kuwahara_jsri @kkeeth
2. Who am I
3. Who am I
4. Who am I
5. Introductory Remark 💁 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 👍
6. Let’s start 😆
7. About a year ago
8. 🤔 Is there anything that combines programming, mathematics and art ?
9. ✕ Mathematics JavaScript Art works
10. ✕ Mathematics JavaScript Art works Creative Coding, Generative Art
11. I tryed it !!
12. URL: https://p5js.org/
13. URL: https://p5js.org/ 👉
14. Processing p5.js Programming Language Java / (JavaScript) JavaScript Operating Environment mainly PC Web Browser Performance Normal little slow
15. URL: https://editor.p5js.org/
16. setup This function is called once. It's used to define initial environment properties. draw Called directly after setup, continuously executes the lines of code contained inside its block until the program is stopped.
17. draw Called directly after setup, continuously executes the lines of code contained inside its block until the program is stopped. setup This function is called once. It's used to define initial environment properties.
18. https://github.com/processing/p5.js/blob/v1.7.0/src/core/main.js#L418
19. ✕ JavaScript Mathematics Don’t worry 😆 ɾBasic trigonometric functions ɾPolar coordinate system ɾVector Concepts
20. Polar Coordinate System
21. Vector Concepts
22. Sample & Code
23. https://zenn.dev/kkeeth/articles/rose-curve-variations
25. r = sin(θ n d )
27. core code 👉 only 7 lines!!
29. 🤩 What fun !!
34. Image By: https://openprocessing.org/user/299354?o=13&view=sketches
35. Have fun with p5.js 😆
36. 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