kkeeth
November 19, 2023
1.5k

# Visually experience the beauty of mathematics with p5.js

## kkeeth

November 19, 2023

## Transcript

1. Visually experience the beauty

of mathematics with p5.js
19 Nov, 2023 JSConf JP
@kkeeth @kuwahara_jsri @kkeeth

2. Who am I

3. 3

4. 4

5. 5
outputs

6. npmjs.com/~kkeeth

7. Let’s start 😆

8. My Math History

(Part of Riemann hypothesis)

(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. 👉

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, θ)

25. Trigonometric functions

(circular functions)

27. Quiz 💁

How does the following code behave?

28. core part of this code

29. Execution result

30. Execution result
Fibonacci sequence

famous for sun
fl
ower seeds

31. 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

32. 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

33. 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

34. Quiz 💁

What was used to draw

the next image?

35. Lemniscate
orthogonal coordinate system
(x2 + y2)2 − 2a2(x2 − y2) = 0
polar coordinate system
r2 = 2a2 cos 2θ

36. Lemniscate
x =
a cos(t)
1 + sin2(t)
y =
a sin(t)cos(t)
1 + sin2(t)

37. Quiz 💁

What was used to draw

the next images?

38. Euclidean Algorithm

39. Euclidean Algorithm
a = bq + r (a ≥ b)
gcd(a, b) = gcd(b, r)

40. Rose Curve

41. r = sin(θ
n
d
)

42. https://zenn.dev/kkeeth/articles/rose-curve-variations

43. Flow FieldɾVector Field

44. Ken Perlin’s

Perlin Noise
Pseudo Vector Field
Generation

45. Digression

46. 🤔
Is there anything that combines

programming, mathematics and art ?

47. ✕ Mathematics
JavaScript Art works

48. ✕ Mathematics
JavaScript Art works
Creative Coding

Generative Art

49. URL:https://www.pinterest.jp/pin/190980840435280107/ URL: https://www.pinterest.jp/pin/129267451795680561/

51. Have fun with

p5.js 😆

52. 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”