CS 105 - Understanding Our Algorithmic World

Goals

• Learn to use conditionals to change execution
• Use reporters to compute new values
• Get more practice making blocks

Prerequisite

There is no starter code for this exercise, so go ahead and visit https://snap.berkeley.edu/snap/snap.html and make sure you are logged in.

Objective

Our goal is to make some (simplistic) generative art. The results will largely just be a random collection of colored lines, but hopefully you will find it somewhat aesthetically interesting (my son thought it looked pretty cool, but he's nine, so take that as you will).

Composing a predicate

The first thing that we are going to do is to build a predicate that will tell us if the sprite is on the stage or not. We will build up to this in stages.

Test the right edge of the stage

The first thing we will do is to build up a simple test to see if the sprite is to the left or the right of the right edge of the stage. We need two pieces of information: the x position of the sprite and the x position of the right edge of the stage.

We already have a block that tells us the x position of the sprite: .

To get the position of the right of the stage, we need to work a little harder. There is a block I have been calling th "X of Y" block. You will find it in the Sensing palette. You will see that it initialy looks like it has something to do with costumes: . It allows us to check any property of the sprites or the stage. In the right hand input, select 'Stage'. Then, on the left input, select 'right' (you must do it in that order or the 'right' option won't be there).

Now, we want to check if the x position of the sprite is less than the right side of the stage. In the Operators palette, you will find the less than block: . Note that it is a predicate block because it will report a value that is True or False. Use it to express this relationship.

We can check the value of the block by clicking on it. Click on it now, and it should say True. Drag the sprite until the tip is just off stage. Click on the block again, and it should say False.

Write expressions for the other three sides

Once you have the right side test working, build expressions for the other three sides. Keep them separate until you have tested each one.

Testing the other three sides is a little harder, because you can't drag just the tip of the sprite off screen in the other three directions -- at least not when it is facing the right. There are a couple of ways to test this. You could use the movement blocks to position the sprite on and offscreen directly. Or you could change the direction the sprite is facing so you can do the quick drag tests.

Write compound statements

What we really want is an expression that tells us the sprite is on the stage. We know the sprite is on the stage if it's x position is less than the right edge AND it is greater than the left edge AND the y position is less than the top edge AND it is greater than the bottom edge.

I capitalized the ANDs to highlight the logical operator we want to use to combine these expressions together. You will find the AND block ()in the Operators palette.

To combine the four expressions together, you will need three blocks.

Test with your sprite again to make sure it works.

Make a new block

The new expression should work, but would be unwieldy to use in your code and it would be difficult for others to quickly tell what they were looking at. Abstraction to the rescue!

Create a new block in the Sensing palette. Make sure it is a predicate and call it "on stage?". The question mark isn't required, but it provides further hints to the reader that this is a Boolean predicate.

When the editor comes up, notice that has the already in place for you (if it doesn't, you didn't chose "predicate" in the last step, click "Cancel" and try again).

Drag your Boolean expression into the input of the

Click "OK" and then test your new predicate block.

Get the Sprite to run around the screen

Our next goal is to use our new predicate to make the sprite run around the stage without leaving view.

Note that there is a block "if on edge, bounce" that does a version of the behavior already, but we are going to ignore it for the time being

Bounce off the right hand wall

Make sure that the sprite is facing 90 degrees (straight right) first.

We are going to use the "repeat until" , which repeats the enclosed commands until the input predicate is true.

Put a inside of the loop. You can leave the steps at 10.

We want the sprite to stop moving forward if it leaves the screen, so we can't use our new block directly since that is True while the sprite is on stage and False when it isn't, which is the opposite behavior from the one we want.

Find the NOT block () in the Operators palette to invert the value of your custom predicate.

If you run this script, the sprite should drive forward until the tip leaves the stage, at which point it will stop.

But we want bouncing! (well, at least I do, I can't speak for you...)

Add a after the loop that moves the sprite backwards by the amount it was moving forward (i.e., by -10 if you kept the default 10). This backs the sprite back up so it is back on stage.

Duplicate your script (right click on it and select "duplicate") and attach the second copy under the first. Make all of the positive values negative and all of the negative values positive. It should look like this:

If you click on the script, the sprite should run forward until it hits the right hand wall, and then run backwards until it hits the left hand wall. If you put a forever block around it, it will bounce back and forth between the two walls.

Getting a bit random

Okay, so I would classify that as momentarily satisfying. Let's make it better. Rather than just having the sprite backup until it hits the other wall, let's have it turn in some randomly chosen other direction and head off that way.

Get rid of second and the final . You should now have something that looks like this:

If you run this one, the sprite will run up to the wall and then repeatedly smash itself into it. To keep that from happening, add a . if you leave the default 15 degrees in place, the sprite should run to the wall and then trace around the periphery of the stage. Why is that? Spend a moment thinking about it and make sure you understand what is going on before you move on. If you can't figure it out, ask!

This is more interesting than the back and forth, but I promised randomness. If you look in the Operators palette, you will find the . This reporter will pick a random number between any two that you input. Every time it is activated, it will give you a new random number.

Use the random number block for the angle of the turn. To get the full range of possible angles, we want the range to be from 0 to 360. However, 0 and 360 are both the same, and neither turns the sprite at all. So make your range between 1 and 359.

Now when you run the script, the sprite should bounce all over the place like a superball in an empty carpark.

Art time!

Put the pen down. The sprite will now draw a chaotic path back and forth across the stage. This is a little scribbly looking, but I think we are starting to get something interesting.

Formalize our script

It is time to clean up a bit so we are ready for the next bit.

Add a to the start of the script. Before the sprite starts zooming around, clear the stage and put the pen down.

Adding color

To make this more interesting, we are going to add some color. You can experiment with this a little bit before moving on. Go to the Pen palette and find the . Click on the color swatch to pick a color and then click the block to change the pen's color. As the sprite zips around, it is gradually filling in the stage, and changing the color makes some interesting patterns.

We want to add this to our script however.

Before the blocks that move the sprite, set the color to something other than black or gray. Then, inside of the repeat until block, use to change the hue of the pen by 1. The pen should now start cycling through the colors of the rainbow as the sprite moves. To make it look better, set the pen size to be a larger number, like 8 (add this to your script as well).

What I will be looking for

• There should be a new predicate that correctly indicates when the sprite is on or off stage
• When the user clicks the , the stage should clear, and the sprite should start drawing colored lines and bouncing randomly around the stage
• The sprite should run until it hits a wall and then turn some random angle and set out in the new direction
• The color should change as the sprite moves

Submitting

Share the project using the instructions from exercise 1.

Visit the exercise page on Canvas to submit the URL.