Visually experience the beauty of mathematics with p5.js

Transcript

1. Visually experience the beauty of mathematics with p5.js 19 Nov, 2023 JSConf JP @kkeeth @kuwahara_jsri @kkeeth
2. Who am I
5. 5 outputs
6. npmjs.com/~kkeeth
7. Let’s start 😆
8. My Math History
9. Undergraduate: Riemann's zeta function (Part of Riemann hypothesis) Graduate Student: Knot Theory (Part of Volume conjecture) My Math History
10. A Million Dollars at Stake. Seven of the most dif f icult problems in mathematics One problem (the Poincaré Conjecture) was solved (proved) by Perelman Aside: “millennium prize problems”
11. Introduction to p5.js
12. Do you know p5.js ? 😁
13. URL: https://p5js.org/
14. 👉 About p5.js
15. Processing p5.js Programming Language Java / (JavaScript) JavaScript Operating Environment mainly PC Web Browser Performance Normal little slow
16. URL: https://editor.p5js.org/
17. 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.
18. 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.
19. https://github.com/processing/p5.js/blob/v1.7.0/src/core/main.js#L418
20. Experience the beauty of mathematics with some p5.js examples
21. Equation of a circle
22. Equation of a circle x2 + y2 = r2 O θ y x r P(x, y)
23. Equation of a circle x2 + y2 = r2 O θ y x r P(x, y) x = ? y = ?
24. Polar Coordinate System O θ r x = r cos(θ) y = r sin(θ) (r ≥ 0) P(r, θ)
26. Trigonometric functions (circular functions)
30. URL: https://sites.google.com/site/cinderellajapan/huanocg/huano-qu-xian
32. Quiz 💁 How does the following code behave?
33. core part of this code
34. Execution result
35. Execution result Fibonacci sequence famous for sun fl ower seeds
36. Fibonacci sequence 1, 1, 2, 3, 5, 8, 13, 21, 34... 1 1 , 2 1 , 3 2 , 5 3 , 8 5 , 13 8 , 21 13 , 34 21 . . . 1,2,1.5,1.66,1.6,1.625,1.615,...1.619... → 1.61803
37. Fibonacci sequence 1, 1, 2, 3, 5, 8, 13, 21, 34... 1 1 , 2 1 , 3 2 , 5 3 , 8 5 , 13 8 , 21 13 , 34 21 . . . 1,2,1.5,1.66,1.6,1.625,1.615,...1.619... → 1.61803
38. Fibonacci sequence 1, 1, 2, 3, 5, 8, 13, 21, 34... 1 1 , 2 1 , 3 2 , 5 3 , 8 5 , 13 8 , 21 13 , 34 21 . . . 1,2,1.5,1.66,1.6,1.625,1.615,...1.619... → 1.61803 Golden ratio ϕ = 1 + 5 2
39. Quiz 💁 What was used to draw the next image?
41. Lemniscate orthogonal coordinate system (x2 + y2)2 − 2a2(x2 − y2) = 0 polar coordinate system r2 = 2a2 cos 2θ
42. Lemniscate x = a cos(t) 1 + sin2(t) y = a sin(t)cos(t) 1 + sin2(t)
43. Quiz 💁 What was used to draw the next images?
45. Euclidean Algorithm
46. Euclidean Algorithm a = bq + r (a ≥ b) gcd(a, b) = gcd(b, r)
47. Rose Curve
49. r = sin(θ n d )
50. https://zenn.dev/kkeeth/articles/rose-curve-variations
51. Flow FieldɾVector Field
54. Ken Perlin’s Perlin Noise Pseudo Vector Field Generation
55. Digression
56. 🤔 Is there anything that combines programming, mathematics and art ?
57. ✕ Mathematics JavaScript Art works
58. ✕ Mathematics JavaScript Art works Creative Coding Generative Art
59. URL:https://www.pinterest.jp/pin/190980840435280107/ URL: https://www.pinterest.jp/pin/129267451795680561/
60. URL: https://www.pinterest.jp/pin/353180795787592200/ URL: https://twitter.com/t_ritoco/status/1461470820274819072/photo/3
61. Have fun with p5.js 😆
62. 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