background check

How do you get the background to move in Snap? How do you get trees or rocks or buildings to move when your hero goes across the stage? The quick answer is, you don’t. The stage doesn’t move. So how do you have moving tress, rocks, or buildings?  You make them sprites.

Making something a sprite doesn’t move it though, you need a script.  You also need to do some things outside of the script to ensure your sprites do what you want.  First of all, make sure that your sprite can only face one direction.  There are three buttons at the top that control the direction(s) your sprite can face.  Make sure to click the bottom one.That arrow pointing to the right means that the sprite can only point one way, and that’s the way the costume points by default.

Next, make sure the Draggable box is unchecked.  That keeps the player from moving your sprite around.

Now you’re ready for your script.  The important principle here is that when your hero moves right, your background sprites scroll to the left.  If you have a “forever” level, they need to also disappear and reappear when they get to the edge.  Scrolling is perfect for a custom block because you’re going to have more than one background sprite and you can reuse the same code with different speeds for the different sprites.   Sprites that are intended to be closer to the viewer move faster (and are generally lower on the screen) than sprites farther away.

Here is code for a sprite scrolling left.  Note that like any other code, it’s only one possible way,  not the only way.This allows you to plug in two parameters, the speed and the height.

Here, kitty-kitty-kitty

I have a platform game.  It doesn’t have a game name yet; the file name is CatStuff and it’s a cat and a zoomba (kinda like a  cross between a trademarked robot vacuum cleaner and a drone).  I have some very cool code in my pocket for this game.  Jumping.  for example.

In Snap, you animate by changing costume and moving the sprite. My cat has 12 costumes—eight walking and four jumping.  Walking animation is pretty simple.  You cycle through the costumes and change the x-coordinate by an amount.  depending on how fast you want to move.  Jumping involves the y-coordinate as well and you have to do both at the same time.  It’s tricky.  Here’s my code to walk right.

You see the variable for the number of steps to move.  That can be set for all the walking the cat does (and it figures into jumping too) in one place.  That’s the point of having it there.  -240 and 240 are magic numbers in Snap as they are the farthest left and right x-coordinates on the standard stage.

Now for jumping.  Because jumping is not an even process, I couldn’t easily abstract it into a loop like I did walking.  It’s long messy code.  I don’t have comments in the code I’m posting here because it makes it difficult to share the images neatly.You’ll notice there’s an if-else at the bottom.  This is to deal with repeating presses of the space bar that don’t resolve fluidly.  The cat will fall if too high and if somehow it gets below ground, it’ll pop back up.   That’s an in-case because I’ve not observed it, but it is theoretically possible.

Jumping is faster than walking but not twice as fast and I wanted a finagle factor so there’s a place to set one.  I’m math-impaired (really) so my formulas aren’t always mathematically sound.  They work for the game though.

Next time, I’ll talk about scrolling the scenery.

Itsy-Bitsy Webspinner

Before Pong we had to do a nursery rhyme. With animation, not simply a storyboard with text.  In Snap, the main way to animate is to change the sprite’s costume.  There are two costume-switching blocks. These are in the Looks section.  One is which changes to the next costume in the set of costumes loaded for that particular sprite. The other iswhich allows the coder to choose which of the loaded costumes to switch to at that point in the code.

Animation also often involves movement from one position on the screen to another and there are two blocks for that, too.  (well, several actually, but two that are useful in animation).  These are found in the Motion section and are  and Both of these take numbers or variables as parameters in the little ovals that I left blank.

There was a rubric for the nursery rhyme.  Students can earn up to 20 points for their project. Here is a screenshot of my nursery rhyme.You can see it here.  Assets are from clker.com except the background (included with Snap) and the waterspout (created in GIMP).  The text sprite was also done in GIMP.  Most assets were modded in some way—either to make a second costume or (in the case of the sun) to make the text sprite more readable.

Apparently, Unit 3 is a “platform game” and I don’t even like those (except maybe Cosmo’s Cosmic Adventure). Watch this space for more exciting Snap stuff as I figure out what kind of platform game I’m going to create and how it will work.

pong, baseball-style

Ever had one of those days when your IDE decides to rebel? Today was that day for me in Snap and what it did was lost several of the blocks in the Variables category that I needed to do my Pong.  Namely, I lost the ability to set variables and the ability to change them.  These were the blocks I lost.This meant I couldn’t track the score or change the speed of the ball (the particular things I was attempting to do when I noticed the blocks had gone missing from the palette).  This was highly annoying.

About all I could do was open another Snap in another browser window and rebuild my code.  Because exporting to XML and importing back into Snap brought the anemic palette with me.

It took a long time, as I was mostly finished, too.  I was struggling with reflections and had finally figured them out (including how to apply  what I think is called “English”).  And I was to the part of putting in sounds.  I got all my sounds from freesound.org which is searchable.

Of course my Pong is baseball-themed—what else would you expect? I use sprites for all the edges because I know how to easily test for that and play a sound when sprites touch (and I heard there was a glitch with other kinds of detection and rather than explore them, I figured I’d be lazy).  I don’t know if my sprites need to be as big as I make them, but I’ve noticed that size does not equate to pixels, but to “steps” and (again) I’m too lazy to figure it out.

On the off-chance someone messes with my field, when the green flag is clicked, I put things in their places.  I uncheck the box at the top of each sprite for draggability but that might not stop someone who is determined.  Here’s a screenshot of the pregame.
You can see it here.  Don’t know that I’m off hiatus, but I may be.

Hiatus

This blog is on hiatus due to Harvey.  I’m plugging away at Pong (working on how to get my ball to reflect), but sporadically due to things like lines at the grocery store to get essentials that I thought we had a sufficiency of (but was, apparently, mistaken).

I am safe and dry, but have friends in need of help.  Also I plan to donate blood this week if the center is open.  I’ll be back with Pong as soon as I am able.

Prayers and good thoughts are welcome, but donations are even moreso. Please, use Charity Navigator if you are unsure of where to give as they will help you find the places where your donations go the furthest.

repeat after me (kaleidoscope)

No, Pong is not the next Snap project—a kaleidoscope is.  Here is the example of the kind of thing they mean by a kaleidoscope.

Four sprites moving in synchrony.  This example was presented as you see it—in .gif format.  No clues on how to make one like it except some platitudes. “You will need four sprites.” Well no shaving cream, Sherlock! “The easiest way to create three more is to duplicate the one you have.” You mean there are other ways?  The only way I could figure out to make more sprites without cracking the manual (there is one) is by right-clicking the existing sprite and clicking duplicate.  That also duplicates the code.  So I did break down and look at the manual.

It turns out that green flag is at the top of the stage.  Quick peeky-see at the names of all the areas on the Snap screen—from the actual homework that I actually did that had the actual kaleidoscope program assigned. Here’s that picture.

See the flag?  When you click that, it counts for all the sprites that have that block of code so you can start …. say, four sprites, and have them do synchronous stuff. This is what I came up with.  It is similar, but different, you can look at the code by exiting full-screen mode.  I think that it’s more of the sort of thing I think of as kaleidoscopic.  I think the color should be the same for all sprites but change over time.

Now, I’m ready for Pong.  Well, no, that’s not right, now the next major project i turn in is Pong.  I’ll probably do some other things in the meanwhile.  Pong has a rubric. For those who don’t know, a rubric is a scoring chart that lists aspects of my program and how many points each is worth.  Everything from “Players can control paddles with required keys” to “Program is well-documented and exhibits good style.” Whoa, documented? I don’t think I saw comment blocks in Snap (not that I was looking, mind you).  I’m usually adequate at commenting. I hope that’s good enough for my grader. I guess I’ll find out.

Wish me luck!

It’s a snap!

Snap is a programming language that is intended to teach programming concepts without the pesky need to learn syntax.  If you’ve ever worked with Legos, K’nex, Erector or other component systems, it’s a similar concept.  Sounds easy, right?  It’s harder than it looks.

Here’s the screenshot of Snap, which can be run entirely online.The area on the left is the set of blocks you can pick from; at the top there are eight options for sets of blocks you can have displayed there.  The default is the first one, Motion.

So, when I loaded Snap for the first time, I did what any respectable programmer would do—I set about writing a “Hello, world” program in Snap.  Oh, my!  Where to begin.  Well, you need to start the program and you need to “say” the text “Hello, world!” and you need to end the program.  Well it turns out the start and end stuff is under Control.  The stuff to say things is under Looks.  And the stuff to tell it, no, you can stop saying it already (forever is an option but ewww!) is under Controls too but the condition you need to test is under Sensing.

After fiddling around with it, I discovered if you only say “Hello, world!” and end, it disappears before the user even is aware it was said.  Not good. There are options. You can set a duration or you can set until an event. I chose an event and the event I chose was a mouse-click.  Here is my version of “Hello, world!” in Snap.Next up. Pong.  Yes, you read that right.  I’m going to be a teaching assistant for a school in Hillsboro, North Dakota (remotely) and I’ll be introducing high school students to programming through Snap and then Python. So for the next while, you’ll be reading more about TEALS than FreeCodeCamp.

TEALS (Technology Education and Literacy in Schools) is the program through which I’m lucky enough to get to reach out and teach the next generation.  I have five(!) kids and of them, only one did any amount of coding (and that was a phase—he’s becoming a paralegal). This is my way of sharing my passion.

codePen, notepad, and vim — oh, my!

CodePen is pretty amazing if you understand how to use it.  Most campers don’t.  This may be in part because FreeCodeCamp doesn’t require anyone to watch a video on how to set up CodePen and some people won’t do stuff unless you make them.

When creating a pen, there are options.  The best option is to create from a template but to do that, you need a template first.  This is one of those techniques that is helpful for people who will use CodePen more than once. That should be you.  So, without further ado, let’s build a simple FreeCodeCamp template.

Create a new pen.  It will come up blank, with three editing panels and a white area. If you don’t like where the editing panels are, you can click on the [Change View] button at the top and choose from left-side, top, or right-side display.  If you don’t like the colors, you can change that, too, but we’ll get to that in a moment.

Click the [Settings] button.  This will pop up an screen with settings for this particular pen.  It will look like thisNotice on the left it has Pen Settings and some tabs.  We’ll go through them one by one.

The first one is HTML. This is where you put your stuff for your <head> element.  Things like Google fonts go here.  Also if you’re suing Pug or another preprocessor or if you link to other resources. Do not link CSS or JavaScript resources here. These each have their own tab. If you don’t know what any  of what I wrote means, leave these fields blank because that means it doesn’t apply to you. However, since we’re building a template, I’m going to tell you to take something on faith. Click the black button at the bottom of that side. This will aid in making any of your sites responsive. It says [↑ Insert the most common viewport meta tag].

Next comes the CSS tab. This screen allows you use LESS or Sass or other CSS preprocessors or link to external CSS files.  You can load Bootstrap here using the button at the bottom that says [Quick-add].  If you want to use the version of Bootstrap that has been covered in FCC lessons, use Version 3.  Do that now, actually, as that’s something useful for the template.

The next tab is JavaScript.This is similar to the CSS tab in that you have a list of preprocessors you can choose as well as places to add external JavaScript resources.  Click the [Quick-add] button and add Bootstrap.

The next tab is about CodePen itself, not about your project code.You can choose the way your code displays.  I use spaces, set to two.  Uncheck Save automatically.  Since you’re doing this over the internet, it’s a bandwidth hog to save after every keystroke or few.  AutoUpdate is also a bad idea. Make sure neither is checked.

Now let’s turn our attention to the part on the right. Give the pen a good title Template or myTemplate or something similar. Describe it in the box for that.  And, most importantly, toggle ti to Template status.   Now click the green [Save & Close] button and voila! you have a template.

I promised we’d get back to changing the color of our editor. Now is the time. Click on your avatar picture on the top right corner and choose Settings from the drop-down menu.  You’ll get a screen similar to this one.Colors are on the top left, either individual settings or themes.  There are other settings too.  Once you have it how you like it, the save button is on the top right.

This is my current setup. You will notice the vim key bindings. Since I tend to run Linux Mint (that’s all my laptop has at the moment and my desktop dual-boots to Win10), I tend to use vim quite often to edit files. When I develop anything locally, it tends to be in vim (unless it’s Python, in which case I use idle).

This is not a public-service announcement for vim.  I’m not recruiting anyone. Use what works for you, but here’s why I use vim.

  • Most Linux or unix-flavored boxes have it.  I can also get it for Windows.
  • It works when I install it, without a lengthy setup procedure.
  • I can add features as I need them, optionally saving to a local config file.
  • I’m accustomed to it.  My fingers remember how to do common tasks.

If I’m on an unfamiliar Windows machine, I’ll use NotePad. Because I know how. Same with TextEdit on a Mac. It’s not that I’m averse to other editors.  People joke about not knowing how to exit vim, but honestly, any program without a menu has that issue.  It’s not a vim issue, per se.

It’s all about the learning curve.  CodePen has one and so does vim.  CodePen has a shallower one.  By all means, learn it.  It makes it much easier to share your code.  If you are going to do serious work in Linux, you should probably learn enough vim to edit basic files.  But don’t use it for your everyday editor unless or until it becomes familiar enough that you catch yourself using vim commands in non-vim spaces.

:wq

(just kidding)

pomodoro: for whom the clock beeps

Guess what. I don’t care if my clock has a few millisecond drift. Not enough anyway—the scale is minutes, not tenths-of-a-second, the precision isn’t that important. The default time is twenty-five minutes, which is 1.5 million seconds. There’s a lot of room for slop in there. Why this is important is because I decided I wasn’t going to implement a drift-checking timer, as per the link I posted last week.

I said I was going to talk about flexbox on Thursday and then spent it talking about git and GitHub.  So, a little about flexbox.

This is one of the ways to be responsive.  The CSS involves letting the parent element know that it has to display flex and anything about the overall flex display that it needs. Here’s a snippet from the CSS file for the wiki-viewer. In order to allow a grid display, I have to use flexbox. I wanted 3 per row and I have ten items, so I needed to wrap them.

1
2
3
4
5
6
7
8
.gridBox {
display: flex;
flex-wrap: wrap;
position: relative;
top: 55px;
margin-bottom: 20px;
font-size: 18px;
}

Here, the children need to know that they they only get 30% of the available horizontal space and that they can’t grow but hey can shrink. The flex works a lot like the border property in that you can either specify parts of it or shortcut it into one attribute. Here I shortcut it. The three values are flex-grow, flex-shrink, and flex-basis.

1
2
3
4
5
6
7
8
9
10
.gridDisp {
flex: 0 1 30%;
height: 350px;
margin: 5px;
padding: 5px;
cursor: pointer;
overflow-y: auto;
border: solid 1px #008800;
border-radius: 0px;
}

For the clock (which is what we’re supposed to be chatting about) the important issue was I wanted responsiveness while keeping my stuff aligned in columns and rows. It’s a little more involved so I’ll skip the code examples, but feel free to hit up the style.css on the repo and look around.

Back to the basic clock. I thought it was done when it counted down, but I hadn’t thought that someone might press [Start] twice. So I fixed it to where a second press of [Start] does nothing. Next, someone explained that what they expected, was, if you tried to increment or decrement the active counter, it would stop the countdown. Good call. I implemented that.

The beep. I have a file in .MP3 format that is five beeps. You only hear one because I only play the first second of it. It was taken from freesound.org

I also futzed around with the look of it. I decided having a button that changed from [Start] to [Stop] looked cool but might be confusing to the person using it (besides, the other two items have two buttons).

Here is the new look of the Pomodoro Clock.

git Your Project on GitHub (calculator)

If it’s not one thing, it’s another.  This is life; this is coding.

So, my calculator didn’t trim rightmost zeros.  It does now.

It wasn’t accepting a decimal point on zero.  It does now.

It also was allowing miscreants to press the ± button on operators and causing all manner of havoc.  You can still break it by doing things that aren’t natural, but most natural things are covered.

And the repeated application of = still works.  I’m about ready to turn it in. So, that meant converting it to 3 files and putting it on my local drive and then gitifying it. This was an interesting process. I found out that my buttons were too big (fixed) and too close together (fixed) and a few other nitpicky stuff.

Here are the steps to gitifying  a project from the command line (I iterate, I am totally lost with GUIs):

  1. Do the project. This should be a no-brainer, but you look rather silly with empty stuff on the repo.
  2. Make sure you have a git. Installing a git is beyond the scope of this document.  FreeCodeCamp uses GitHub. This is for Win/Mac users.  I have a dual boot capacity so I run the GitHub software on my Win partitions.  I won’t tell you what options to use because I operate command-line style.  I reiterate, I am totally lost with GUIs.
  3. Put your project in your special place. My special place has a long name and a short name.  The short name is a symbolic link (I run Linux and a symbolic link is a fancy name for a shortcut) of gitstuff in my home directory.  I make a directory for the new project in gitstuff and I can always find it. So, in this case, it’s ~/gitstuff/calculator/ I have three files there at this point
    • index.html
    • style.css
    • script.js
  4. Make a README.md file.  Directions on markdown can be found on the Markdown Cheatsheet.  I shouldn’t need to tell you how to do this (after all, you made those other three files).
  5. Make a LICENSE.md file.  This is trickier. You can get one from choosealicense.com.  Mark it down.  Make it your own.  You will now have five files in your directory.
  6. Initialize your git. Type git init at the command prompt in your project directory.
  7. Go to GitHub and start your project. If you’re not logged in, log in and click the [Start a project] button.  Fill out the fields. When you are finished, click the green [Create Repository] button. The page asks for the following:
    • Repository Name: this should be short.  Mine is calculator
    • Description: this should be a little longer but not much, explaining what it is
    • Public/Private: unless you pay, it’s public.
    • Initialize with a README: do NOT check this, as you made your own in step 4.
  8. Go back to your project folder and do a remote add.  You need the URL from GitHub.  It’s in the box at the top of the screen.  Type the command git remote add origin followed by that URL from the box.
  9. Add your project files to your local git. Type git add . at the command prompt in your project directory.  Don’t omit that period.
  10. Commit your work.  Type the command git commit -m “initial commit” at the command prompt. The stuff in quotes is your commit message.  Since this is the first one, that’s what you say.
  11. Push it to GitHub.  The command for this is git push -u origin master and it will ask for your account name and then your password. The account name will display, the password will not.

After all that, your project is now on GitHub.  If your project is a Website type thing (like the calculator) people won’t be able to view it as a page unless you do another step.  Go to the Settings tab and scroll down to GitHub Pages. Under Source choose Master Branch and click Save.  

This sounds like work, but it is worth it.