Play with Code: The Joy of p5.js

Presented at Playfest 2021 with Amanda Casari. Try: editor.p5js.org

Transcript

1. PLAY WITH CODE: THE JOY OF P5.JS
   PlayFest 2021
   

   View Slide

2. HELLO, I’M CAROL
   ➤ I love playing and creating with code.
   
   
   ➤ Ooh...cool. How did you make this?
   
   
   ➤ What happens if...
   
   
   ➤ I wonder if I can break it.
   
   
   ➤ People before code - always
   
   
   ➤ Learn, Build, Share - Openly
   

   View Slide

3. HELLO, I’M AMANDA
   ➤ I love creating and exploring the world
   with code.
   
   
   ➤ If possible, I choose to
   f
   i
   x.
   
   
   ➤ Stop. Breathe. Examine.
   
   
   ➤ So many connections!
   
   
   ➤ So many possible spaces!
   
   
   ➤ Ephemeral >> permanent
   
   
   ➤ Expression >> expert
   

   View Slide

4. ➤ Intros
   
   
   ➤ Why
   
   
   ➤ Connect to the Real World
   
   
   ➤ Play with p5.js
   
   
   ➤ Celebrate creations
   
   
   ➤ Share with friends and family
   

   View Slide

5. Joy. Exploration. Con
   f
   i
   dence.
   WHY P5.JS
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. Joy Buolamwini - “Poet of Code”
    

    View Slide

13. PLAY WITH
    
    
    P5.JS
    Exploration and Possibilities
    

    View Slide

14. P5.JS
    ➤ No installation required. Web Based IDE
    
    
    ➤ Lots of examples. Try it, change it,
    explore.
    
    
    ➤ Great documentation. Translations.
    Accessible.
    
    
    ➤ Appeals to the Senses
    
    
    ➤ Choose your own adventure. Empower
    the learner.
    
    
    ➤ Share it with friends
    editor.p5js.org
    

    View Slide

15. YES, YOU CAN...
    ➤ Set up / prep
    
    
    ➤ Production
    
    
    ➤ Clean up
    
    
    ➤ Parties
    
    
    ➤ Plays
    
    
    ➤ Cooking
    
    
    ➤ Writing
    
    
    ➤ and more...
    editor.p5js.org
    

    View Slide

16. Choice, confidence, engagement...PLAY
    

    View Slide

17. LET'S PLAY
    ➤ Interact
    
    
    ➤ Appealing
    
    
    ➤ Visual
    
    
    ➤ Sound
    
    
    ➤ Motion
    
    
    ➤ Individual - explore at your pace
    
    
    ➤ Excitement
    editor.p5js.org
    
    
    thecodingtrain.com
    

    View Slide

18. editor.p5js.org/p5/sketches/interaction:_kaleidoscope
    Kaleidoscope
    

    View Slide

19. Wavemaker
    editor.p5js.org/p5/sketches/interaction:_wavemaker
    

    View Slide

20. Orbit Control
    https:
    /
    /
    editor.p5js.org/p5/sketches/3D
    :
    _orbit_control
    

    View Slide

21. editor.p5js.org/p5/sketches/simulate:_penrose_tiles
    Penrose Tiles
    

    View Slide

22. PLAY WITH P5.JS
    
    
    editor.p5js.org
    https:
    /
    /
    editor.p5js.org/willingc/collections/GI3_u3qH0
    

    View Slide

23. FOUNDATION
    MOTIVATION
    
    
    CONNECTION
    p5.js opens a world of possibilities
    

    View Slide

24. jupyter.org
    

    View Slide

25. p5-notebook.now.sh
    

    View Slide

26. google doodle
    

    View Slide

27. magenta.tensorflow.org
    

    View Slide

28. View Slide

29. editor.p5js.org/ml5/sketches/XCFPKqlKrt
    

    View Slide

30. magic
    -
    sketchpad.glitch.me
    

    View Slide

31. magenta.tensorflow.org/nsynth
    -
    instrument
    

    View Slide

32. magenta.tensorflow.org/nsynth
    -
    instrument
    

    View Slide

33. PLAY WITH MAGENTA
    magenta.tensorflow.org
    magic
    -
    sketchpad.glitch.me
    ml5js.org
    editor.p5js.org/ml5/sketches
    

    View Slide

34. Thanks for sharing the joy of p5.js with us.
    

    View Slide