EZ Programing Demos

Slow motion, step by step, animated demonstrations of basic computer programing techniques

Links to topics:

Current topic:

Drawing

Graphics intro

A computer language often has drawing commands in its vocabulary. These produce a picture, diagram, or graph. This computer produced drawing is a form of output, and this output is called graphic output.

The topic of computer graphics is covered under the 'Graphics' menu tab at the top of all pages. In order to see a bit of graphic output programing here, we will present a drawing command that plots a line segment.

In the demonstration below there is one command, the line command. Given two (x, y) coordinate pair endpoints, it draws a line segment between them. The first two numbers represent the (x, y) coordinate pair for one endpoint, the next two numbers represent the (x, y) coordinate pair for the other endpoint.

 Slow  Medium  Fast 
Click 'Run' to go.

Actually, the name of the command is not correct. Commands that act like this probably should be named lineSegment. However a lot of languages use the command line to draw line segments, and we will adopt that convention here, at least to conserve space.

 

Drawing a line segment is a form of output. It is graphic, or picture, output. There are more computer graphics examples here at EZ Programing Demos. You can navigate to these by clicking the 'Graphics' tag on the main menu above and then selecting one of the articles.

These articles are grouped into two main categories. The first we might call normal computer graphics, mostly based on (x, y) coordinates, points, and line segments. The other category is turtle graphics, which is a way to draw using an imaginary drawing robot called a turtle. In turtle graphics you mainly think about distances and directions, rather than specific coordinates.

Also, our graphic output appears on an (x, y) plane as usually seen in math studies. A similar approach is used in LOGO, an educational computer language. However, many computer languages use a different system based on screen pixels. Our examples here show how computer graphics can be used to study mathematics, so we will use a system like the one in LOGO.

 

Here's a flowchart for this demo:

 

In an imaginary computer language this demo could look like this:

    
    line(0, 0, 5, 7);
    

 

Suggested next article:

EZ Math Movie is a site that can help you experiment with and understand many topics in mathematics. Its main feature is an interactive animated (x, y) graph that you control with an actual programing language. There are many examples and tutorials, and EZ Math Movie is crossed referenced with both EZ Programing Demos and Zona Land Education.

 

Zona Land Education is a site with explanations and interactive diagrams covering many topics in physics and mathematics. Zona Land Education is cross referenced with EZ Math Movie, and it contains several animations that use EZ Math Movie's programing language.