Rediscover the joy of coding with Creative Coding

Transcript

1. Rediscover the joy of coding
   with Creative Coding
   26 Sep, 2023 We Are JavaScripters! @42nd
   @kkeeth @kuwahara_jsri @kkeeth
   

   View Slide

2. Who am I
   

   View Slide

3. Who am I
   

   View Slide

4. Who am I
   

   View Slide

5. Introductory Remark 💁
   
   
   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

6. Let’s start 😆
   

   View Slide

7. About a year ago
   

   View Slide

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

   View Slide

9. ✕ Mathematics
   JavaScript Art works
   

   View Slide

10. ✕ Mathematics
    JavaScript Art works
    Creative Coding, Generative Art
    

    View Slide

11. I tryed it !!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. setup
    
    
    This function is called once.
    
    
    It's used to define 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

17. draw
    
    
    Called directly after setup,
    
    
    continuously executes the lines
    of code contained inside its
    block until the program is
    stopped.
    setup
    
    
    This function is called once.
    
    
    It's used to define initial
    environment properties.
    

    View Slide

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

    View Slide

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

    View Slide

20. Polar Coordinate System
    

    View Slide

21. Vector Concepts
    

    View Slide

22. Sample & Code
    

    View Slide

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

    View Slide

24. View Slide

25. r = sin(θ
    n
    d
    )
    

    View Slide

26. View Slide

27. core code 👉
    
    
    only 7 lines!!
    

    View Slide

28. View Slide

29. 🤩 What fun !!
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

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

    View Slide

35. Have fun with p5.js 😆
    

    View Slide

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

37. View Slide