Get into the winter spirit with this fun CodeGuppy lab!
Learning to code often feels like taking apart a clock to see how it works. Coding combines curiosity and play to see what might happen.
use doesn’t matter at this point, because all languages share common ideas and problems to solve.
Go to the CodeGuppy.com website, log in or create an account, then go to their code workspace URL here: https://codeguppy.com/code.html. You should see a blank code workspace like this:
Then click the Play button. The workspace should look like this:
Now let’s have some fun. See the first line of code:
noStroke()? I wonder what that does! Use your mouse to select that first line of code, then delete it. Press the Stop button, then the click the Play button.
Notice every object, including the frame, has a line around it. Setting
noStroke() as the first line of code allows us to then add lines around other objects. Otherwise, adding a line around an object would make for a thicker line.
Next, let’s look at the two line-related functions CodeGuppy provides:
strokeWeight(weight). The words color and weight between the parentheses are placeholders. We’ll put in a color value, red, and a weight value, 10. Add these two lines of code at the start of the first tree definition:
// First tree
Don’t forget to add a semicolon at the end of each line, and double quotes around the color name red. Your code should look like this:
Notice how both trees have a thick border around them, despite coding only the first tree to have a thick red border?
Can you think of a way we might get rid of the border around the second tree? What might work?
What if we add
noStroke() code to the top of the code that defines the second tree? What do you think will happen? Press the Stop button then the click the Play button to see the changes.
// Second tree
It works. Adding
noStroke() to a specific block of code acts like an eraser to get rid of the thick red border around the second tree. And adding
strokeWeight(10) to the definition of the first tree applies to all code that follows.
With these basic changes, it’s easy to see what else you might tweak. And don’t worry too much about breaking things: copy or retype the code at the start of this article to begin again.
If you’re wondering about some possible colors besides red, check out https://www.w3schools.com/ colors/colors_names.asp.
Here’s another neat idea. Compare the
triangle() code for the first tree with the second tree. Notice anything different? For the second tree, all the parameters use a plus + sign or minus – sign to add or subtract two parameters.
The triangle function takes six parameters to define the x.y coordinates of the three corners of a triangle: triangle(x1,y1,x2,y2,x3,y3) with x1,y2 for the top point, x2,y2 bottom left point, and x3,y3 bottom right point. And the rectangle function takes four parameters: rectangle(x,y,height,width). Notice that using height and width from a start x,y coordinate is easier than defining the four x,y coordinates
of a rectangle. It’s clever. All measurements are in pixels because a pixel is a uniform unit of measure with all computers.
It’s fun and challenging to experiment with code by asking “what if?”. You can learn a lot!
Also In The December 2021 Issue
Looking for a new way to encode your secret messages? Try steganography!
Why find the perfect Christmas tree when you can make it?
Design is about solving problems, from donuts to race cars, how we eat to what to wear in cold weather.
Looking for a way to liven up your coding sessions? Check out our Hydra workshop!
Check out our interview with Sam Henry, the programmer who coded Noah Text!
Learn about the importance of simulations, one the coolest types of technology around!
Join us for the next installment of our Fractured Fairy Tales Scratch series!
Learn how video platforms like Zoom are being used to further Peacebuilding during the pandemic!
It's fun and easy to create ASCII art with your computer keyboard, a text editor, and your imagination. Here are ideas to get started.
Learn how computers are able to create sound for all your favorite movies and music!
Learn about some of the different tools used by programmers.
Learn how Amazon is running its stores without any cashiers!
Check out how scientists are using the Winograd Schema Challenge to make smarter computers!
A collection of the links from the December 2021 issue all in one place.
A collection of fun and inspiring stories about tech from December 2021.