$30 off During Our Annual Pro Sale. View Details »

Visually experience the beauty of mathematics with p5.js

kkeeth
November 19, 2023

Visually experience the beauty of mathematics with p5.js

kkeeth

November 19, 2023
Tweet

More Decks by kkeeth

Other Decks in Programming

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

    View Slide

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