JavaScript × Mathematics go to Digital Art

Transcript

1. JavaScript × Mathematics
   
   
   go to Digital Art
   19 Nov, 2022 Front-end Conference Okinawa
   @kkeeth @kuwahara_jsri @kkeeth
   

   View Slide

2. Who am I
   

   View Slide

3. Who am I
   

   View Slide

4. Image By: https://openprocessing.org/user/299354?o=13&view=sketches
   

   View Slide

5. Introductory Remark1 💁
   
   
   The title says "Digital Art”,
   
   
   but I'm talking about "Generative Art”.
   

   View Slide

6. Introductory Remark2 💁
   
   
   This slide is written in English.
   
   
   However, I’m still learning English,
   
   
   and there may be some inappropriate expressions.
   
   
   So, please give me MASAKARI for my expressions 👍
   

   View Slide

7. Let’s start 😆
   

   View Slide

8. What’s the
   
   
   Generative Art
   

   View Slide

9. Do you know Generative Art?
   
   
   Let's look at some specific pieces!😁
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. Complex and unpredictable art created using
    algorithmic and mathematical methods 💁
    

    View Slide

14. ✕ Mathematics
    JavaScript
    

    View Slide

15. ✕ Mathematics
    JavaScript
    😆
    

    View Slide

16. ✕ Mathematics
    JavaScript
    Frequently used 😆
    
    
    • ɾBasics(function, variables,
    scope, if, for…)
    
    
    • ɾrandom() function
    
    
    •ɾclass
    

    View Slide

17. ✕
    JavaScript Mathematics
    😱
    

    View Slide

18. ✕
    JavaScript Mathematics
    Don’t worry 😆
    
    
    ɾBasic trigonometric functions
    
    
    ɾPolar coordinate system
    
    
    ɾVector Concepts
    

    View Slide

19. Polar Coordinate System
    

    View Slide

20. Vector Concepts
    

    View Slide

21. Tool/Library
    

    View Slide

22. URL: https://p5js.org/
    

    View Slide

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

    View Slide

24. View Slide

25. Sample & Code
    

    View Slide

26. View Slide

27. r = sin(θ
    n
    d
    )
    

    View Slide

28. View Slide

29. core code 👉
    
    
    only 10 lines!!
    

    View Slide

30. At the end
    

    View Slide

31. Statements
    

    View Slide

32. Matt Pearson (ஶ), ԭ ܒհ (຋༁),ʮδΣωϥςΟϒɾΞʔτʕProcessingʹΑΔ࣮ફΨΠυʯ
    2014 ংจ
    “δΣωϥςΟϒɾΞʔτ͸ίʔσΟϯάΛָ
    ͠ΉͨΊͷ΋ͷͰ͢ɻϓϩάϥϛϯά͸ɺྑ
    ͍࣮ફɺߏ଄ɺޮ཰ͷͨΊ͚ͩͷ΋ͷͰ͸͋
    Γ·ͤΜɻͦΕ͸ࣗ༝ɺ૝૾ྗɺදݱʹ͍ͭ
    ͯͷ΋ͷͰ΋͋Γ·͢ɻ”
    

    View Slide

33. Have fun with
    
    
    “Generative Art” 😆
    

    View Slide

34. References
    P5.js Tutorial | Create a generative art using image data
    
    
    • https://youtu.be/me04ZrTJqWA
    
    
    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
    

    View Slide

35. View Slide