$30 off During Our Annual Pro Sale. View Details »

Play with Code: The Joy of p5.js

Play with Code: The Joy of p5.js

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

Carol Willing
PRO

January 30, 2021
Tweet

More Decks by Carol Willing

Other Decks in Education

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