The Writing on the Screen

Now that we have conquered simple shapes, we can move onto coding text. This will allow you to add some more detail to your graphics. Text in graphics helps you get a short message across to your viewers a lot easier.

The model for text is text(“message”, x-coordinate, y-coordinate);. This may seem similar to the model for programming shapes. The x-coordinate still controls how far over your words are. And the y-coordinate still controls how far down the words are. Your message always goes in quotation marks. This makes it stand out for the computer. Also, don’t forget that semicolon!

The most common first text program people start with is Hello World. For this program simply type text(“Hello World”, 200, 200);. You can play around with coordinates, but this will start the message in the middle of the screen of a 400 by 400 canvas.  These coordinates are based on the lower left-hand corner of the message, just like a rectangle. If nothing shows up, change the background color, because it may print in white.

To change the size of the text use textSize(size); before the section of code you want to change. This works like fill(color); as it changes everything under it. If you want to only change a section of code, you can do two things. The easiest is the put that section of code at the bottom of the program, but this may not always work depending on what our working on. Remember everything you code is layered in the order you have it in. The second thing you can do is to put a text size in front of the section you want to be changed and then put another one after the section with the text size being 12. (That is the default text size on most computers)

If you want to change the color of your text use fill(color);. It works exactly the same as it does with shapes. Most programs will default to the text being white. If you want it to be any other color, you have to declare at the beginning of the program.

Your messages can be as long as you want them to be. If it is too long for one line, no problem! Just make a new line of code with a different y-coordinate and continue your message.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *