computer science

Programming fundamentals with Snap, pt. 1 (40 points, Due 04/09/2020 at 11:59 pm)

What is Snap? Snap is a visual, drag-and-drop programming language. It serves as an easy medium for students to get a deeper understanding of core computer science concepts.

How to access Snap? Snap is accessible through your browser: ​https://snap.berkeley.edu/ You do not need to install any special programs to run snap. Just open the above-mentioned link in any browser (preferably Google Chrome or Mozilla Firefox) and you should be good to go. Then click on the “Run Snap Now!” button at the top of the screen. Although not necessary, we recommend that you create an account on “​Snap! Cloud​” so that you can save your projects easily and access them wherever you want.

Saving with a Snap Cloud account - For creating an account - Click on the “cloud” icon on the top left-hand corner of the snap palette and hit the signup button. You should see the following form -

It is suggested that you use your ​ucsd.edu​ account to sign up for this. Fill in your details and click on OK. Then click on the cloud icon again and login into your newly created snap account. PS - Make sure you verify the email account that you used to signup for the cloud account otherwise your account, as well as any saved projects, will be deleted in 3 days.

Saving without a Snap Cloud account If you do not want to create an account on the “​Snap! Cloud​” then you can export your project as an XML file and save it onto your computer locally. To export your project click on the file menu and select the “​Export Project…​” option. This will let you save your work in a “​.XML​” file format which you’ll be finally uploading to Canvas.

Where can you learn the basics of Snap? There is a PDF tutorial for Snap: https://snap.berkeley.edu/SnapManual.pdf Take a look at all the example projects on the front page. Snap might look simple but you can get interesting things done - ​https://snap.berkeley.edu/#examples

For the purpose of this lab assignment, we will be covering the following topics:

1. Booleans 2. Conditionals 3. Drawing and reacting to user input 4. Repeat blocks

Booleans, Conditionals, and repeat blocks are some of the primitive basic blocks of programming and it is imperative that you acquaint yourselves with these. In addition to that, since Snap uses visual cues to show you the output of your code, we take a look the simplest ways of drawing things on the Snap stage.

LET’S GET STARTED. Your tasks are in red. Complete all of the red tasks to get full credit. We’ll start with “​Booleans​” first as it is the easiest concept to understand.

Boolean : Definition​ - A boolean is a data type that can result in only two possible values - TRUE or FALSE Some examples of boolean expressions are -

● 10 < 9 ( FALSE) ● 10 > 9 ( TRUE) ● 10 > 100 ( FALSE)

Implementation in Snap! - ​You can implement boolean expressions in Snap! Using the operator palette.

Drag the comparison operators(>, =, <) and the boolean operators (AND, OR, NOT) in the scripting area and try to play around with different scenarios.

You can check the result by simply clicking on one of the green colored expressions.

Your Task (5 points): ​Create two boolean expressions. Each expression should use an ​AND block, an ​OR ​block, and a ​NOT ​block. The first expression should evaluate to ​TRUE​, and the second expression should evaluate to ​FALSE​.

Conditionals : Definition​ - Conditional expressions/statements ​perform different computations or actions depending on whether a programmer-specified boolean​ ​condition evaluates to true or false. In simple terms, conditional expressions are used to perform different actions for different decisions. Implementation​ - You’ll find the conditional expressions by clicking on Control in the palette.

You’ll see two conditional conditional blocks there - ​if​ block and the ​if-else​ block Simply drag them onto the scripting area and try to place some boolean expression inside the if condition. One example is shown below -

You can try and put different commands in the if-else “E” shaped block and play around with it. In the above example, I have used the ​move​ block from ‘Motion’ and the ​say​ block from ‘Looks’ Notice that since (10 < 9) is false, the statement inside else get executed and our sprite says - “Executing else statement”

Your Task (5 points)​: Create an if block that does the following: ● If the sprite is touching the edge, move to position (x=0, y=0). Point in a random direction ● Otherwise, move forward 10 steps

ASIDE - HAT BLOCKS

The following blocks in Snap are called Hat blocks because they resemble the shape of a hat. These blocks are primarily used to ​start the execution of your program based on some user input​. These blocks will come in handy for Part 4 of the lab assignment and will be used in the homework assignment as well.

Drawing on the workspace Before we get to repeat blocks let’s first learn how to write/draw on the stage. Writing/Drawing on the stage in Snap is quite similar as to how you do it in your day-to-day life. You first put your pen down on a piece of paper, you draw the desired thing and then you lift the pen up. This is exactly how you draw things in Snap as well. Drawing can be easily achieved by using pen palette.

● Click on ‘select pen color to’ and choose any color ● When you want the sprite to act as a pen, use the block - ‘​pen down​’ ● When you want to stop writing on the screen, use the block - ‘​pen up​’

A simple example of drawing something on the screen is given below :

Your Task (10 points): ​Create a block that does the following when the green flag is clicked:

1. Check if the pen is down a. If the pen is down, move forward 10 steps and pick the pen up b. Otherwise, say “putting the pen down” and put the pen down

Now that you know how to draw on the stage let’s get back to repeat blocks.

Repeat Block : Definition​ -​ Repeat blocks are used to execute a set of statements repeatedly until a particular condition is satisfied. Let’s take a look at a simple block that helps us execute a set of statements repeatedly up to a certain number of times. It is called the ​Repeat block​. ​Blocks held inside this block will loop a given amount of times, before allowing the script to continue. Let’s take a look at a simple example in Snap: Suppose we want to make a square on our stage. The simplest way to do it would be something like this :

Can you see the redundancy in the above code block? We are calling the same move block and the same turn block again and again. Try this on your machines and see what you get on the screen. The repeat block will help us simplify this code block by not having to call the repeated statements again and again. With the help of the repeat block the above code can be written as :

You just pass in how many times you want the repeat block to execute the statements inside of it. Therefore, the repeat block is also sometimes called a repeat-N block where N is the number of times you want it to repeat. Do you see how our code block size was reduced and how the block became even more readable? Now imagine if I were to use the first logic but had to draw 2 such squares. I would have to repeat those instructions 8 times with one instruction in between and change the x-coordinates of the second square (​Can you guess why?​) The basic solution would look something like this:

Do you see the problem here? For every new square, we are adding 4 blocks. Do you think we can simplify this with the help of repeat blocks? The answer is YES! We will use two repeat blocks to help us out here. One repeat block will take care of drawing the squares and the second repeat block will take care of repeating the first repeat block resulting in multiple squares. This practice is called nesting. Stop for a second and think about it. This is an important concept that you will see in the later assignments as well. If you still have doubts with respect to this, please feel emails the instructor or TA.

Let’s break down the problem -

● The first repeat block will take care of drawing a single square. The code blocks for that would look something like this -

● The second repeat block will take care of drawing multiple squares by calling the first repeat block. The block at the top decides how many squares should be drawn on the stage. It does not matter whether you want to draw 10, 15 or even a 1000 squares your code size remains the same. All you need to do is change the “N” in the topmost repeat-N block. Try changing the N value in the outer repeat block and see what happens.

Your Task (20 points):

1. Write a loop that draws two rectangles. Each rectangle should have a width of 25 and a height 50. The rectangles should be right next to each other.

2. Put this block inside another loop that draws a bunch of rectangle pairs. So if I run that loop 5 times, it will give me 5 rectangle pairs for 10 total rectangles that are all right next to each other.

The two pictures below give an illustration of what we want for each part. Hint: ​You can draw the rectangle by using a combination of forward and turns, or you can simply increase/decrease the x and y coordinates to trace a rectangle.

Submission and Grading Save your Snap workspace as an XML file and submit this XML file on Canvas. ​To export your project, click on the file menu and click on “Export project...”. Choose a location on your computer to save the file and then upload the file on Canvas. Do not submit any pictures or screenshots. Do not submit a writeup with embedded images. Do not submit more than one file. You will love 10% of your grade if you submit anything other than a single XML file. If you are unsure of what to submit, ask me.

FUN FACT - Done with the lab? Want to explore Snap more? How about some stage and sprite customizations? Do you know that you can customize the sprite and stage according to your taste? To play around with customizations. Select a new sprite costume for your workspace. Click on the ​file menu​ and then select “​Costumes…​”. Choose a funny sprite costume. You can even create your own. Do the same things with your stage background as well. Select the stage from the lower-right hand corner and then click on the file menu to import new backgrounds. Be creative!