Visually experience the beautyof mathematics with p5.js19 Nov, 2023 JSConf JP@kkeeth @kuwahara_jsri @kkeeth
View Slide
Who am I
3
4
5outputs
npmjs.com/~kkeeth
Let’s start 😆
My Math History
Undergraduate: Riemann's zeta function(Part of Riemann hypothesis)Graduate Student: Knot Theory(Part of Volume conjecture)My Math History
A Million Dollars at Stake. Seven of the mostdifficult problems in mathematicsOne problem (the Poincaré Conjecture) wassolved (proved) by PerelmanAside: “millennium prize problems”
Introduction top5.js
Do you know p5.js ? 😁
URL: https://p5js.org/
👉About p5.js
Processingp5.jsProgramming Language Java / (JavaScript) JavaScriptOperating Environment mainly PC Web BrowserPerformance Normal little slow
URL: https://editor.p5js.org/
setupThis function is called once.It's used to define initialenvironment properties.drawCalled directly after setup,continuously executes the linesof code contained inside itsblock until the program isstopped.
https://github.com/processing/p5.js/blob/v1.7.0/src/core/main.js#L418
Experience thebeauty ofmathematics withsome p5.js examples
Equation of a circle
Equation of a circlex2 + y2 = r2OθyxrP(x, y)
Equation of a circlex2 + y2 = r2OθyxrP(x, y)x = ?y = ?
Polar Coordinate SystemOθrx = r cos(θ)y = r sin(θ)(r ≥ 0)P(r, θ)
Trigonometric functions(circular functions)
URL: https://sites.google.com/site/cinderellajapan/huanocg/huano-qu-xian
Quiz 💁How does the following code behave?
core part of this code
Execution result
Execution resultFibonacci sequencefamous for sunflower seeds
Fibonacci sequence1, 1, 2, 3, 5, 8, 13, 21, 34...11,21,32,53,85,138,2113,3421. . .1,2,1.5,1.66,1.6,1.625,1.615,...1.619... → 1.61803
Fibonacci sequence1, 1, 2, 3, 5, 8, 13, 21, 34...11,21,32,53,85,138,2113,3421. . .1,2,1.5,1.66,1.6,1.625,1.615,...1.619... → 1.61803Golden ratioϕ =1 + 52
Quiz 💁What was used to drawthe next image?
Lemniscateorthogonal coordinate system(x2 + y2)2 − 2a2(x2 − y2) = 0polar coordinate systemr2 = 2a2 cos 2θ
Lemniscatex =a cos(t)1 + sin2(t)y =a sin(t)cos(t)1 + sin2(t)
Quiz 💁What was used to drawthe next images?
Euclidean Algorithm
Euclidean Algorithma = bq + r (a ≥ b)gcd(a, b) = gcd(b, r)
Rose Curve
r = sin(θnd)
https://zenn.dev/kkeeth/articles/rose-curve-variations
Flow FieldɾVector Field
Ken Perlin’sPerlin NoisePseudo Vector FieldGeneration
Digression
🤔Is there anything that combinesprogramming, mathematics and art ?
✕ MathematicsJavaScript Art works
✕ MathematicsJavaScript Art worksCreative CodingGenerative Art
URL:https://www.pinterest.jp/pin/190980840435280107/ URL: https://www.pinterest.jp/pin/129267451795680561/
URL: https://www.pinterest.jp/pin/353180795787592200/ URL: https://twitter.com/t_ritoco/status/1461470820274819072/photo/3
Have fun withp5.js 😆
Referencesp5.js Get Started• https://p5js.org/get-started/δΣωϥςΟϒɾΞʔτɹProcessingʹΑΔ࣮ફΨΠυ• https://www.amazon.co.jp/dp/4861009634Pinterst Search(generativeart)• https://onl.tw/2bhH4ZDOpenprocessing• https://openprocessing.org/user/299354?o=13&view=sketches𝕏hash tag ”#ͭͿ͖Processing”• https://x.com/search?q=ͭͿ͖Processing&src=typeahead_click&f=live