Playing Ionic Logo by p5.js

Transcript

1. Playing Ionic Logo by p5.js
   16 Oct, 2022 Ionic Meetup #23 Tokyo
   @kkeeth @kuwahara_jsri @kkeeth
   

   View Slide

2. Who am I
   const my_info = {
   
   
   Name: ‘Kuwahara KEETH Kiyohito’,
   
   
   Company: ‘Yumemi Inc’,
   
   
   Position: ‘Technical Evangelist’,
   
   
   Skills: ‘Riot.js/Next.js/p5.js’,
   
   
   }
   

   View Slide

3. Who am I
   

   View Slide

4. npmjs.com/~kkeeth
   

   View Slide

5. Let’s start 😆
   

   View Slide

6. 🙇 Sorry … 🙇
   
   
   1. This slide is written in English. However, I’m still learning
   English, and there may be some inappropriate
   expressions.
   
   
   2. The word “Ionic” appears a lot in today's my talk, but
   there is NO discussion of implementation using “Ionic”.
   
   
   

   View Slide

7. ×
   

   View Slide

8. ×
   

   View Slide

9. Do you know p5.js? 😁
   

   View Slide

10. URL: https://p5js.org/
    

    View Slide

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

    View Slide

12. View Slide

13. Let’s play Ionic
    logo with p5.js
    

    View Slide

14. 🙇 Sorry2 … 🙇
    old now
    

    View Slide

15. now
    🙇 Sorry2 … 🙇
    old
    I will use this one
    
    
    this time.
    

    View Slide

16. 🙇 Sorry2 … 🙇
    old now
    It was dif
    fi
    cult to
    express this…
    

    View Slide

17. Playing 1: Dots Image
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. Playing 2: 2D Shapes
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. Image By: https://en.wikipedia.org/wiki/Polar_coordinate_system
    Polar Coordinate System
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. Playing 3: 3D Shapes
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. LIVE CODING 👉
    

    View Slide

41. Digression
    

    View Slide

42. Do you know Generative Art ? 😁
    

    View Slide

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

    View Slide

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

    View Slide

45. URL: https://kkeeth.github.io/generative-art-toybox/random-walk/
    

    View Slide

46. URL: https://vimeo.com/10924639
    

    View Slide

47. View Slide

48. At the end
    

    View Slide

49. Have fun with
    
    
    ”p5.js”😆
    sample code:
    
    
    https://github.com/kkeeth/generative-art-toybox/tree/main/WORKS/ionic_logo_playing
    

    View Slide

50. View Slide