Tutorial 1: Introduction to Peep

What is Peep?

Peep is a partner of the Design Programming course. We use it to help:

  • run tutorials,
  • provide offline access to learning resources,
  • provide an online development environment,
  • be a space for students to ask for help,
  • be a space for students to help each other,
  • showcase student work, because you make awesome stuff.

So all the tutorials will be available here, copies of assignment briefs can be found here, you can do most of your work for the course here, and you can communicate with everyone else doing the course here.

Why do we use it?

It started with the idea of having an online version of the processing editor/environment. By running Processing in the browser we could open up all kinds of opportunities that we can't do with the desktop version. Embedding editors alongside tutorials, in discussion boards and automatically storing versions of your code as you write and test it are just some.

What's more, it's a lot easier for you to be able to share your work this way than if you were using the desktop editor. You can link other people to your portfolio on Peep and they'll be able to see any work you've published.

Also, by being web-based it provides universal access. Didn't finish that tutorial on generating colours in class? Finish it at home. Forgotten something about drawing shapes onto the screen? Look up one of the older tutorials. Halfway between classes and you need help? Post on the forums and we'll try and respond as soon as we can.

On this note though, if you're going to access from home, you'll need a modern web browser. We recommend Firefox 3.5+, Chrome or Safari. If you don't understand what any of that means and want help, just ask and we'll be happy to help you out.

Logging In

Each students is automatically signed up to the site, with a username and password. Your username is your unikey and your password is your student number. At the moment you can't change your password but you will be able to in week 2.

So if I was John Smith, with a unikey jsmi7635 and my student number was 306172598 then my username for Peep would be jsmi7635 and password 306172598. If you don't know your details, speak to one of the course staff and we'll help you out. If you do know them and they're not working then also speak to one of the staff.

Please log in now.

Areas of Peep

Peep has 6 sections, including the front page, and they are:

  • Front Page
  • Tutorials
  • Sketchbook
  • Portfolios
  • Assignments
  • Forum

Front Page

The front page shows a feed of activity on the website, along with a small display of recently published sketches in student portfolios. Above the activity feed and the sketches will be a list of any announcements we want to make to the class, so try and check this area when you use Peep.


This is where we put the all the tutorials. Each week a number of tutorials will be made available to you for working through in class. We can't tell if you've read the tutorial or not, but some will require you to publish the end result of the tutorial in your portfolio.


This isn't visible if you haven't logged in, but you don't really need to see it to understand it if you're having trouble logging in. Processing is a language focused on design, so we call our Processing programs sketches. Hence, the sketchbook is where you keep all your sketches.

Once you're logged in a link in the site navigation will appear 'sketchbook', which is basically a storage space of all the different sketches you've saved. Your sketchbook is private; anything there is visible to you only.


Each student gets a portfolio as a place to showcase their work. Some assignments will also require you to create portfolio entries as part of the submission.

Portfolio entries are basically special kinds of blog posts, if you're familiar with blogging. What is different to your usual blog post is we've made it very simple for you to include working sketches inside your content.

We're working on ways to give you higher levels of creative control over what your portfolio looks like.


Any assignments for the course will be posted here. Submissions will be handled by blackboard, but more about this will be available to you once you have your first assignment. In regards to Peep, Assignments is purely for your reference.

There aren't any assignments up on Peep yet so if you go there now, that's why it's empty.


Here's the main place to communicate with other students and the course staff. If you're not familiar with forums, they're a place where people post topics, and then others can reply to the topic.

Where Peep differentiates to normal forums is that you can attach code to forum topics or replies. Anyone looking at your topic or reply can then view, edit and run your code.

Using Peep


You can add comments to Announcements, Tutorials and Portfolio Posts that have been published by other students. Anything you say in the comment will be visible to anyone who loads the page after you post it.

If you've been using facebook then this should be pretty easy to pick up.


If you are logged in, you can start a new sketch by going to the sketchbook link and then clicking on new sketch. Or go to this link. Here you can see a standalone editor where you can type some code in, run it and save it. You can also open an existing sketch in your sketchbook.

This editor is the same editor you'll see around in other areas of Peep. The same as the one to the right of this text. It can be different sizes, and it'll have less buttons than normal. Basically the editor only shows you buttons you can use with the code that is currently inside of it.

Publishing Work

If you create a new portfolio post, it is created in a state that we call un-published. Basically it's like a draft. What it means is that only you can see that portfolio post. If you view it, you'll see an option to publish it. By doing so you're making it public. You can always revert publishing something by un-publishing something you've published already.


Anywhere you see big text boxes you can use something called Markdown to format what you're righting.

What is markdown?

Markdown is a way to format your text so it can easily translate into HTML. If you're not familiar with HTML don't worry, all you need to know about it is that it's a way to organise text so that it can be formatted in certain ways. For example:


    is means stuff should be bold. This gets very tiring and cumbersome to write out everything with <b>...</b> around everything you want to make bold, plus it's difficult to read without it being turned into bold text.

    The solution we've gone with is Markdown and it's best explained by it's creator, John Gruber

    Why do we use it?

    The overriding design goal for Markdown's formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions.

    You probably won't even notice you're using it until you need to handle headings, linking other pages, and embedding images. And even then it's quite easy. Just break it into paragraphs with double line breaks, as is normal for most people, and you'll be fine.

    Basic Usage

    The markdown documentation provides a great explanation of the basics. Blocks of text become paragraphs. *Asterisks* surrounding words turn them italic, **double asterisks** turn them bold. To add a link just write paste it in angle brackets like so: <http://peepproject.com> (becomes http://peepproject.com).

    Quick Reference

    Basic Text Formatting

    Common text formatting is done in Markdown using characters either side of the text you want to format. You can format text to be either italic or bold very easily this way using one or more asterisk:

    *italic text* --> italic text

    **bold text** --> bold text

    It is also possible to use the underscore character to achieve the same thing:

    _italic text_ --> italic text

    __bold text__ --> bold text

    Formatting Headings and Subheadings

    You can format headings by underlining text with either equals signs (for headings) or minus signs (for subheadings):




      Formatting Headings At Many Levels

      Alternatively, you can use the hash symbol at the beginning of a line to indicate the level of the heading that you wish to create. HTML supports up to six levels of headings:

        # Heading #
        ## Subheading ##
        ### Subsubheading ###
        #### Subsubsubheading ####
        ##### Subsubsubsubheading #####
        ###### Subsubsubsubsubheading ######







        You can format lists by using an asterisk at the beginning of a line:

          * unordered item
          * unordered item
          * unordered item
          • unordered item
          • unordered item
          • unordered item

          You can format numbered lists by using a number followed by a period at the beginning of a line:

            1. numbered item
            2. numbered item
            3. numbered item
            1. this is a numbered list item
            2. this is a numbered list item
            3. this is a numbered list item


            You can insert URLs as links in text by simply surrounding them by angled brackets:



              You can format links using the following format, the text to use for the link is in the square brackets and the URL is in the round brackets:



                Advanced Usage

                For more advanced stuff, like embedding images, I'd recommend visiting the syntax section of the Markdown documentation.

                Feel free to practice in the comments of this tutorial.

                Processing Editor

                Just a quick rundown of the different buttons you'll find on the processing editor.


                Runs the code that you can currently see in the editor. Assuming you haven't put anything in the editor to the right yet, if you press run you'll see a small transparent box show up on the screen.

                Copy this code across by clicking 'copy' in the top right and then pasting it into the editor.

                  size(200, 200);
                  background(255, 190, 10);

                  Now you should see a yellow square. Don't worry if you don't understand the code, that's not the point of today. Right now we want to see what run does.


                  This saves the code we have in the editor into a sketch. If it's code that hasn't been saved before then it'll create a new sketch. If we're editing a sketch that already exists then it'll ask you what you've changed and save a new version of the sketch, allowing you to visit older versions.

                  If you save your sketch now you'll be asked to choose a name and then after saving you'll see a white bar appear with a square and a red line. This is called the timeline, we'll get into that later.

                  Change some of the numbers and click save again, to see the difference between saving a new sketch, and saving a new version of an existing sketch.


                  New will ask to create a new sketch. If you've made any changes since your last sketch it'll ask you if you want to save first, otherwise it'll ask you what you want to call your new sketch. Once you decide on a name it'll create a new sketch for you with a blank starting point on the timeline.


                  Open will show you a list of sketches you've saved before, you can pick one and it'll load it into the editor. Load the first sketch we saved, the one with the yellow square.


                  This one is a little tricky to understand at first. What fork does is takes the code that's in the editor right now, and turns it into a new sketch with that original code as the starting point.

                  Fork is a good way to create a new sketch from something you're working on and you've had an idea that you want to pursue, but is kind of different to the rest of what you're working on and you don't want to break things.

                  Or if you see something in someone else's code, maybe something attached to a forum post and you want to fork their code so you can edit it based on any ideas you might have.

                  If you press it now, and give a name, you'll have created a 3rd sketch in your sketchbook.

                  The Timeline

                  Whenever you are editing a sketch, instead of just whatever code happens to be in the editor, the editor will show you a timeline of all different versions of the sketch you saved. These are shown as dark squares.

                  If you click on one of these squares it will change the code in the editor to a copy of the code that was in there when you made that save.

                  If you hover over the squares you can see how you described those saves.

                  Also, whenever you press Play and you've made any changes but haven't saved, it'll save a minor version of the sketch in the timeline. It won't be a square, just a small line, and it won't have a special name like the saved versions do, but you can change back to it by clicking on it just like the saved version squares.

                  If this is too confusing, don't hesitate to ask for help and don't worry, because it'll make more sense as you use it.