Programming to play with p5.js

Transcript

1. Programming to play with p5.js 25 Jun, 2025 ͻ·ϓϩ LTձ @kkeeth @kuwahara_jsri @kkeeth
2. Who am I
5. 5 outputs
6. Podcasts
7. Let’s start 😆
8. Digression
9. 🤔 Is there something that combines programming, mathematics, and art ?
10. ✕ Mathematics JavaScript Art works
11. ✕ Mathematics JavaScript Art works Creative Coding Generative Art
12. URL:https://www.pinterest.jp/pin/190980840435280107/ URL: https://www.pinterest.jp/pin/129267451795680561/
13. URL: https://www.pinterest.jp/pin/353180795787592200/ URL: https://twitter.com/t_ritoco/status/1461470820274819072/photo/3
14. Introduction to p5.js
15. Do you know p5.js ? 😁
16. URL: https://p5js.org/
17. 👉 About p5.js
18. Processing p5.js Programming Language Java / (JavaScript) JavaScript Operating Environment mainly PC Web Browser Performance Normal little slow
19. URL: https://editor.p5js.org/
20. setup This function is called once. It's used to de fi ne initial environment properties. draw Called directly after setup, continuously executes the lines of code contained inside its block until the program is stopped.
21. setup This function is called once. It's used to de fi ne initial environment properties. draw Called directly after setup, continuously executes the lines of code contained inside its block until the program is stopped.
22. https://github.com/processing/p5.js/blob/v1.7.0/src/core/main.js#L418
23. Experience the beauty of mathematics with some p5.js examples
24. Equation of a circle
25. Equation of a circle x2 + y2 = r2 O θ y x r P(x, y)
26. Equation of a circle x2 + y2 = r2 O θ y x r P(x, y) x = ? y = ?
27. Polar Coordinate System O θ r x = r cos(θ) y = r sin(θ) (r ≥ 0) P(r, θ)
31. URL: https://sites.google.com/site/cinderellajapan/huanocg/huano-qu-xian
32. Rose Curve
34. r = sin(θ n d )
36. core code 👉 only 7 lines!!
38. https://zenn.dev/kkeeth/articles/rose-curve-variations
39. Flow FieldɾVector Field
42. Ken Perlin’s Perlin Noise Pseudo Vector Field Generation
43. Have fun with p5.js! 😆
44. References 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 𝕏 hash tag ”#ͭͿ΍͖Processing” • https://x.com/search?q=ͭͿ΍͖Processing&src=typeahead_click&f=live