Every teaching experience has unique goals, messages, conditions, and environments. By documenting and sharing p5.js educational resources, such as workshops and classes, we aim to better connect the p5.js learner and educator communities worldwide. Add your educational resource on GitHub!
Thank you to Tuan Huang, Yu Lee, and Janis Sepúlveda for initiating the education resource list during OSACC 2024, as well as to previous p5.js Teach page contributors Inhwa Yeom, Gracia Zhang, and Qianqian Ye.
English education resources from the community
- Happycoding p5.js TutorialsKevin Workman
A series of p5.js tutorials with detailed steps
- p5.js Tutorials by Xin XinXin Xin
Video tutorials about p5.js
- p5.js Tutorials by Patt Vira
- 3-Min Creative Coding with p5.jsCarrie Sijia Wang
Video tutorials about p5.js
- p5.js Tutorials by Computational MamaComputational Mama
Experiments with creative coding and live coding with p5js.
- Critical Code CookbookCritical Code Cookbook
Intersectional Feminist Approaches to Teaching and Learning Material.
- Chatbots for Art’s Sake with p5.jsCarrie Sijia Wang
Repurposes existing chatbot technologies and uses them for the sake of art
- Fractal ImplementationsMariana
Introduce the theme of fractals and use p5.js to implement them.
- Creative Coding Class with p5.jsCarrie Sijia Wang
Fundamental coding class using p5.js
- Signing CodersTaeyoon Choi
To help Deaf and Hard of Hearing students learn about computer programming through playful exercises. To make ASL tutorial of basic coding concepts. We used p5.js Web editor and code examples on the website. We also used dice, playing cards and various paper tools to help students learn about coding concepts.
- Machine Learning for the WebYining Shi
The goal of this class is to learn and understand common machine learning techniques and apply them to generate creative outputs in the browser using ml5.js and p5.js. This class is a mix of lectures, coding sessions, group discussions, and presentations.
- Introduction to Generative DrawingAdam Herst
To introduce p5.js to artists with little or no programming experience and to suggest one way an analogue practice can migrate to a digital form. A printed workbook with activities that used the p5.js web editor to show how to translate a physical drawing into a digital drawing.
- Digital Weaving & Physical Computing Workshop SeriesQianqian Ye, Evelyn Masso
Over the course of three workshops, we’ll draw and create patterns using p5.js, an open-source graphical library; we’ll learn and apply computational concepts to transform patterns and finally, we’ll bring weaving to life with electronic microcontrollers.
- Painting with CodeAndreas Refsgaard
Get creatives, designers, artists and other people who don’t typically use code introduced to p5.js.
- Steve's MakerspaceSteve’s Makerspace
Generative art tutorials taught with p5.js
- Geometric-Patterns-with-Creative-Coding
- Introduction to Computational Media with p5.jsBarry Voeten
This is a teacher-facing p5 curriculum. Each unit includes a series of learning activities and ends with a final project where students apply the concepts they have learned in a creative way. Final project prompts include three levels of difficulty. For each of them, a finished project example is provided.
- Introduction to Video Game Programming in High School with p5.jsEmanuele Bolognesi
This is a teacher-facing p5 curriculum. Each unit includes a series of learning activities and ends with a final project where students apply the concepts they have learned in a creative way. Final project prompts include three levels of difficulty. For each of them, a finished project example is provided.
- Six Features of Programming Languages demonstrated in p5.jsNick Fox-Gieg
The six core features of almost any programming language, demonstrated in C++, C#, Java, JavaScript, Python, and Swift.
- Code! Programming with p5.js!
- The Nature of CodeDaniel Shiffman
Online (and print) textbook on simulation natural systems with p5.js. Covers physics engines, generative algorithms, and machine learning.
- Parametric DesignSebastian Meier, Jolanta Paliszewska
Introductory video-based course for learning the basics of JavaScript and p5js focussing on beginners. The course explores coding as a means for creating output web, print and fabrication.
International education resources from the community
- p5.js Archived Website Japanese Translationshibomb
p5.jsウェブサイトの日本語翻訳を行うオープンソースプロジェクト
- 50+ Coding Club in KoreaInhwa Yeom
p5.js for 50+ aims to enhance the digital literacy and rights of people going on 50+
- Fundamentals of p5.js in spanishChepeCarlos
Fundamentos de p5js en español (fundamentals of p5.js in spanish)
- Taller Introducción a la Programación Creativa con p5.jsAarón Montoya-Moraga
Introduction to beginners and artists of graphic web programming and open source, using p5.js, in Spanish
- p5.js Tutorial in Mandarin - QTVQianqian Ye
A series of p5.js video tutorials in Mandarin on Bilibili and TikTok
- Taller de Creative CodingFederico Santana
Sólo una colección de p5.js donde subo los ejemplos que se hacen en vivo, acá:Hacer que más personas aprendan sobre el arte creativo y, a su vez, poder ir acercandolas al mundo de la matemática, todo en español. El curso está fuertemente inspirado en “The coding train” pero con acercamiento que va a la matemática y el arte creativo en su conjunto.
- Introduction to p5.js in FrenchBérenger Recoules (a.k.a b2renger)
Get to know p5.js and its functionalities (dom, audio, webgl etc.)
- Calculadora de IMCDayana
Auxiliar pessoas que estao iniciando na programação
- p5.js à l'Ubuntu Party!Basile Pesin
This introduction for a new public to programming through fun and compelling examples takes the form of in-person workshop, 1 hour per session, with different participants each time. The students were using (Ubuntu) machines with the p5.js web editor. I was teaching using a video projector as well as a board.
- Open Lecture, Creative Coding: 2020Shunsuke Takawo
Making code as a tool for artistic expression.
- Creative Coding for Static GraphicsShunsuke Takawo
To code from the graphic designer’s perspective.
- Introducción a la programación creativa (Introduction to creative coding)Aarón Montoya-Moraga, Guillermo Montecinos
Introducción a la programación creativa (introduction to creative coding)
- Generative art with p5Karlos G. Liberal
Arte generativo con p5 en español, inspirado en el arte de Zach Lieberman y en los videos de Daniel Shiffman “The coding train” en youtube (Generative art with p5 in spanish inspired by zach lieberman and daniel shiffman’s the coding train youtube videos).
- Parametric DesignSebastian Meier, Jolanta Paliszewska
Video-Seminar auf Deutsch/Englisch und Deutscher Gebärdensprache als Einführung in JavaScript-Basics und p5js. Der Kurs nutzt Coding um Output für Web, Print und Rapid Prototyping (3D-Druck, Lasercutter, etc.) zu produzieren.
Every teaching experience has unique goals, messages, conditions, and environments. By documenting and sharing p5.js educational resources, such as workshops and classes, we aim to better connect the p5.js learner and educator communities worldwide. Add your educational resource on GitHub!
Thank you to Tuan Huang, Yu Lee, and Janis Sepúlveda for initiating the education resource list during OSACC 2024, as well as to previous p5.js Teach page contributors Inhwa Yeom, Gracia Zhang, and Qianqian Ye.
English education resources from the community
- Happycoding p5.js TutorialsKevin Workman
A series of p5.js tutorials with detailed steps
- p5.js Tutorials by Xin XinXin Xin
Video tutorials about p5.js
- p5.js Tutorials by Patt Vira
- 3-Min Creative Coding with p5.jsCarrie Sijia Wang
Video tutorials about p5.js
- p5.js Tutorials by Computational MamaComputational Mama
Experiments with creative coding and live coding with p5js.
- Critical Code CookbookCritical Code Cookbook
Intersectional Feminist Approaches to Teaching and Learning Material.
- Chatbots for Art’s Sake with p5.jsCarrie Sijia Wang
Repurposes existing chatbot technologies and uses them for the sake of art
- Fractal ImplementationsMariana
Introduce the theme of fractals and use p5.js to implement them.
- Creative Coding Class with p5.jsCarrie Sijia Wang
Fundamental coding class using p5.js
- Signing CodersTaeyoon Choi
To help Deaf and Hard of Hearing students learn about computer programming through playful exercises. To make ASL tutorial of basic coding concepts. We used p5.js Web editor and code examples on the website. We also used dice, playing cards and various paper tools to help students learn about coding concepts.
- Machine Learning for the WebYining Shi
The goal of this class is to learn and understand common machine learning techniques and apply them to generate creative outputs in the browser using ml5.js and p5.js. This class is a mix of lectures, coding sessions, group discussions, and presentations.
- Introduction to Generative DrawingAdam Herst
To introduce p5.js to artists with little or no programming experience and to suggest one way an analogue practice can migrate to a digital form. A printed workbook with activities that used the p5.js web editor to show how to translate a physical drawing into a digital drawing.
- Digital Weaving & Physical Computing Workshop SeriesQianqian Ye, Evelyn Masso
Over the course of three workshops, we’ll draw and create patterns using p5.js, an open-source graphical library; we’ll learn and apply computational concepts to transform patterns and finally, we’ll bring weaving to life with electronic microcontrollers.
- Painting with CodeAndreas Refsgaard
Get creatives, designers, artists and other people who don’t typically use code introduced to p5.js.
- Steve's MakerspaceSteve’s Makerspace
Generative art tutorials taught with p5.js
- Geometric-Patterns-with-Creative-Coding
- Introduction to Computational Media with p5.jsBarry Voeten
This is a teacher-facing p5 curriculum. Each unit includes a series of learning activities and ends with a final project where students apply the concepts they have learned in a creative way. Final project prompts include three levels of difficulty. For each of them, a finished project example is provided.
- Introduction to Video Game Programming in High School with p5.jsEmanuele Bolognesi
This is a teacher-facing p5 curriculum. Each unit includes a series of learning activities and ends with a final project where students apply the concepts they have learned in a creative way. Final project prompts include three levels of difficulty. For each of them, a finished project example is provided.
- Six Features of Programming Languages demonstrated in p5.jsNick Fox-Gieg
The six core features of almost any programming language, demonstrated in C++, C#, Java, JavaScript, Python, and Swift.
- Code! Programming with p5.js!
- The Nature of CodeDaniel Shiffman
Online (and print) textbook on simulation natural systems with p5.js. Covers physics engines, generative algorithms, and machine learning.
- Parametric DesignSebastian Meier, Jolanta Paliszewska
Introductory video-based course for learning the basics of JavaScript and p5js focussing on beginners. The course explores coding as a means for creating output web, print and fabrication.
International education resources from the community
- p5.js Archived Website Japanese Translationshibomb
p5.jsウェブサイトの日本語翻訳を行うオープンソースプロジェクト
- 50+ Coding Club in KoreaInhwa Yeom
p5.js for 50+ aims to enhance the digital literacy and rights of people going on 50+
- Fundamentals of p5.js in spanishChepeCarlos
Fundamentos de p5js en español (fundamentals of p5.js in spanish)
- Taller Introducción a la Programación Creativa con p5.jsAarón Montoya-Moraga
Introduction to beginners and artists of graphic web programming and open source, using p5.js, in Spanish
- p5.js Tutorial in Mandarin - QTVQianqian Ye
A series of p5.js video tutorials in Mandarin on Bilibili and TikTok
- Taller de Creative CodingFederico Santana
Sólo una colección de p5.js donde subo los ejemplos que se hacen en vivo, acá:Hacer que más personas aprendan sobre el arte creativo y, a su vez, poder ir acercandolas al mundo de la matemática, todo en español. El curso está fuertemente inspirado en “The coding train” pero con acercamiento que va a la matemática y el arte creativo en su conjunto.
- Introduction to p5.js in FrenchBérenger Recoules (a.k.a b2renger)
Get to know p5.js and its functionalities (dom, audio, webgl etc.)
- Calculadora de IMCDayana
Auxiliar pessoas que estao iniciando na programação
- p5.js à l'Ubuntu Party!Basile Pesin
This introduction for a new public to programming through fun and compelling examples takes the form of in-person workshop, 1 hour per session, with different participants each time. The students were using (Ubuntu) machines with the p5.js web editor. I was teaching using a video projector as well as a board.
- Open Lecture, Creative Coding: 2020Shunsuke Takawo
Making code as a tool for artistic expression.
- Creative Coding for Static GraphicsShunsuke Takawo
To code from the graphic designer’s perspective.
- Introducción a la programación creativa (Introduction to creative coding)Aarón Montoya-Moraga, Guillermo Montecinos
Introducción a la programación creativa (introduction to creative coding)
- Generative art with p5Karlos G. Liberal
Arte generativo con p5 en español, inspirado en el arte de Zach Lieberman y en los videos de Daniel Shiffman “The coding train” en youtube (Generative art with p5 in spanish inspired by zach lieberman and daniel shiffman’s the coding train youtube videos).
- Parametric DesignSebastian Meier, Jolanta Paliszewska
Video-Seminar auf Deutsch/Englisch und Deutscher Gebärdensprache als Einführung in JavaScript-Basics und p5js. Der Kurs nutzt Coding um Output für Web, Print und Rapid Prototyping (3D-Druck, Lasercutter, etc.) zu produzieren.