5 One-Period Drawing-with-Code Activities That Always Work

Every CS teacher needs activities that fit in one period, work for all skill levels, and produce results students are proud of. Here are five tested activities you can run on codeguppy.com tomorrow -- each fits in 45 to 60 minutes and requires no prior experience.

Activity 1: Draw Your Name with Shapes

Objective: Learn drawing functions and the coordinate system by building letters from shapes.

Students construct each letter of their name using rect(), circle(), and line(). Have them sketch on paper first, then translate to code.

background("Navy");
fill("Cyan");
rect(50, 200, 20, 120);
rect(130, 200, 20, 120);
rect(50, 250, 100, 20);

Extension: Add drop shadows using slightly offset dark copies behind each letter.

Activity 2: Geometric Pattern Maker Using Loops

Objective: Use for loops to create repeating patterns. Start with one row, then expand to a grid:

background("White");
noStroke();
for (var row = 0; row < 10; row++)
{
    for (var col = 0; col < 14; col++)
    {
        fill(col * 18, row * 25, 200);
        circle(30 + col * 58, 30 + row * 62, 30);
    }
}

Extension: Alternate between circles and rectangles on odd and even rows using if.

Activity 3: Landscape Scene

Objective: Combine shapes to build a layered scene. Drawing order controls depth -- students build back-to-front.

background("DeepSkyBlue");
fill("Gold");
noStroke();
circle(650, 100, 80);
fill("ForestGreen");
rect(0, 400, 800, 200);
fill("SlateGray");
triangle(300, 400, 500, 150, 700, 400);
fill("Sienna");
rect(100, 340, 100, 80);
fill("DarkRed");
triangle(90, 340, 150, 280, 210, 340);
fill("SaddleBrown");
rect(135, 380, 30, 40);

Extension: Add a row of trees using a for loop and a drawTree() function.

Activity 4: Abstract Art with random()

Objective: Use random() to generate unique compositions every time the program runs.

background("Black");
noStroke();
for (var i = 0; i < 80; i++)
{
    fill(random(50, 255), random(50, 255), random(50, 255));
    circle(random(0, 800), random(0, 600), random(10, 100));
}

Every press of the Run button creates a new artwork. Students discover that controlled randomness produces visual interest.

Extension: Limit the palette to 3-4 colors stored in an array and pick randomly.

Activity 5: Pixel Art on a Grid

Objective: Use nested loops and a 2D array to draw pixel art, connecting arrays to visual output.

background("White");
noStroke();
var art = [
    [0,0,1,1,1,1,0,0],
    [0,1,2,2,2,2,1,0],
    [1,2,3,2,2,3,2,1],
    [1,2,2,2,2,2,2,1],
    [0,1,2,2,2,2,1,0],
    [0,0,1,1,1,1,0,0]
];
var colors = ["White", "Black", "Gold", "Tomato"];
var size = 50;

for (var row = 0; row < art.length; row++)
{
    for (var col = 0; col < art[row].length; col++)
    {
        fill(colors[art[row][col]]);
        rect(200 + col * size, 150 + row * size, size, size);
    }
}

Extension: Increase the grid to 16x16 for more detailed designs.

Tips for Running These Activities

  • Demo first. Show the finished result, then live-code the first few lines.
  • Print a cheat sheet. List key functions: circle, rect, fill, background, noStroke, random.
  • Encourage experimentation. The best learning happens when students change a number and observe what happens.
  • Save 5 minutes at the end for students to walk around and see each other's work.

All five activities run on codeguppy.com with zero setup -- just open a browser and start coding. For a complete curriculum with illustrated slides, visit codeguppy.com/curriculum.html ($200 classroom PPTX, $17.50 home PDF).

Read more blog articles Browse JavaScript projects

About codeguppy

CodeGuppy is a FREE coding platform for schools and independent learners. If you don't have yet an account with codeguppy.com, you can start by visiting the registration page and sign-up for a free account. Registered users can access tons of fun projects!

Follow @codeguppy on Twitter for coding tips and news about codeguppy platform. For more information, please feel free to contact us.