How to Draw with code?
Drawing with code is one of the most accessible and rewarding introductions to programming available. Instead of producing text output or abstract data, drawing programs produce immediate, visible, colorful results — shapes, patterns, animations, and art — that make the connection between code and creativity obvious from the very first program. codeguppy.com teaches students how to draw with code using JavaScript and the p5.js library, with a structured tutorial library that takes complete beginners from their first circle to complex animated compositions.
Drawing with code on the platform begins with the coordinate system: understanding that the screen is a grid of pixels, and that every shape is placed by specifying its position and dimensions. From there, students learn to draw basic shapes — circles, rectangles, lines, triangles — and control their colors and sizes. With just these fundamentals and a loop, students can create surprisingly complex and beautiful patterns. Adding variables, functions, and animation transforms a static drawing into a living, interactive program.
For CS teachers, draw-with-code projects have a significant pedagogical advantage: they make every programming concept visually demonstrable. Want to show students what a loop does? Write a loop that draws a row of circles. Want to demonstrate functions? Extract the circle-drawing code into a function and call it multiple times. The visual output turns abstract programming concepts into tangible, observable phenomena — making them far easier to understand and remember.
School librarians planning STEAM activities, art-meets-technology workshops, or Hour of Code events will find drawing-with-code the ideal format: accessible to complete beginners, appealing across age groups, and producing shareable, displayable results. Free printable draw-with-code booklets and step-by-step online tutorials are available at codeguppy.com.
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.