beanz Magazine August 2021

Kids, Code, and Computer Science 2020 Tillywig Award Winner

2020 Academics' Choice Award Winner

Be a Good Digital Citizen

August 2021

$6.00 USD $6.00

Making Music Together Make Your Code Unbreakable Code a Car With CodeGuppy

beanz magazine August 2021: Volume 9 Issue 1 Issue 55 (online) & 38 (print) ISSN: 2573-3966 (online) ISSN: 2573-3958 (print) beanz Magazine© is published bi-monthly, six times a year, online at http://beanzmag.com and in print.

A print + online magazine subscription includes online access to all articles, with links to let you explore topics in more detail.

SUBSCRIBE: visit http://beanzmag. com/subscribe or email us for checks/ invoices. We’re also available through EBSCO, Discount Magazine, WT Cox, Magazine PTP, and many other subscription services.

ONLINE MAGAZINE ACCESS: send your email address to hello@beanzmag.com and we’ll set you up.

Published by Owl Hill Media, LLC 378 Eastwood Rd, Woodmere, NY 11598 Email: hello@beanzmag.com Phone: (646) 553-3390 POSTMASTER: Send address changes to Owl Hill Media, LLC, 378 Eastwood Rd, Woodmere, NY 11598.

Periodicals postage paid at Woodmere, NY and other mailing offices Copyright Owl Hill Media, LLC with all rights reserved except as noted. Images are copyrighted by their creators, as noted with each story both online and in print.

Publisher/Editor: Tim Slavin Staff Writers: Ethan Pate, Amy S. Hansen, Martin Fish, Bonnie Roskes, Simon Batt, Clarissa Littler, Jennifer Newell, Tim McGuigan, Bianca Rivera, Jo Hinchcliffe, Tim Slavin Contributors: Patricia Foster, Erin Winnick, David Dodge, Jay Silver, Jeremy Kubica, Colleen Graves, Daniel Fenjves, Ali Hagen, Emeline Swanson, JeanFrancois Nguyen, Paul Seal, Madeleine Slavin Back Office Magic: Wendy Garrison Copy Editor: Eileen Seiler Art Director: Kelley Lanuto Webmaster: Ethan Pate COVER IMAGE: THOMAS PARK, UNSPLASH

Publisher’s Note Welcome to this issue!

Here in the United States, August is when people finish their summer vacations and get started on the new school year. This issue has several articles with ideas that might be fun to think about as school begins.

For example, digital citizenship is a broad but important topic about how we use the internet and interact with other people online. Code Golf also is a fun way to play with software programming. Noah Text is a way to mark up text to help dyslexic readers and people who have difficulty reading the English language. There’s also an article about how to create music using a web browser, and include your friends. Our Parent Teacher article on the inside back cover also talks about how design failures can be an opportunity to play.

We also have the usual articles about computing. For example, learn about creating secret codes with a one time pad, retro web browsers, how the internet of things (IoT) has been involved in Covid vaccine efforts, CGI animation, and more.

This issue also continues a number of articles from prior issues. For example, beginner coding with CodeGuppy, Piskel and Scratch to create animations, and quantum computing. Chances are there’s something you'll find that's fun, new, and interesting in this issue.

This issue also starts the ninth year of publishing and our 55th issue.

We’re really grateful for your interest in and support of our magazine, thank you. Good luck with the new school year!

Tim Slavin, Publisher beanz Magazine

Our Mission beanz magazine is a bi-monthly online and print magazine about learning to code, computer science, and how we use technology in our daily lives. The magazine includes hard-to-find information, for example, a list of 40+ programming languages for education, coding schools, summer tech camps, and more.

While the magazine is written to help kids ages 8 and older learn about programming and computer science, many readers and subscribers are parents, teachers, and librarians who use the articles to learn alongside their young kids, students, or library patrons. The magazine strives to provide easy to understand how-to information, with a bit of quirky fun. Subscribers support the magazine. There is no advertising to distract readers.

The magazine explores these topics: Basics of programming and where to learn more, Problem solving and collaboration, Mathematical foundations of computing and computer science, Computational thinking, Recognizing and selecting computer devices, and the Community, global, and ethical impacts of technology.

contents

advanced

intermediate

beginner

2

cribe 1 s b u s / ag.com m z n a e /b https:/

August 2021

4

Concepts Be a Good Digital Citizen

Projects Unbreakable!

Cover Story

Cover Story

6 8 9 10 12 14 16

17 18 20 22

History

Retro Browsers and the Early Web

Concepts There's a Ram in My PC!

Tech In Real Life The Io (Lifesaving) T

Programming Cover Story Making Music With Your Friends

Projects Cover Story Code a Car!

Concepts

Quantum Gates: The Next Logical Step

Notebook

Why Don't Food and Good Rhyme?

tidbitz

24 24 Miracle on the Seine 25 Blast Off! 25 Through the

If You Were a Drop of Water, Where Would You Go?

Looking Glass

26 28

History

The History of Futureworld

Electronics

Let's Go Perfboarding

Projects and Puzzles

Work On Your Short Game With Code Golf

Programming It's Game Time Everywhere With Roblox

Projects

Coming In Hot

Parents and Teachers The Game of Design

Me and My beanz!

Wyatt, age 13, is always thrilled to find his issue of beanz waiting for him in the mailbox.

He looks forward to reading about the latest in technology and enjoys learning about how things work. He likes the articles on programming and the tidbitz section the most.

How much do you love beanz? We'd love to see! Send us a photo of you and your beanz to us at hello@beanzmag.com. We may print it right here and make you famous. Bragging rights!

2

d o o G a n e Be z i t i C l a t i g Di

Concepts

BY TIM SLAVIN

The Digital Divide

Every one of us belongs to a family, a school, and the neighborhood where we In the United States almost a quarter live, as well as towns, cities, counties, states, of Americans lack access to computers or national governments, and the whole planet. the internet. Maybe they can’t afford it or We mostly live within our families, schools, and places we go around town and we follow they live in rural areas with poor internet certain rules that help us live and work in access. Sometimes a family or group might harmony with each other. choose to not interact online. If you meet That’s the basic definition of citizenship: someone who does not use technology, belonging to a group of people within a defined area and following rules we agree on it is important to accept and understand their to get along. point of view. Maybe they would The internet is another place where we rather be outdoors hiking or playing belong to groups of people. Just like real life, a musical instrument in their there are rules for the internet to help us define free time. Something how we should interact to consider! online.

When you buy something online, use social media, or comment on a web page, you become a citizen of As a citizen, in the real world and online, it is the online world, a digital important to realize there are all kinds of people: citizen. Therefore, it’s those who agree or disagree with us, share or don’t important to act in ways share our interests and needs, and those who have that are respectful and led different lives than ours. Unfortunately, there competent.

There are many also are people who hurt each other. different aspects to Empathy is the ability to understand and share being a good online the feelings of other people. Good digital citizens citizen. Here are a few to may express disagreement with something they consider.

Empathy

read or see online, but they don’t respond in a negative way. They don’t bully or harass people who have different views and they avoid people who behave badly.

3 The term geocache comes from the word cache, pronounced "cash". It's a French word dating back to the late 1700s. It refers to a temporary hiding place to store items.

Your Personal Data

If you click a Like button or fill out an online survey asking if you like cats or dogs, your actions create personal data.

Websites track information about your visit such as what pages you looked at, and even your geographic location. Most websites use visitor tracking to make their own site more useful. But other sites collect your personal data to track and profile you. As a digital citizen, it’s important to understand how your personal data might be used and to control what you do online.

Therefore, it’s a great idea to read the privacy policies for any website you visit and use.

You can typically find this link at the bottom of a web page.

Online Safety Any computer you use for online access should have a PIN or password. Changing these on a regular basis is very important. If you visit sites that require an account, find and use a password keeper like LastPass, 1Password, or Dashlane to keep track of your access details. Using a VPN like 1.1.1.1, which is free, is another way to mask your online activity. For more about VPNs and other more advanced ways to stay safe online, visit the online version of this article. The link is on the back cover of this issue.

Digital Literacy The content on your computer screen Digital might appear real or sound real, but that Wellness doesn’t make it real. There are satire sites that publish news stories that sound real, but It's so easy to get lost online as you read along, it becomes clear they’re joking.

for hours. There’s so much There are sites that deliver malware to infect to find and read and watch. computers. Clickbait articles trick you into Good digital citizens realize adding being exposed to advertising. To be a good online activities limits time available digital citizen requires that you acknowledge for school, family, friends, and what content might be real or fake, personal interests. Software that tracks safe or dangerous. Digital literacy time and computer resources is one puts you in control. way to control time spent online. Setting a timer is another. Once you’re done online, push away from the computer and go off to rsion of ve e lin n o e another part of your life. re, th To learn mo resources. any as links to m this article h

b

BY JO HINCHCLIFFE

Projects

4

! e l b a k a e r b Un Codes are great fun and are a technology that has been used to pass secret information throughout history. These days the principles of codes and ciphers are used in computing to encrypt data and to keep our information safe. Great amounts of work are undertaken by cryptologists to create and test the effectiveness of new code systems.

We are going to look at one of the oldest approaches to creating coded messages, an approach that uses a “one time pad”. This approach might be old, but if done correctly, is actually impossible to break. Many coded messages rely on replacing letters with something else that represents them. Simple codes can be made where an individual letter is always replaced with the same “coded” letter or number or symbol. For example ROT13 is a type of code that does this. ROT13 takes the

26 letters of the English language alphabet and places half the letters in two rows. The letters are then swapped between the rows to encode them. So, for example, the word BEANZ becomes the word ORNAM. A However, systems like ROT13 are vulnerable. If you have a paragraph of ROT13 encoded text, even without knowing how ROT13 works, you can begin to work out what the letters might represent.

Looking for the most commonly reoccurring letters in the text we could guess that these might be the more common vowel letters, A,E,I,O,U. Then you might be able to spot some of the smaller 2 or 3 letter words like “an, on, it, the” etc.

Through a process of trial and error and guesswork you could definitely crack the code.

One time pads differ in that they create a system where each letter is encoded and turned into a number and this number is very unlikely to repeat for the same letter. This leads to a very secure code. One

time pads are a type of pre shared key, both the message sender and the recipient have the same one time pad and use this to encode and decode a message. As the shared one time pad contains the information needed to decode the message, as the name suggests, it should only ever be used once. If you used the same pad to encode and decode multiple messages, they could be cracked using comparison methods across the messages. There are different ways to generate and use one time pads but for ours we are going to begin by creating a list of randomly generated numbers between 1 and 100.

To do this we used two 10 sided dice. B We decided that the green die would represent the units of ten and the red die the single units, so rolling a 3 on green and a 4 on red gives the number 34. We decided that if we ever rolled 0 and 0 we would count this as 100. We rolled the dice lots of times and wrote each value into two lists so we had a pad for the message encoder and a pad for the recipient. You need

History

5

to have enough random numbers for the amount of letters in the message you want to encode. We wrote down our numbers in groups of 5 numbers as this makes it a bit easier to keep track.

To encode a message with a one time pad you first assign a number to each letter of the alphabet, so A =1, B=2, C=3, etc.

To practice, write out your plain text message you want to encode.

For example we used “Hey Beanz”.

Take the numeric value for each letter and add that to the next value in the one time pad list. So for example, the first letter of our plain text is H, this is 8 in the alphabet and we add this number to the first value on the pad, 84, which gives 92. We then repeat this for the next letter, E which is 5 in the alphabet and we add the next value in the pad, 60, giving 65 and so on.

Continue through the message until you have completed it.

You now have your plaintext encoded, this encoded message is sometimes referred to as your ciphertext. The ciphertext for “Hey Beanz” can be seen in the green oblong as reading 92, 65, 98, 33, 10, 65, 43, 25. C Note that within even this short message

we have some good examples of why this type of code is hard to crack. The letter E appears twice in the plaintext but in the ciphertext it ends up with totally different values. Similarly, we have the number 65 repeating in the ciphertext but when decoded it represents a totally different letter.

Once the message has been

A

passed to the recipient, they carefully work through the process in reverse, taking each number in turn and subtracting the corresponding number on the one time pad. If the one time pads have been kept totally secret and aren’t reused then this is a very secure method. Even if the cipher text is seen by others or read out loud the plain text message is still protected. b

B

C EDGE 2 EDGE MEDIA, UNSPLASH

History

6

BY CLARISSA LITTLER

Retro Browsers and the In previous issues, we talked about the small internet, about alternatives to the web, and also about the interesting communities that exist in these small spaces.

This time, though, we’ll talk a little bit more about the history of the web itself, how browsers have changed over the years, and why there are still people using some of this retro-style tech.

So to start, let’s make a distinction between the internet and the web. The “worldwide web”, as it used to be called back in the ‘90s and early ‘00s, is a particular

way of using the internet—a protocol, as it's called—that allows for links between pages. At this point, the web feels like it just is the internet: The web browsers and apps people mostly use on the internet, such as phones or a Chromebook you might use in school, are just thinly disguised webpages.

You might know web pages as things full of animation, games, chat windows, and endless scrolling. Back in the late 80s, when the web was first developed, it was rather different. Here’s a

A

screenshot of the very first web browser—named WorldWideWeb— developed by Tim Berners Lee’s research group, courtesy of CERN and the worldwide web consortium. A Looking at a browser like this is both familiar and strange. It has windows, and the web pages look like web pages although they’re very simple, but there are also things that are notably different.

There are no familiar “back” or “refresh” buttons, just menus that you navigate with keyboard shortcuts or the mouse. There are also no tabs. Those weren’t invented until the late ‘90s, by Adam Stiles with his SimulBrowse browser. Although, tabs weren’t actually mainstream until the ‘00s.

Back in 1990 when WorldWideWeb was introduced and was mostly used at universities a lot of people were using Unixbased computers that didn’t even have much of a graphical interface.

For them, there were browsers that existed in the command line, the first of which was called the Line Mode Browser, released just a few months after WorldWideWeb. B Another, similar, influential browser was Lynx. Lynx was released all the way back in 1992: here’s a screenshot of the Lynx browser visiting the very site of this magazine. C How was this possible from a browser from 1992? Well, would you believe that of all the browsers we’ve talked about the text-centric ones like Lynx and Line Mode Browser have lasted the longest?

Line Mode Browser hasn’t been updated since ‘06, but Lynx and another more modern console

7

Early Web based browser, w3m, are under active development with new major releases every year or two.

“But why?” is a reasonable question to ask. After all, just looking at the screenshot of the beanz site in Lynx doesn’t look particularly pretty. It’s slightly nicer in w3m but this still isn’t

C going to be anyone’s idea of exciting and stylish: D With browsers like these there are also no games, no video, and no chatting. So why would it matter to people to keep this archaic form of browsing working 30 years later?

There are a few reasons. The first is that it works great even when you have slow internet, which odds are pretty good some of you reading this do.

Modern web pages try to load huge amounts of JavaScript and preload tens or even hundreds of MBs of images even before

it starts displaying.

That works okay for some people but, for WIKIMEDIA COMMONS others, it makes the web almost unusable.

Similarly, sometimes people you can disable sites from running want to be able to surf the web JavaScript in most browsers, it’s from retro computers they’ve nice to use one that just can’t run restored or from intentionally code. low-power computers So, yes, there’s actually a whole like the rpi0. There’s big world of retro web browsing something just cool out there and it’s both really cool about being able to as a way to look at computer do that. history and as a thing to use for its Finally, there’s own sake. Take a plunge and surf, also privacy ‘90s style. b concerns: you might not want every web site you visit to just be able to run code on your computer, and while

B

D

8 Concepts

BY SIMON BATT

There's a Ram in my PC!

Don't forget to BAAAAAAAck up your data!

JOSHUA FULLER, UNSPLASH

If you’ve ever seen the inside of a computer, you’ve very likely noticed that there are absolutely no sheep stuffed in there. But if that’s true, why are people always talking about “ram” in their PC? When we mention rams in computing, we don’t mean our fluffy friends. It’s actually an acronym that stands for Random Access Memory, and it’s what helps our PCs run as fast as they do.

If you look inside of a PC, you’ll likely see either two or four long, thin slots. Some or all of them will have a long chip-like thing in it; it looks sort of like a flat, green chocolate bar. That’s the RAM, and it’s a lot less wooly than its animal counterpart.

Our computers need RAM because it acts as a workbench from which the PC can do things. When you want to load up a program, your PC takes data from your hard drive or solid state drive, then puts it on the RAM so you can use it.

The reason your PC does this is because RAM is quick­—really quick.

Your PC can read and write data on its RAM much faster than from a disk drive. As such, when you use your PC, every program and service is running on your RAM. So if RAM is so great, why don’t we just get rid of hard disk drives and solid state drives and just use RAM instead? Unfortunately, RAM is what really smart people call “volatile memory.” This kind of memory forgets everything that’s stored on it when no electricity passes through it.

This means that, if you did have a PC that only had RAM, it would immediately forget everything the moment you turned it off—not ideal.

That’s why our computers use a combination of both hard disk/solid state drives and RAM. The RAM handles all the stuff you’re doing right now, and does it quickly and efficiently. Meanwhile, the drive stores all the stuff you want to save after you turn the PC off.

As such, your computer is always passing data back and forth from the disk to the RAM. That’s why you lose all your progress in your game or programs when your PC turns off before you can save; the RAM didn’t have time to transfer your data to the storage drive and lost all your data once it lost power.

At the same time, because the storage drives are slower than RAM, it takes some time to load the data onto the RAM. If you’ve ever gotten impatient at a video game’s long loading times, it’s because it’s taking a while to grab all the stuff it needs from your storage drive and put it into the RAM. Sometimes, if you stuff too much data onto your RAM, it’ll offload some of it back onto the storage drive in a file called the “pagefile.” When this happens, your PC slows down as it has to transfer data back and forth from the pagefile. That’s why adding more RAM can speed up a PC, by giving it more room to handle your programs and avoiding the pagefile.

So, the next time you use a computer program, be sure to give thanks to the little sticks of RAM that help you get it running in the first place.

It may not be perfect, but it’s a lot better at running software than a fluffy sheep. b

If you live in a country that suffered a lot from the recent COVID-19 pandemic, you’ll know how much it rocked the world and how people had to stay indoors a lot more than usual. Fortunately, companies around the world made vaccines that could protect people from the nasty virus.

Unfortunately, some of the vaccines had to be kept in cold conditions to stop them from spoilage. We don’t mean shoving them in your fridge; we mean REALLY cold.

One vaccine, called Moderna, has to be stored between 5 and -13F. That’s about the same temperature as your freezer. Once it’s at its destination, it can sit in a fridge for 30 days before it spoils.

Another one, called Pfizer (pronounced ‘fai-zer’) is a really demanding vaccine. It needs to be kept at -76 to -112F during transit.

To put this in perspective, the coldest temperature ever recorded on Earth was -128.6F in Antarctica back in 1983. That temperature would make short work of a human, but the Pfizer vaccine

thinks it’s nice and cozy.

Of course, we have the technology to store things at really cold temperatures. The problems begin when you need to store those items and also move them from one place to another at the same time.

This is the challenge people had with moving these vaccines around, especially the Pfizer one.

The World Health Organization said that 50% of these vaccines deteriorate on the way to their destinations because of temperature problems.

Thankfully, this is where technology comes to save the day. It’d be hard for a human to sit with a crate of vaccines all day, constantly taking its temperature; however, we can get computers to do it for us instead.

Thats what Bosch did with its technology. It kitted out trucks with sensors that would keep track of the temperature of the vaccines within. These sensors then beam their data to an operations center, which keeps tabs of every temperature all day, every day.

That way, Bosch can make sure that the vaccines get to their destinations without any problems.

If a problem does happen, Bosch can spot it really early and recommend that the driver of the truck try something different.

The data is really important when the trucks have to deliver vaccines to hot countries like Chile, Peru and Colombia. The trucks will have to make the vaccines cold enough to counteract the sweltering heat outside.

At the same time, Bosch has to keep the data from being spied on. Bad people are keen to steal the vaccines so they can sell them on the black market for a lot of money, so Bosch has to keep the data safe from evil hands.

That’s what makes the world of the Internet of Things (IoT) so important. These little sensors are both keeping a close eye on the vaccines to ensure they reach their destination safe and sound while also protecting them from being stolen. Without these handy devices, we’d have a lot harder time getting anything done. b

WIKIPEDIA

9 Tech In Real Life

The Io(Lifesaving)T

BY SIMON BATT

10 Programming

BY CLARISSA LITTLER

c i s u M s g d n i n k e i a r F M r u o Y h t i W you should open a new solo Estuary session and then type

Does making music and videos with code sound interesting?

What about doing it with friends without needing anything more than a modern web browser?

(Unfortunately, you can’t use all of the retrobrowsers we discuss elsewhere in this issue.) If that sounds fun, then you should read on to learn more about Estuary.

The main Estuary website is estuary.mcmaster.ca and if you go there you should see something like A The first thing you should do is click on “solo mode” and you’ll see a new screen with six regions, panels, that are all able to run code separately from each other.

You pick the language to use by clicking on the dropdown menu above one of the panels. The different languages all do different multimedia things, but the three we’ll briefly introduce are MiniTidal, Punctual, and CineCer0. B Try selecting minitidal, typing s "bd*4" inside the panel, and then hitting the play button above the

panel. You should hear a simple steady beat of bass drum hits.

The s means “take a sequence of sounds and turn them into something that can be played”. The bd*4 part in between the quotation marks is the pattern itself. In this case, you can read it as “play four samples called ‘bd'” per cycle. Ah, cycle, that’s an important word here: a cycle is the basic unit of time in Tidal. It is, by default, a little more than two seconds. Tidal will fit the number of sound events you tell it to in each cycle, as fast or as slow as it needs to.

For example, if you type s "bd*8" instead you’ll get eight bass drum samples per cycle, played closer together. If you changed it to just two samples there’d be a lot more dead air between drum hits.

Now let’s make it more complicated, using square brackets [ ] to group events together.

Another thing we’re going to use is a tilde, ~, that represents silence, a rest or pause in the music. s "[~ bd*2] bd*4 ~ bd*8" Now, there’s a lot more samples than just bass drums. To see them,

!localview audiomap

You should see, then, a very very long list of samples. Roughly five hundred of them as of the time of writing this article.

That’s a very brief taste of music with MiniTidal, so let’s move on to graphics with Punctual. Don’t worry, though, there are more resources on learning Tidal linked in this article.

In a different panel, select punctual as the language and copy the following: tex "https://upload.wikimedia. org/wikipedia/commons/6/63/ Assassin_bug_(Rhynocoris_ iracundus)_with_bee_(Apis_ssp)_ prey.jpg" [fx,fy] >> video; rect [sin cps,0] [0.5,0.5] * [0.6,0.3,0.8] >> video; You should see a picture of a bug and a fuschia rectangle zipping back and forth on the screen. In fact, if you play a beat in MiniTidal you might notice that the rectangle and the beat are synced up. Here’s a more dynamic way to combine two things, where you have a circle and rectangle

LIBRARY OF CONGRESS

11

revealing the picture underneath.

up when the bass gets loud: C

pic << tex "https://upload. wikimedia.org/wikipedia/ commons/6/63/Assassin_bug_ (Rhynocoris_iracundus)_with_ bee_(Apis_ssp)_prey.jpg" [fx,fy];

[fx, (fx*fy*lo)**0.5, fy] >> video;

rect [sin 0.1,0] [0.3,0.3] * pic >> video; circle [sin 0.2, sin 0.3] 0.3*lo * pic >> video;

Finally, you can include videos with CineCer0 really easily: well, easily if you grab videos off of wikimedia commons, because unfortunately you can’t embed videos off of social media this way. You just paste the URL of the video into a CineCer0 panel inside quotation marks, like this

Even without pictures you can do tricks like audioreactive shaders, like the following code that lights

"https://upload.wikimedia.org/ wikipedia/commons/8/86/House_ wren_in_JBWR_(50171).webm"

You can only include one video per panel, but you can have multiple CineCer0 panels!

Finally, I promised that you can do this with friends. All you need to do is navigate to “Collaborate” instead of “Solo Mode” on the front page and create a new room. The room will be temporary, but you can make it last several hours, and you set a password to give your friends. Then, all they have to do is click on the Estuary room you made, enter the password, and then you can all work together. b

A

B

C

12 Project

BY TIM SLAVIN

e d Co

! r a C a

https://codeguppy.com/ code.html

One of the fun parts of software programming is typing a small amount of code into a code editor, running the software to check your output, and then tweaking the code and repeating this process.

It’s almost instant gratification.

In this project, we’ll create a car, some ground or background, and a sun. You’ll be able to run the code, and then tweak it. If you’re lucky, you’ll mess up the code so badly that you will have to start over.

(That’s often part of programming.)

To begin, go to the CodeGuppy. com website, log in or create an account, then go to their code workspace URL:

You should see a blank code workspace like this: A The code panel is on the left column and code output displays are 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) PLAY or not display (Stop) in the right side code output panel.

Now type or copy/ STOP paste this JavaScript code into the Code panel on the left side of the workspace.

// Background noStroke(); fill(180, 199, 231); rect(0, 0, 800, 500); fill(191, 144, 0); rect(0, 500, 800, 600); // Sun fill("yellow"); circle(750, 50, 150); stroke("yellow"); strokeWeight(6); line(480, 60, 561, 47); line(548, 224, 602, 172); line(740, 304, 747, 236); // Car stroke("black"); strokeWeight(1); fill(112, 173, 71); rect(175, 340, 223, 54); rect(108, 394, 362, 74); fill(132,60,12); circle(168, 468, 32); circle(408, 468, 32);

Click the Play button. Your code

workspace should look like this: B

ALEX ZABAVSKY, UNSPLASH

Let’s have some fun. We’ll turn the sun into a tomato (for real) and play with the car. See the block of code under the //Sun line that says fill(“yellow”)? That bit of code controls the color of the sun in the upper right of our CodeGuppy screen. There are many colors besides yellow. With your mouse, highlight the word yellow and type tomato instead.

Next, in the code block below the //Car line, see the rect(175, 340, 223, 54) line? This controls the shape of our car. rect is shorthand for rectangular. But which rectangular shape? Highlight the number 54 and change it to 44.

Press the Stop button then click the Play button to see the changes.

C Notice now one green rectangle floats above the other.

Now it’s easy to see what else you might tweak. And don’t worry too much about breaking things: simply copy or retype the code at the start of this article to begin again.

If you’re wondering what are the possible colors besides yellow and tomato, check out https://www. w3schools.com/colors/colors_ names.asp.

Want another neat thing to play with? Notice the difference between the fill(“yellow”) code

13

A

B

C

D and fill(180,199,231) code. Both fill a specified area with color. And one uses double quotes around a color word while the other uses three numbers separated by commas.

What happens if you change fill(180,199,231) to fill(“blue”)? D The three numbers separated by commas specify the intensity of a mix of red, green, and blue colors.

These three colors are referred to as an RGB (Red, Green, Blue) triplet. Each number has a possible

value from 0 to 255. Together, RGB triplets can make up to 16,777,216 different colors. If you want to learn more about possible RGB triplet combinations to drop into your code, check out https://www. rapidtables.com/web/color/ RGB_Color.html online.

While coding can be difficult, it also can be fun to experiment by asking “what if?” about different parts of your code. It’s an easy way to learn and often be surprised by what happens. Plus it’s neat to use code to see a computer do what you ask it to do. b

Concepts

14

BY CLARISSA LITTLER

Quantum Gates: The Next Logical Step In the last issue, we talked about how ordinary, non-quantum computers are built out of many, many logic gates. These logic gates defined operations on pairs of bits, like the and gate that follows this rule 1 and 1 = 1 0 and 1 = 0 1 and 0 = 0 0 and 0 = 0 They’re called logic gates because if you think of “1” as “true” and “0” as “false” then they look like logical ideas, like “a and b are true if both a and b are true”.

Combine enough of these logic gates together and you’ve got all the operations on numbers that a computer needs to function.

Now we get to the punchline of this three-part story: how quantum logic gates (things used to build up the operations needed for a quantum computer) are different from ordinary logic gates.

So recalling a couple of issues ago, when we covered the basic idea of quantum computers, we said that a quantum bit (qbit) held data that could be used to compute the probability the qbit returns 1 or 0 when read.

Now it’s finally time to talk about what that data value might be.

Surprise: it’s a point on a circle.

The next part is going to involve a little bit of mathematics: namely the Pythagorean theorem and the square root operation. If you haven’t seen these things before, that’s okay, you can just follow along to get the idea.

Mathematical Aside: To explain how “a wave that can be used to calculate probability”, which is what we’ve called qbits before, could be thought of as a point on a circle we need to use Pythagoras’s theorem.

So the Pythagorean theorem says that, for a circle of radius 1, if you take any point on the circle (x,y) then x multiplied by itself plus y multiplied by itself will always equal 1: x2 + y2 =1 Okay, well here’s the other fun little bit: when we talk about probability we generally deal with numbers that range from 0 to 1, where 1 means it’s 100% going to happen and 0 means 0% chance of it happening. If something is 50% likely, you’d write that as 0.5. This means that: An illustration of the Pythagorean Theorem

(probability the qbit is 0) + (probability the qbit is 1) = 1 Okay, if we compare this to the above we get something kinda funny. x^2 = probability the qbit is 0 y^2 = probability the qbit is 1 This means we can relate the points x and y to the probabilities.

That means that every single point on the circle corresponds to some possible qbit state. (My mathematical explanation is now over. You're welcome.)

If the data in a qbit is a point on a circle, rather than a 1 or a 0, then what is a qgate? Well, a quantum gate is just a rotation of the circle.

So to follow this, imagine drawing a point on the top of the circle.

In our understanding of points as qbit data, we know that this point means “the qbit is definitely 1”. If

15

we rotate it 45 degrees clockwise, then we get the new state “the qbit is equally likely to be 1 or 0”. If we rotate it 45 degrees further then we get “the qbit is definitely zero”.

Now, what starts to get impressive is when we add multiple qbits. If you have two qbits, then qgates become rotating spheres in three-dimensions. If you have three qbits then qgates become rotating...uhh...well we don’t have a good word for dimensions higher than three but they’re like spheres but with more coordinate axes. So while a single ordinary logic gate can just operate on a few ones and zeros at a time, quantum gates can do these big complicated things on higher-dimensional shapes you can’t even picture.

The other cool thing about quantum gates is that this means that you can always reverse the operation, the same way you’d reverse rotating a circle or a ball.

You just go back the other way.

You can’t do that with ordinary logic gates like the word and.

So all this being said, there’s one way you can start playing with these ideas and defining quantum gates and that’s with the Quantum JavaScript site: https:// quantumjavascript.app.

Here you can build really simple gates out of pieces and then see how they change the probabilities.

But, really, the main lesson from all this is that quantum gates are really fascinating. b HENNING KESSELHUT, UNSPLASH

16 Notebook

BY TIM SLAVIN

Why Don’t Food and Good Rhyme?

Do you know that the word piano comes from the Italian language or that garage comes from French? The English language is an amazing mix of words and pronunciations from other languages. This complexity makes English hard to learn for anyone, especially people with dyslexia.

Look at the different pronunciations of related words like heal and health or nation and nationality. Why do the same words sound different in each version? Even the letter A has many possible sounds, such as in apple, safe, alive, and wash. Is there an easier way to learn the English language? Sarah Blodgett, who created Noah Text, thought so.

Noah to the rescue Noah Text is a specialized text markup that highlights critical word patterns. These patterns include linguistic rimes and long vowels in early readers with one-syllable words such as, -al in pal, -ate in late, and -ight in night, as well as syllables and long vowels in more advanced texts such as calculate and highlight. A rime is a linguistic term that refers to the vowel going to the end of the nearest syllable.

The vowel in a rime is underlined, for example, ight in the word night.

Highlighting linguistic rimes and syllables helps readers recognize them in more complex words for better decoding. Syllables, syllable segmentation, linguistic rimes, and vowel sound awareness all enhance reading skills, and are featured in Noah Text.

Blodgett created Noah Text to help her son with his reading struggles. She found Dr. Miriam Cherkes-Julkowski, an expert in literacy, learning, and rime-based

reading instruction that uses logic to focus on language patterns instead of memorization.

Using a rime-based program, Sarah marked up one of her son’s reading books, breaking up any multi-syllable words he might struggle to understand. It worked.

Through her research, Sarah also found that reading is a relatively new human activity.

Our brains have not yet evolved a dedicated area to handle reading, Sarah says. “Instead, when we read, our brains use a primitive part that recognizes patterns. Babies use the same part of the brain to identify people visually. When learning to read, and for those who struggle to read, turning texts into more predictable visual patterns help us process texts."

Getting to Noah Noah Text can be used online by copying and then pasting text into the NoahText.com website for the advanced syllable/long vowel version. There’s also a web browser bookmark in the works that will convert web page text into more easily readable text.

The conversion software tool on the website is available with a free online account.

Noah Text is named after Noah Webster, an 18th century American whose Speller books taught generations of American kids how to spell and read.

Korean, Greek, and other languages use predictable patterns that make them easier to read than English. Noah Text provides the English language with similar predictability and ease of learning.

Noah Text helps readers notice and learn the common patterns in the English language. b

Errrr, I’m Not Sure How To Pronounce That Readers often guess at words they do not know, or they skip over them. Noah Text highlights common patterns in the English language that enable readers to learn through repetition of these patterns.

Here’s how Noah Text converts the word overcompensate— overcompensate—with the bolding and unbolding of syllables and long vowels underlined. The yellow highlight is added only to show how the er pattern appears in a multitude of English words.

The letter combination er is used in 84,092 English words, according to The Free Dictionary.

This combination is found in simple words like her and per but also complex words where the pattern might get in the way of the reader's understanding of the word.

Without Noah Text conversion, all parts of these words have equal weight. With bolding, unbolding, and underlines, readers get help to sound out and learn these more complex words.

Noah Text is a great example of a technology to help readers learn English, especially people with dyslexia who struggle to read. b

PATRICK TOMASSO, UNSPLASH

f o y r o t s i d H l r e o w Th e r u t u F

A lot of the stuff we see in the media these days uses computer animation. Movies use it sometimes, either to enhance real footage or to render an entire CGI-based movie.

Video games, too, depend on computer animation so you can run around and fight bad guys.

But have you ever wondered what the first-ever CGI animation looked like? We’re not talking about animation in general; that stuff has been around for a long time. Stuff like flipbooks gave us the illusion of movement long before CGI even entered the scene.

No, we’re talking about a full CGI video, rendered entirely on a computer. What did the first one look like and what did it show?

As it turns out, we actually do know what it was. Not only that, but you can watch it for yourself on YouTube.

So, what was this exciting video about? Well, it was about...a hand.

Not any hand either, but the left hand of one of the animators. A You can see it bend its fingers. It also shows what a digital heart valve would look like, as well as the first attempts at rendering a human face.

It's only six and a half minutes long and there’s nothing in it that looks very exciting. However, you have to remember that this

animation was made back in 1972, using PCs that were a lot, lot weaker than the ones we have today.

Around that time, if you wanted to buy a PC, you’ll likely get something like the Datapoint 2200. B This computer had an 8-bit CPU and 2K of RAM. No, not 2GB, but 2K of RAM. In comparison, 2GB is about 2097152K of RAM, so 2K is a huge step down.

The animation was likely made on beefier hardware than that, but it shows just how weak PCs were at the time. As such, this animation, despite being laughable in modern standards, was a miracle of computing back then. In fact, the animation was used in a film called “Futureworld” in 1976, because it looked so futuristic and sci-fi to people at the time. C You’ve probably noticed that we haven’t actually named the people who did this animation. That’s because we’re saving the best bit for last. The people who made the animation were Edwin Catmull D and Fred Parke. Edwin would go on to found Pixar—yes, the same Pixar that created the first-ever fully-CGI animated film, Toy Story.

As silly and basic as this animation looks, it was the seed that eventually grew into one of the biggest movie companies in the world. It just goes to show, the small things you do today may grow into giant opportunities in the future. b

17 History

A

BY SIMON BATT

B

C D

ALL IMAGES: WIKIPEDIA/WIKIMEDIA COMMONS

18 Electronics

BY JO HINCHCLIFFE

Let's Go Perfboarding We looked at soldering previously, an excellent skill to have and one that can open you up to many electronics kits and learning experiences. Like making a circuit board permanent by using a soldering prototyping board called a perfboard. A Perfboards are also known as vero boards, strip boards or proto boards.

There are a few variants in the way each is laid out, but the principles of use are similar. They are all tough boards with copper pads on one side and a regular grid of holes to fit electronics components through for soldering. Many components are designed with their leads or pins arranged at 0.1” or 2.54mm intervals,

so that is the spacing that most perfboards use.

One of the most common forms of perfboard has all the holes in a row connected via a continuous copper strip. This means that anything soldered to a single row is electrically connected. Other types of prototyping boards have every hole separate with a small copper pad for each hole. Until you add something connecting one hole to another, everything is electrically isolated. It’s common with this second type of board to use component leads and bits of wire to run around making the connections. It can look a little messy, but it still creates a solid circuit. Finally,

A

B

there are prototyping boards with different arrangements and groupings of connected holes. One style in particular emulates an electronics breadboard layout. This can be super handy if you have created a circuit on a breadboard and can transfer it to the permanent board using exactly the same layout. B When using the prototyping board with continual strips of copper connecting rows, you can create more complex circuits by cutting the copper tracks when required. You can make the cuts carefully using a variety of methods. The recommended tool is a track cutter, which is essentially a drill bit in a screwdriver handle that

19

you can place the tip of in a hole on a track and then twist back and forth to cut away the copper at that point.

Alternatively, people use a plain drill bit, or even carefully create cuts using a craft knife or rotary “dremel” type tool. C However you create a cut, it’s important that you clear all the copper in the gap as even a tiny piece of copper can make a short circuit.

It’s a good idea to visually inspect the trace using a magnifying glass.

Also, if you have a multimeter with a continuity mode, you can check that there is no connection between points on either side of the cut. Just select the continuity test mode on the multimeter and touch a probe to either side of the gap. If it doesn’t bleep, then you have no connection.

If your circuit design uses a microchip, you will need to cut a long gap in between the pins underneath the chip so that the opposing pins aren’t connected/shorted. Again, you can do this with a dremel type tool or carefully with a craft knife. D Using a strip layout perfboard, you also may want to create a link across the board that cannot be done just by using the tracks. For this you will use a jumper wire. This is very similar in principle to wiring between the points on a prototyping breadboard.

The easiest type of wire to use is one with a single solid core. Cut a piece to length and trim the sleeve off the ends to solder through the holes.

You can get quite creative with your routing. E, F Using a perfboard is very efficient.

C

E

D

F

We made this simple circuit with 5 LEDs, each with a currentlimiting resistor. All the resistors are connected to the positive strip and all the cathodes on the LEDs are connected to the negative strip. We only had to make cuts between each LED on the strip where the anode and the resistors are tied together. The circuits you can make this way are durable as most perfboards are made from either fibreglass or phenolic resin. For even more fun, don’t forget you can cut perfboard into interesting shapes and drill-mount holes etc., as long as you aren’t in a part of your design where it would damage the circuit. It’s a very versatile way to create circuits. b

20

r u o Y n o k r o e W m a G t r f o l h o S G e d o C h t i W

Projects and Puzzles Languages

BY TIM SLAVIN

Simple Code Golf Problems

Learning to code is only one of several key steps to become a good coder. Learning how to debug or fix code is another key step. A less obvious skill is the ability to code efficiently. And efficiently doesn’t just mean the basics: commenting your code when needed and reducing the number of steps and functions wherever possible. Efficient coding also includes finding ways to do things with much less code than the average programmer might realize.

Looking at efficiently written code is like looking at a welldesigned building or other object.

Every bit is simple, obvious, and tight with lots of clean white space.

No tall heavy chunks of code. Every file shows the same clean and carefully planned out code.

Achieving this takes lots of time and hard work. You also have to think in ways useful to coding, for example, in terms of cause and effect.

What is Code Golf?

Code golf is a fun way to gain some insights into how to write truly efficient code. As with golf, where the fewer strokes you have the better your score, with code

golf the less lines and characters of code in your program the better your score.

Code golf is a series of programming challenges that require coders to be efficient.

You write a program to solve the challenge. You also see the results of other coders, learn from their efforts, and improve your skills.

It’s a fun way to participate with a community of programmers.

You’ll also gain insights into programming languages you might not know because some languages work better for code golf than others. You’ll learn in depth about the order of operations, for example.

This is a guess on my part but code golf probably is most useful at the beginner level. More complicated code golf problems use techniques that are subtle and possibly violate the norms for any programming language. They might teach you bad habits for real coding.

Simple problems, however, might show a programmer ways to accomplish tasks they had not considered or known. Code golf might teach them lots of ways to reduce the size of their code and become more efficient programmers.

Here are two example problems to solve with Python to give you an idea how code golf works.

HELLO WORLD! The problem is truly simple: print “Hello World!” (without double quotes).

The solution: print("Hello World!")

SLEEP IN This more complicated problem, from the CodingBat. com site (see Learn More links, next page), shows how one solution in Python can be simplified into other solutions.

The problem: The parameter weekday is True if it is a weekday, and the parameter vacation is True if we are on vacation. We sleep in if it is not a weekday or we’re on vacation. Return True if we sleep in.

Write a function in Python to tell us if we can sleep in.

The traditional solution in Python defines a function sleep_in to test the two parameters, weekday and vacation: def sleep_in(weekday, vacation): if not weekday or vacation: return True else: return False The simplified one line solution defines a function sleep_in to return a value if it is not a weekday

21

or it is a vacation: def sleep_in(weekday, vacation): return(not weekday or vacation) This code golf problem uses the programming rules for True and False to determine if two combinations of parameters, weekday and vacation, output True or False. It also shows the potential limits of code golf by using one line. The one line syntax might not be considered optimal code in a Python program even if the code works.

Dang!

Another mulligan!

Learn More CODINGBAT Here is a great place to start with Java and Python problems.

Includes a box to type in your solution plus answers and link to help with relevant parts of each language. http://codingbat.com/

Ouch!

CODE GOLF (WIKIPEDIA) http://en.wikipedia.org/wiki/ Code_golf ANARCHY GOLF: ALL PROBLEMS Problems in many different languages. You can upload your solution for a score. http://golf.shinh.org/all.rb STACKEXCHANGE CODE GOLF These problems are considered off-topic but easily found with the code-golf tag. http://stackoverflow.com/ questions/tagged/code-golf http://codegolf.stackexchange. com/ WHAT CODE GOLF TAUGHT ME ABOUT PYTHON

By Louis Brandi, provides some insights into the strengths and limits of code golf. http://lbrandy.com/ blog/2008/09/what-code-golftaught-me-about-python/ b

COURTNEY COOK, UNSPLASH

22

e m i T e m a G e r It's e h w y r e x Ev o l b o R h t Wi

Programming Languages

BY TIM SLAVIN

Imagine a place where you can play almost any kind of game, by yourself or with friends. .

Roblox is a fun online game from Microsoft that allows you to play with friends as well as add interactivity to games you create.

It’s available through a website, phone and tablet apps, and Xbox.

Because it’s available on so many platforms, it’s become extremely popular in school yards, colleges, and wherever people hang out to play games. Plus you can create your own games with Lua, a real programming language that is fun and easy to learn.

As with any online game for kids, there are tools to help parents set up an account that protects privacy and reduces the chance of bullying or other unwelcome attention.

Roblox also is a fun way for parents and kids to play together and have a shared experience online. Especially if the child leads, with a parent watching and adding comments and ideas.

Roblox-ready The first step is to create a Roblox account. While it’s possible to sign up with a phone or tablet app or on Xbox, the website is easiest to configure after an account is created.

Go to Roblox.com and complete the sign up form. You’ll be asked to enter your birthdate and to create a username and password. Roblox then displays your avatar dashboard with a basic set of body, clothing, animations, and costumes. It’s fun and easy to dress your avatar. As you play games, you can find more costumes.

Once a Roblox account is set up, adjust the privacy settings to limit who can see your activity. Click the gear icon at the top right of the avatar dashboard then click the Settings option to display the My Settings page. Click the Privacy link on the left side to display a Privacy Settings form. Go through the form to set privacy limits for the account; for example, who can message and chat with the account.

23

You’ll also want to click the Security and Notification links on the left side of the My Settings page to configure your account. For example, you can use email codes to confirm your identity when using the account or set a PIN used to change account settings.

Want a free hat? On the My Settings page, the Account Info link, click the pencil icon to the right of your Email Address and add an address. When I added my address, I got a free green plaid hat for my avatar. Pretty sweet way to start playing.

With your Roblox account set up, what you do depends on what kind of game you’re in the mood to play.

There’s a discovery game called Scuba Diving at Quill Lake where you swim around and find objects

underwater. Or play Adopt Me! if you want to adopt cats and dogs.

Other popular games include Work at a Pizza Place, Theme Park Tycoon 2, and Jailbreak.

To find these or any games, type the name of a game in the Search box at the top of the Roblox website or click the Discover link, also at the top of the screen, to browse other games.

Can you spare a few Robux?

Robux is the optional in-game currency for Roblox. (You do not need it to play). While many games are free, some games sell passes. Scoring neat hats and gear for your avatar also requires Robux. Paid membership includes a Robux stipend. Members also can sell shirts, pants, and access

to places and get a percentage of the profit as Robux.

To buy Robux, and become a Premium member, on their website, click the gear icon at the top right of the screen and select Settings from the dropdown menu. Then click the Billing link on the left side. There are several membership options.

Currently, $4.99 USD a month gets you 450 Robux, $9.99 USD includes 1000 Robux, and $19.99 USD a month nets 2200 Robux a month.

But wait! There's more!

This article is the first in a series.

In future issues, we’ll show how to create games in Roblox, all things avatar, and games to try out. The online version of this article also includes helpful links about Roblox, game reviews, parental controls, and related topics. b

24

tidbitz

If You Were a Drop of Water, Where Would You Go? Created by Sam Learner, a data analyst, River Runner is an online 3D map that lets you plop a single drop of water anywhere in the United States to watch where it goes. The map shows just how interconnected water is in the US. It’s a great way to see how water, plastic, and pollution interact. Data is from the United States Geological Survey. b https://river-runner.samlearner.com/

Miracle on the Seine

Sanctuary!

Sanctuary!

Give it a rest, Steve.

A team of archaeologists and remotecontrolled robots have put together a video to demonstrate how the 674-year-old Notre Dame Cathedral in Paris will be restored after a devastating fire in April 2019. The first step was to secure the building because the fire damaged the interior and melted scaffolding from a previous restoration in progress.

The restoration is intended to last hundreds of years. b https://www.openculture.com/?p=1090893 https://youtu.be/-Zoq7HiAjcU ANDY HAY, FLICKR

Blast Off!

How would you like to create your very own space agency like NASA? The Mars Horizon game lets you build rockets and test them first with non-crewed missions then crewed missions. You start from the very beginning of your space race and work through all the detailed steps needed to launch a successful mission to Mars. b WWW.AUROCHDIGITAL.COM

https://www.aurochdigital.com/marshorizonvideogame https://www.nintendo.com/games/detail/mars-horizonswitch/

Through the Looking Glass Tired of the pandemic? Do you want to connect with people again? A giant circle near the Vilnius, Lithuania train station lets you wave to people in Lublin, Poland in real time through a mix of cameras, the internet, and circular screens. While you can’t step through this portal and magically travel from Vilnius to Lublin, you can make a magical connection to total strangers in another country. This visual bridge brings different people and communities together to rethink the idea of what connects us. It’s the result of a five-year project created by VILNIUS TECH and funded by the Benediktas Gylys Foundation. Best part? They plan to create more portals to connect cities. b https://www.govilnius.lt/media-news/vilnius-invites-residents-to-connect-through-a-portal https://portalcities.org/

HTTPS://WWW.GOVILNIUS.LT

25

26 Projects

BY JENNIFER NEWELL

Coming In Hot In the last issue we learned how to create a pixelated scene using Piskel and Scratch. Let's build on that by adding animated lava, and coding our work to make a scrolling background.

Part 1: Animated Lava First, we’ll make a simple block of lava on Piskel (https:// www.piskelapp.com/). We use the resize tool to create a 16 x 16 block. To make it look like lava, we will fill it in with orange.

Choose two more colors that are appropriate for lava and randomly add these colors into the image. A is an example of the first frame.

We want to create 3-5 similar images to form an animated lava image in Scratch. Look to the left of the drawing pad. You will see a smaller version of the frame above. Right-click to duplicate your work. Now modify the placement of each color. Repeat this process 2-5 times to make several frames as shown B: Four Frames of Lava To the right of the drawing pad on Piskel you will see an animation that rotates through all of your frames. You can adjust the speed (frames per second) on Piskel, but ultimately you will use Scratch to control the lava animation.

Download your work as an animated GIF and upload it into Scratch as a sprite. C In Scratch, the .gif file will initially appear as just one stationary image. However, we can click on the Costumes tab on the upper left of the Scratch window to see all four frames of our animation. D

We can animate the lava by having it “switch costumes” in an infinite loop as shown with the blocks of code below (try out different wait times until you are happy with the speed of the animation): E Part 2: Scrolling Dirt and Grass Now let’s use a block of pixelated dirt and grass (dirt-grass sprite) as shown in F to create a scene. We create the dirt similar to how we created the lava block in Piskel, however we start with brown and add in several hues of green toward the top (See the June issue of beanz).

Notice that we left blank space toward the middle. In the final stage of this project we will fill in this space with the lava sprite, but for now we will leave it empty.

We want this scene to scroll to the left such that when it is almost completely off the screen, it reappears on the right and continues on to the left again. To do this, we start by making sure the dirt-grass sprite always starts in the same position. In this case the sprite starts at (-181, -117). G To make a scrolling scene, we need to repeatedly move the sprite to the left. We can do this by putting a “move” block in a “forever loop”. The speed is controlled by the number of steps the sprite moves at a time. H If you run this code, you will find that Scratch automatically stops the dirt-grass sprite from scrolling before it is completely off the screen. To make a continually scrolling scene requires a couple more steps.

First, we need to duplicate the sprite and move the duplicate almost all the way off the screen on the right hand side. In our case, the x-coordinate of the duplicate is 446 units/pixels to the right of the original sprite. Next, we need to program the duplicate to start moving to the left when the green flag is clicked. This way, when the original sprite moves left, the duplicate will “follow” it so that the screen is always covered with a dirt/grass sprite.

Finally, we need both the original and the duplicate to move back to the far right side of the screen once they are almost completely off the screen on the left hand side. We first record the x-coordinate of the sprite when it is almost as far left as it can go. Then we use an “if” block to program it such that “if the x-coordinate is almost all the way off the screen on the left, move to the right side of the screen”. Make sure the y-coordinate stays the same the entire time. I If both the original and the duplicate dirt-grass sprites are programmed this way, we will have the following situation: • The original sprite spans the screen. The duplicate sprite starts out 446 units/pixels to the right (almost completely off the screen on the right-hand side).

• When the green flag is clicked, both sprites move left “forever” at the same speed.

• If the x-coordinate of either sprite goes left of -641, the entire sprite will reappear on the far right of the screen and then continue moving left again.

Part 3 The final stage of this project is to cover the empty space in the dirt-grass sprite with the lava sprite and program the lava to move along with the dirt-grass.

Since we made a duplicate of the

dirt-grass sprite, we will also need a duplicate of the lava sprite (so that we can fill the empty space in both sprites).

Programming the lava to scroll left along with the dirt-grass sprite is a bit tricky. The idea is as follows in the two steps below: 1. Place the dirt-grass sprite so that it spans the screen (-181, -117). Next, create a variable to record the x-coordinate of the dirt-grass sprite. We named the variable dirtX. J 2. Place the lava so that it covers the empty space in the dirt-grass sprite. Calculate the distance between the x-coordinate of the dirt-grass sprite and the x-coordinate of the lava sprite. Program the lava sprite to always maintain this same distance. K Now the x-coordinate of the lava is always the same distance (in this case 296) away from the x-coordinate of the dirt-grass. As the dirt-grass sprite moves left, the lava will move left so as to maintain this distance.

We repeat this same logic for the duplicate of the dirt-grass sprite and the corresponding duplicate lava sprite.

Complete code for the original dirt-grass sprite: L Complete code for the duplicate dirt-grass sprite: M Complete code for each lava block: N Complete Scrolling Scene (dirt-grass and lava sprites): O When we are finished, all the sprites will move to the left until they are almost completely off the screen, and return to the right side of the screen over and over for an animated scrolling effect.

You can take a look inside this project at https://scratch.mit. edu/projects/530299389/editor/ and modify it to work with a scrolling scene of your own. b

27

B

G

A I

H J C D

K L

M

E

N F O

Parents and Teachers

28

BY TIM MCGUIGAN

The Game of Design I stood next to an 8th-grade student at the bank of 3D printers in my room watching her design turn into a misprint. It was clear to me before she printed it that her design would need a few miracles. She had designed it with too many 90-degree overhangs and small, thin arches; however, I encouraged her to print it anyway.

When the spaghetti coming out of the extruder became too entangled, I stopped the print. She was laughing, but also a little upset.

When we talked it over, she revealed to me that the process left her feeling a little defeated.

I tried to encourage her, though, by telling her that design is just like a game, and each failed design is another opportunity to play.

I can understand defeated feelings when a print goes bad.

Watching designs go awry after investing significant time is never easy.

That said, framing design as a game and failure as an opportunity are powerful tools to help young designers. Young people too often internalize failure, but when it comes to the world of play, they can be more resilient.

One possible reason is that humans by nature are gameplayers. Some even argue that playing games is essential to

what it means to be human. In his 1938 book, Homo Ludens, Johan Huizinga defines games as an essential part of civilization and describes how play can be indistinct from culture. A judge wearing a wig while on the bench

is an example of role play and costume play in a courtroom. When an artist crafts whimsical sculptures, they play on people’s expectations in the game of art.

According to Huizinga, play exists as a part of our daily lives, but not everything is play. It has a few necessary

requirements.

To be play, it must be free, it must not be “real life”, and play must create order by the end of the game. Similar to law or art,

29

or failure. However, like many board games, design is a game meant to be played over and over again. When a 3D print turns to spaghetti on the build-plate or a prototype falls flat, designers start another iteration of the

game hoping for better design is a type of game to be played by the designer.

This type of thinking around design can lead to interesting results.

Play arises in design when the designer brainstorms fanciful solutions to a problem or when a “turn” ends in either success

results.

When the Design Thinking process is framed as a game to be played, I find my students respond with less self-criticism and bounce back faster. Like Monopoly, Sorry, or Clue, each time you begin is another opportunity for a win. This can be helpful with the sometimes fraught process of 3D design

and printing. While a bad print is frequently an obstacle my students encounter, they also run into issues like ideation freeze or difficulty empathizing with the user.

During a recent project-based lesson designing products to help stem the spread of the novel Coronavirus, I encouraged my students to move fast and follow an idea all the way to a prototype.

If it didn’t work out, they could always start the game over. After all, design is just a game.

The students who thrived in this activity were open to this different type of thinking. Games can loosen up what can be a stressful process because they are fun and the stakes are low.

One of my students even noted that “Back to the drawing board” is the sound of a new game of design just beginning. In such a fun and playful environment, even messy misprints no longer seem like a big deal. b

BRETT JORDAN, UNSPLASH

“The best way to predict the future is to implement it."

–David Heinmeier Hansson

Thank you for reading this issue of beanz !

Check out the links below to read stories from this issue online with links to learn more.

Be a Good Digital Citizen https://beanzmag.com/ digital-citizenship

Code a Car! https://beanzmag.com/ codeguppy-car-project

Unbreakable! https://beanzmag.com/ random-number-crypto

Quantum Gates: The Next Logical Step https://beanzmag.com/ logic-gates-quantum

Retro Browsers and the Early Web https://beanzmag.com/ old-web-browsers There's a Ram in My PC! https://beanzmag.com/ why-pc-ram The Io (Lifesaving) T https://beanzmag.com/ iot-covid-vaccines Making Music With Your Friends https://beanzmag.com/ estuary-coding-site

Why Don't Food and Good Rhyme? https://beanzmag.com/ noah-text-dyslexia

Work On Your Short Game With Code Golf https://beanzmag.com/ code-golf It's Game Time Everywhere With Roblox https://beanzmag.com/ roblox-getting-started tidbitz https://beanzmag.com/ august-2021-news-wire

The History of Futureworld https://beanzmag.com/ first-3d-rendered-movie

Coming In Hot https://beanzmag.com/ create-lava-piskel

Let's Go Perfboarding https://beanzmag.com/ create-simple-electronic-circuit

The Game of Design https://beanzmag.com/ the-game-of-design ibe! ubscr s s s s s Ss

https://beanzmag.com/subscribe