Learn creative coding writing simple programs

7. Animate horizontal lines, use a variable

Modify the program from episode 6 to make all lines horizontal. To achieve this we use "variables" for the first time. A variable is like a box where we can store a value and reuse this same value multiple times in our program.

A horizontal line has a starting and an ending point, and both are at the same distance from the top border of the screen. To make sure both points are at the same distance from the top (both have the same Y value), we use twice a variable that contains our Y value.

New: Sam below requested more info about "float", so here it goes: variables (these boxes where you can store things) in Processing have a "type". This means each box can only store certain types of things. Imagine having boxes that could only contain pencils, or only bananas. You have to choose the right kind of box for your item. A "float" is like a box that can store numbers with decimals (like 6.259305). Other available types are "String" (for text), "int" (for integer numbers like 6 or -523), or "boolean" (for true/false).

The reason I used float is because random() gives you back a float.

It is possible to convert from one type to another.

Tags: horizontal, line, animation, variable

Code editor

You can make changes to the code below. Then

Questions and comments

Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)

To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
To highlight code blocks, surround it with ``` code-fences ``` like this:
``` void setup() { size(600, 600); } ```