Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 full-size slide

  2. npmjs.com/~kkeeth

    View full-size slide

  3. Let’s start 😆

    View full-size slide

  4. My Math History

    View full-size slide

  5. Undergraduate: Riemann's zeta function


    (Part of Riemann hypothesis)


    Graduate Student: Knot Theory


    (Part of Volume conjecture)
    My Math History

    View full-size slide

  6. 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 full-size slide

  7. Introduction to


    p5.js

    View full-size slide

  8. Do you know p5.js ? 😁

    View full-size slide

  9. URL: https://p5js.org/

    View full-size slide

  10. 👉
    About p5.js

    View full-size slide

  11. Processing


    p5.js


    Programming Language Java / (JavaScript) JavaScript
    Operating Environment mainly PC Web Browser
    Performance Normal little slow

    View full-size slide

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

    View full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Equation of a circle

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Trigonometric functions


    (circular functions)

    View full-size slide

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

    View full-size slide

  23. Quiz 💁


    How does the following code behave?

    View full-size slide

  24. core part of this code

    View full-size slide

  25. Execution result

    View full-size slide

  26. Execution result
    Fibonacci sequence


    famous for sun
    fl
    ower seeds

    View full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. Quiz 💁


    What was used to draw


    the next image?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. Quiz 💁


    What was used to draw


    the next images?

    View full-size slide

  34. Euclidean Algorithm

    View full-size slide

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

    View full-size slide

  36. r = sin(θ
    n
    d
    )

    View full-size slide

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

    View full-size slide

  38. Flow FieldɾVector Field

    View full-size slide

  39. Ken Perlin’s


    Perlin Noise
    Pseudo Vector Field
    Generation

    View full-size slide

  40. 🤔
    Is there anything that combines


    programming, mathematics and art ?

    View full-size slide

  41. ✕ Mathematics
    JavaScript Art works

    View full-size slide

  42. ✕ Mathematics
    JavaScript Art works
    Creative Coding


    Generative Art

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. Have fun with


    p5.js 😆

    View full-size slide

  46. 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 full-size slide