It’s easier than you might think to get hooked on coding. The CodeGuppy website makes the process of writing and tweaking code simple and fun to experience. CodeGuppy projects use JavaScript and it’s not hard to change the code to see your results.

Take, for example, this code poetry project that teaches how arrays and random generators work to create fun and unusual poems. Go to CodeGuppy.com, log in or create an account, then go to their code workspace.

You should see a blank code workspace like A.

The code panel is on the left column and code output will display on the right side of the workspace. Notice the Play button at the top right of the left side code panel. Clicking the Play and Stop button toggles any code to display (Play) or not display (Stop) in the right side code output panel. To get started, click the Play button. The code workspace should look like B.

Let’s begin by looking at the code C. First, look at the blocks of code: const art, const adj, const nou, const pre, const ver, function writeWord, function writeSentence, function enter, and function mousePressed. Each of these blocks is a key element that, when put together, create fun random poems.

The const art, const adj, const nou, const pre, and const ver blocks are constants, chunks of data that the software keeps in its memory to use to build a poem. The square brackets and the words and phrases in double quotes separated by commas indicate that these are arrays. In coding, arrays are collections that a software program can access to do things such as pull out an element of the array at random or validate that one element matches data from elsewhere. Sort of the way you would pull a toy out of a toybox.

In this code, the arrays collect parts of speech: articles (art), adjectives (adj), nouns (nou), prepositions (pre), and verbs (ver). The other blocks of code are functions that use the arrays.

Pressing the Play button creates the first poem and fills the code output area, so enter is the first function to trigger and perform these steps:

• It first clears the code output area of any data and then it calls the writeSentence function.
• The writeSentence function builds a poem by calling the writeWord function and feeds that function each of the arrays, one at a time.
• The writeWord function takes an array, picks a random word in the array, sets the text size between 60 and 100 pixels with textSize(random(60, 100)), then sets the location from the left edge of the code output area between 150 and 250 pixels with text(word, random(150, 250), y), then sets the vertical location in the code output area by adding 65 pixels to whatever the y variable currently is.

Pressing the mouse in the code output area also generates a new poem, the function mousePressed repeats the function enter code steps.

This CodeGuppy project is both fun and easy to adapt. For example, you could copy the arrays to a text editor, change the words (while being careful about double quotes and commas), and then paste the new array data into CodeGuppy. Or you could adapt the textSize(random(60, 100)) code in the writeWord function to make the words bigger or smaller. The first line of the code also has a URL that inspired CodeGuppy to create their project. Go to that URL to see a really helpful video on how this code can be created from scratch.

Both the CodeGuppy and the video use the same programming language, called Processing. Check out this article’s links to learn more about Processing, arrays, and other coding topics related to this project. For example, the Processing documentation lets you type in code like textSize to see how it is used.

Learn More

CodeGuppy Poetry Project

https://codeguppy.com/code.html?t=poetry

CodeGuppy Website

https://codeguppy.com

CodeGuppy Draw with Code Projects

https://codeguppy.com/site/download/draw_with_code.pdf

A Random Sentence Generator Writes Nonsense

https://funprogramming.org/57-A-random-sentence-generator-writes-nonsense.html

Processing Documentation

https://processing.org/reference

Arrays in Processing

https://processing.org/reference/Array.html

Random in Processing

https://processing.org/reference/random_.html

JavaScript Language Specification

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources