CodeJavaScript + p5.js · ⌃ Space for hints

12345678910111213

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background("black");
  fill("white");

  // TODO: Change the code on the next line.
  circle(80, 200, 16);
  circle(140, 200, 16);
  circle(200, 200, 16);
}

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background("black");
  fill("white");

  // TODO: Change the code on the next line.
  circle(80, 200, 16);
  circle(140, 200, 16);
  circle(200, 200, 16);
}

Draft saved locallyJavaScript · Spaces: 2

Live preview move your pointer inside

Mission 01 10 min

Reward+120 XP

Replace Repetition with a Loop

A for loop repeats a block of code. A beginner loop header has three parts: for (let i = 0; i < 8; i++). Put the repeated code on its own indented line inside the braces. let i = 0 starts the counter, i < 8 says when to keep going, and i++ adds 1 after each turn. Inside the braces, i is 0, then 1, then 2, and so on.

Learn more

Your mission

Replace the three copied circle lines with one for loop that draws 8 circles. Keep the first circle at x = 80, y = 200, diameter 16, and place each next circle 60 pixels farther right.

Replace the three copied circle lines with one for loop that draws 8 circles. Keep the first circle at x = 80, y = 200, diameter 16, and place each next circle 60 pixels farther right.

Mission complete Run sketch