Lesson goal: Learn to draw some simple computer graphics

Previous: Algebra vs. computer | Home | Next: Choose a plotting color

Computer graphics add a fun element to programming, because the computer screen can be a "canvas" onto which you can draw whatever you wish. Your programming can suddenly become very visual. The basic drawing element in computer graphics is the pixel, which is a single dot on the screen. In this lesson, you'll learn how to draw using individual pixels.

If you move the mouse pointer over the black "results" box, you'll see the (x,y) coordinates of the pixel the pointer is over. Just like a Cartesian Coordinate System, the coordinates of the center of the screen at at (0,0). Positive values of x are to the right and negative values to the left. Positive values of y are up and negative are down. You can use these coordinates to plot pixels using pset for "pixel set." Pset works like this:

Move the mouse over a dotted box for more information.

Now you try. Plot some pixels using pset. Put the line pcls(0) as the first line in your code to clear the display first.

Type your code here:

See your results here:

Show a friend, family member, or teacher what you've done!

Here is a share link to your code:

Does your code work? Want to run it on your iPhone?

Here's your code:

  1. Use [Control]-[C] (Windows) or [⌘]-[C] (MacOS) to copy your code.

  2. Paste it using [Control]-[V] (Windows) or [⌘]-[V] (MacOS) into this page

  3. Then click the "Use on iPhone" button that you'll see.