Creators Week 3 – Building a Shop Banner App

LED Sign
This week the creator crew learned some of the most important things for coding and we managed to build quite a useful app while we were at it!

For those that missed this week, we handed out two sheets which you can download from here:


This week we learned about the following things:

  • The important bits about variables!
    • That variables are used wherever you expect something to change, just like in scratch
    • That you create variables using the keyword “let” – e.g. “let x;” to create an empty variable or “let x=10;” to create a variable and assign the value 10 to it
    • That most variables are three main types
      • text (often called strings) which has quotes around it – e.g. let message=”hello” or let message=’hello’
      • numbers which are just numbers that can be used in math – e.g. let x=100;
      • boolean which means they are true or false
    • The variables created with “let” live in side their “block” and a “block” is the bits in between the brackets closest to them.
      • because of this, if we want both setup and draw to see a variable, we need to create the variable outside both functions – these are called global variables.
  • How to do an “if” statement in javascript!  We might do some more on this next week!
  • A little about the “Developer Tools” in Chrome.
    • We can open these with F12 or with  ctrl+shift+i, or by choosing “more tools”..”developer tools”
    • The “Console” tab is the most useful – we found out that usually if we make a typo in our code, this will show in red here.
    • That we can write “console.log” statements in our code to print variables and text in the console.
  • We learnt about the “prompt” command in javascript which is an easy way to ask the user for some data
  • In p5, we learnt that the setup function runs exactly once when the sketch starts up and that the draw function runs 60 times a second, from top to bottom.
  • In p5, we also learned about the text function that lets you write some text anywhere on the screen

What app did we build?

We built an app for someone who wants to display a message in a scrolling banner.  This is one that could be useful for any shop that for e.g. wants to put up a scrolling advert on a large TV behind the desk.

When you start the app, it asks you to type in the message you want to see:

After you type in the message, it will display on the screen, scrolling from left to right, and when it reaches the right hand side of the screen it switches over to the left!

Many of you did some excellent variations!

  • Oisin did a multicolored background that changed as the message moved
  • Danny managed to figure out how to do a transparent background using the “clear” statement to wipe up after it – this allowed him to overlay it on his growing web page
  • Some others did multiple messages, or messages scrolling right to left or even top to bottom!

How did we build the app?

For this app, we ended up needing 3 variables:

  1. a variable to store the message that the user wants to display – we called this variable message
  2. a variable to store the x-position of the message as it moves across the screen – we called this variable messageX
  3. a variable to store the speed that the message moves at – we called this variable messageSpeed

We created the 3 variables at the top of the screen, as we knew that we wanted them to be visible in both the setup and draw functions.

let message;
let messageX=0;
let messageSpeed=2;

Next, we added code to the setup function that asked the user to enter a message to display on the banner. We found that the “prompt” function lets you pass two text strings – the first one will appear on the title of the question, and the second one will appear as the “default” value in the textbox.

function setup(){
    createCanvas(windowWidth, windowHeight);
    message = prompt("What are today's specials?", "Cheese is always great value!");

So far so good! We had the message value set, all we needed to do is show it. To show the message we used the text function. We also added some code to set the font size, etc.

function draw(){
    fill(255, 0,0);
    text(message, messageX, 100);

Next came the tricky part! How to make the message “move” to the right? We did it by adding the messageSpeed to the messageX – this way 60 times a second we moved the message across.

    messageX = messageX + messageSpeed;

This moved the message across, but it kept going forever! We needed a way to bring it back!!

Sean thought of a great idea from his scratch days – to use the “if” statement!! We used the if statement to see if the message had gone past the width of the screen and the sent it back! We weren’t sure how to send it back but worked out a way that roughly worked out okay – we found that “message.length” is the number of letters in the message, so we multiplied this by roughly the width of each letter (25) – this moved the whole message off the screen to the left.

    if(messageX > width){
        messageX = -1 * message.length * 25;

And there we have it! Our scrolling banner add!

As usual, all the code is on the creators github repository. Head there and download it!!

Kieran and I are absolutely amazed at how well you guys and gals are doing. We are really starting to get used to organizing our files – I would say if there’s anything we need to be more careful on it’s organizing our files – the more familiar we get with it, the easier things will be..

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s