During each step of the pattern, the code draws a vertical line using the lineX variable. This code uses a for loop to create a pattern where lineX starts at 30, increases by 30 each iteration, and stops when lineX is greater than 270. Since you have a pattern, that means you can use a for loop to do this in a more manageable way: Read the code and try to notice the pattern: the first line has an x value of 30, which increases by 30 each step, and ends at 270. This works, but it’s pretty annoying to work with code like this. You could write code that draws each line manually: For example, what if you wanted to draw nine lines instead of three lines? Three lines might not seem very interesting, but for loops make it easier to make more complicated patterns.

Then the code jumps back to the beginning of the loop and performs the check again.

After the body executes, the loop variable is updated.The check is evaluated, and if it’s false, the loop exits and its body is skipped.A loop variable is created and initialized to the first number in the pattern.This might seem like a lot to take in, but you can think about it as a few steps: If it’s false, the loop exits and skips over the body. The check is evaluated, and if it’s true, the body of the loop is executed again.Then the code jumps back to the beginning of the for loop.The code executes your reassignment statement to update the loop variable.Then inside curly brackets ), a couple things happen: Reassign the variable so that it follows the pattern: lineX = lineX + 75 (which can be shortened to lineX += 75).Write a test that evaluates to a boolean value of false whenever the pattern should stop: lineX Declare a variable to keep track of your pattern, and initialize it to the number your pattern starts at: let lineX = 75.To write a for loop, first type the for keyword, and then in parentheses () provide three things: When you have a pattern like this (start at a number, increase by a number, stop at a number), you can use for loops to follow that pattern to repeat code. This sketch draws three vertical lines: the first from position 75,0 to 55,height the second from position 150,0 to 150,height and the third from position 225,0 to 225,height.Īs you read this code, try to recognize the pattern in the three lines: the x position of the first line starts at 75, then increases by 75 for the second line, and stops at 225 for the third line. This tutorial introduces for loops, which allow you to repeat work without repeating code. So far your code has worked by executing each line one after the other: if you want to draw three circles, you’d have to write three separate calls to the circle function. Next, we'll skip ahead to a sketch that's a little more exciting.Now you know how to write code using functions, variables, and if statements. Here, you can find messages from the editor with details about any errors it encounters. In the bottom left of the editor you will find the console section. You'll get used to it with a little practice. The browser isn't always smart enough to know what you mean, and can be quite fussy about the placement of punctuation. One of the most difficult things about getting started with programming is that you have to be very specific about the syntax. If this happens, make sure that you've copied the example code exactly: the numbers should be contained within parentheses and have commas between each of them, the line should end with a semicolon, and ellipse has to be spelled correctly.

If nothing appears, the editor may be having trouble understanding what you’ve typed.

If you've typed everything correctly, this will appear in the display window: To learn more visit using p5 with a screen reader tutorial. If you are using a screen reader, you must turn on the accessible outputs in the p5 online editor, outside the editor you must add the accessibility library in your html. On the editor press play to display your code in action! Note for screenreader users The line you just added draws an ellipse, with its center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels.

P5 js splice