Drawing with code
Drawing with code is one of the most compelling ways to introduce students to programming. It answers the question every beginner asks — "what can I actually make with code?" — with an immediate, visual, satisfying answer. Using simple JavaScript commands, students can draw geometric shapes, generate patterns, create pixel art, build kaleidoscopes, and animate colorful designs — all while learning the core programming concepts that underpin all software development. codeguppy.com makes drawing with code accessible for learners of all ages and experience levels.
The platform's drawing environment is built on the p5.js library, which provides student-friendly functions for drawing shapes, working with colors, using coordinates, and creating animations. These functions are simple enough for a beginner to use on day one, yet expressive enough to create genuinely impressive artwork as students develop more advanced skills. The progression from drawing a single circle to creating a complex recursive spiral or animated pixel canvas mirrors the progression of a well-designed CS curriculum.
For CS teachers, drawing with code projects offer a distinctive pedagogical advantage: they make abstract concepts concrete. When a student changes the value of a variable and watches the drawing change in real time, the concept of a variable becomes genuinely meaningful. When a loop generates a hundred identical shapes in a fraction of a second, the power of repetition in programming becomes viscerally clear. These "aha moments" are the seeds of lasting understanding.
School librarians planning STEM, STEAM, or maker programs will find drawing-with-code activities among the most universally engaging options available. They require no prior coding knowledge, produce shareable visual results, and connect naturally to art, mathematics, and design. Visit codeguppy.com and the Download section for free illustrated booklets and online tutorials.
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.