A group of programmers came together to create a programming language that is as simple as possible while allowing users to take advantage of all of the interactivity and media features that we love to use on the internet. This programming framework is p5js.org
All the action happens in the "draw" function. Below is a Hello World! example:
function draw () {
fill(0);
textSize(40);
drawText("Hello World!",width/2,height/2);
display();
}
See what this code does by clicking hello.html
As you can see, the code writes "Hello World!" in the middle of the screen. The textSize() function sets the font size and fill(0) makes the text solid black.
If you are familiar with C/C++ the draw function is very similar to the main function except that draw() is run over and over again. In this "Hello World!" example, the words "Hello World!" are being drawn 60 times per second on the screen and the draw() function is run each time. This is definitely overkill if all you want to do is write text on the screen, but it makes for a fun platform for creating interactive games.
You can prove to yourself that draw() is run over and over by adding a line to your code as shown below. The print statement will write text to the "console", rather than the screen.
function draw () {
fill(0);
textSize(40);
drawText("Hello World!",width/2,height/2);
display();
print("We just ran the draw() function!");
}
Now if draw() is only run once, we will only see the message in the print statement once. But if it is run multiple times we will see this message over and over again. Try this out and see if you can notice that there are multiple messages!
Notice that there is a semicolon after every line. If you do not put a semicolon after every line, and close every parenthesis the code may fail.
For example consider this bad example:
function draw () {
fill(0);
textSize(40);
drawText("Hello World!",width/2,height/2);
display();
}
Confirm that this program fails by taking out some of the semicolons and parenthesis. The interface may actually tell you that you are missing a semicolon or right parenthesis as soon as you delete them.
If you ignore these messages and click 
You should see something like this:
Notice the friendly error message: "Missing semicolon". You may need to put your cursor over the red warning to the left of the code in order to see the advice: "Missing semicolon"
You can add comments to the code as long as you put // at the beginning of the line, for example:
// The draw function is run many times
function draw () {
// The fill function makes the text solid black
fill(0);
// This determines the font size
textSize(40);
drawText("Hello World!",width/2,height/2);
// Now run any other graphics
display();
}
Confirm that this code works just fine by adding comments to your code, saving the program and then click to make sure you can still see the "Hello World!"
If this code were embedded into a webpage it would work equally well, as you can see from clicking hello.html
If you accidentally forget to close a parentheses the editor will raise a red flag. Here is an example if you delete the ) in the drawText function:
You will need to put the cursor over the red area to get the error message, but it will give you some good advice.
Note: Sometimes if you delete a parenthesis, the error will show up on the next line. So if you see a "red" flag like this, be aware that it may be pointing to the previous line.
You can create your own variables. Consider this example:
function draw () {
fill(0);
textSize(40);
x_hello=width/2;
y_hello=height/2;
drawText("Hello World!",x_hello,y_hello);
display();
}
Notice that this code works exactly the same as before by making these changes, clicking save and then pressing . The code should behave like this
You can use the arrow keys to affect the program. Try this example:
function draw () {
fill(0);
textSize(40);
x_hello=width/2;
y_hello=height/2;
drawText("Hello World!",x_hello,y_hello);
if(keyIsDown(DOWN_ARROW)) {
clear();
}
display();
}
When you press the down arrow key, the program will run clear(); which will clear the screen and you won't see "Hello World!" any more. The program should behave like this.