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
   

   View Slide

2. Who am I
   

   View Slide

3. View Slide

4. View Slide

5. 5
   outputs
   

   View Slide

6. npmjs.com/~kkeeth
   

   View Slide

7. Let’s start 😆
   

   View Slide

8. My Math History
   

   View Slide

9. Undergraduate: Riemann's zeta function
   
   
   (Part of Riemann hypothesis)
   
   
   Graduate Student: Knot Theory
   
   
   (Part of Volume conjecture)
   My Math History
   

   View Slide

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”
    

    View Slide

11. Introduction to
    
    
    p5.js
    

    View Slide

12. Do you know p5.js ? 😁
    

    View Slide

13. URL: https://p5js.org/
    

    View Slide

14. 👉
    About p5.js
    

    View Slide

15. Processing
    
    
    p5.js
    
    
    Programming Language Java / (JavaScript) JavaScript
    Operating Environment mainly PC Web Browser
    Performance Normal little slow
    

    View Slide

16. URL: https://editor.p5js.org/
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

19. https://github.com/processing/p5.js/blob/v1.7.0/src/core/main.js#L418
    

    View Slide

20. Experience the
    beauty of
    mathematics with
    some p5.js examples
    

    View Slide

21. Equation of a circle
    

    View Slide

22. Equation of a circle
    x2 + y2 = r2
    O
    θ
    y
    x
    r
    P(x, y)
    

    View Slide

23. Equation of a circle
    x2 + y2 = r2
    O
    θ
    y
    x
    r
    P(x, y)
    x = ?
    y = ?
    

    View Slide

24. Polar Coordinate System
    O
    θ
    r
    x = r cos(θ)
    y = r sin(θ)
    (r ≥ 0)
    P(r, θ)
    

    View Slide

25. View Slide

26. Trigonometric functions
    
    
    (circular functions)
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. URL: https://sites.google.com/site/cinderellajapan/huanocg/huano-qu-xian
    

    View Slide

31. View Slide

32. Quiz 💁
    
    
    How does the following code behave?
    

    View Slide

33. core part of this code
    

    View Slide

34. Execution result
    

    View Slide

35. Execution result
    Fibonacci sequence
    
    
    famous for sun
    fl
    ower seeds
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

39. Quiz 💁
    
    
    What was used to draw
    
    
    the next image?
    

    View Slide

40. View Slide

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

    View Slide

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

    View Slide

43. Quiz 💁
    
    
    What was used to draw
    
    
    the next images?
    

    View Slide

44. View Slide

45. Euclidean Algorithm
    

    View Slide

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

    View Slide

47. Rose Curve
    

    View Slide

48. View Slide

49. r = sin(θ
    n
    d
    )
    

    View Slide

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

    View Slide

51. Flow FieldɾVector Field
    

    View Slide

52. View Slide

53. View Slide

54. Ken Perlin’s
    
    
    Perlin Noise
    Pseudo Vector Field
    Generation
    

    View Slide

55. Digression
    

    View Slide

56. 🤔
    Is there anything that combines
    
    
    programming, mathematics and art ?
    

    View Slide

57. ✕ Mathematics
    JavaScript Art works
    

    View Slide

58. ✕ Mathematics
    JavaScript Art works
    Creative Coding
    
    
    Generative Art
    

    View Slide

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

    View Slide

60. URL: https://www.pinterest.jp/pin/353180795787592200/ URL: https://twitter.com/t_ritoco/status/1461470820274819072/photo/3
    

    View Slide

61. Have fun with
    
    
    p5.js 😆
    

    View Slide

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
    

    View Slide

63. View Slide