30 draw with code programs
Draw with code activities are among the most engaging ways to introduce students to JavaScript programming. When students can immediately see the shapes, colors, and patterns their code produces, abstract programming concepts become concrete and exciting. codeguppy.com publishes a curated collection of 30 draw-with-code programs — from simple geometric shapes to colorful patterns and pixel art — each designed to teach a new coding concept while producing a satisfying visual result.
For CS teachers and school librarians looking for Hour of Code activities or after-school coding club projects, these 30 programs strike the perfect balance between simplicity and creativity. Each program is short enough to complete in a single class period, yet rich enough to spark curiosity and invite experimentation. Students can type in the code, run it instantly, and then modify it to make it their own — building confidence and computational thinking skills at the same time.
The programs cover a range of difficulty levels, making them suitable for middle school and high school students alike. Topics include drawing shapes with loops, working with coordinates, using colors and fills, and creating animations. The accompanying printable booklet — available free in the Download section — is ideal for unplugged coding activities or as a physical take-home resource for students who want to continue coding outside school.
Whether you are planning a classroom lesson, a library makerspace session, or a whole-school Hour of Code event, these 30 draw-with-code programs provide a ready-to-use, zero-setup coding experience. Students open a browser, start typing, and start creating — no installation required.
A free coding platform for schools
codeguppy.com is a free coding platform for high-school and middle-school students. Teachers around the world are using codeguppy.com to teach JavaScript.
To make coding easy, fun, and engaging for students of all ages, codeguppy.com comes with an online code editor and a graphical oriented runtime based on the p5.js library. The platform enables students to learn JavaScript while building fun games and animations.
Coding projects and activities for students
codeguppy.com comes with tons of coding projects and activities that students can use as a starting point for their projects.
Contact us!
If you want to learn more about the free coding platform, please feel free to contact us at any time. We can discuss how to get started with coding, how to implement codeguppy.com in your coding club ... or even discuss coding questions or share programs.