Don't Panic.

How to get help

If you're looking for help with your work, you have a few options:

  1. Check this page. This help page is designed to answer some common questions and we'll be updating it with more information as questions come up during the semester.

  2. Post on the forums. The best place to ask to for help is to post to the forums. The benefit of this is that other students can see and learn from your question and they might even be able to help you before we can reply. We check the forums every day so you're sure to get a response within a short time.

  3. Ask in class. Never be afraid to ask questions in class. It sounds like a cliche but it's true, there's no such thing as a dumb question. We're never going to get tired of people asking questions in class. The drawback to asking in class is you'll have to wait up to a week to see us!

  4. Email Rob. You can contact Rob at rob.saunders@sydney.edu.au. Expect about the same response time as you'd get in the forums, but if you'd prefer it to be private then this is the way to go.

Finding your way around

The Peep web site has a number of areas, some are available to anyone, others are only available when you are logged in. Many of the pages in the web site permit the addition of comments. Please feel free to leave comments on tutorial and assignment pages if you either require more information, or would like to point out an error etc.

The front page

The front page contains updated information about things happening on the web site including; announcements about the class, recently published portfolio pages, and other activity, e.g., posts to the forum, comments on pages, etc.

The outline

The outline contains general information about the unit of study, including a schedule of the lectures and links to tutorials as they are posted to the web site.

The tutorials

The tutorials area contains all of the tutorials that have been set as part of the unit of study. You can always come back to the tutorials at any time to practice them. Every tutorial comes with a dedicated code editor so that you can practice the code as you follow the tutorial, you can also save any code that you produce in tutorials to your sketchbook making it easy to return to them later.

The assignments

The assignments area contains all of the assignments that are set as part of the unit of study. You will only see the assignments that have been released on this page. For brief descriptions of forthcoming assignments check the outline page.

Your profile

When you have logged in you can access your profile page by clicking on your name in the top right hand corner of the web site. On your profile page you can change the image and quickly access your portfolio page.

Your sketchbook

Your sketchbook is an area where you can experiment with code. All sketches developed in the sketchbook are private, although you can share them by creating a portfolio post and copying the code from your sketchbook into the post.

Your portfolio

You can access your portfolio page either through your profile page (see above) or by clicking on the "portfolios" tab and finding your portfolio amongst every other students portfolio. You can also check out any portfolio pages that other students have made public by publishing them. When you create a portfolio post it is, by default, unpublished. It is therefore important that you click on the "publish" link when you are ready to share a portfolio post with others.

The forum

The forum operates like many other forums on the Internet. You may start a new thread or reply to an existing one. The Peep forum differs from others that you may have used through its built-in support of code. If you wish to attach a sketch to a post, just click the attach sketch button and follow the prompts. The code that is in the editor when you then click 'submit' will be attached to your post. This is the best and easiest way to ask for help, advice, or even just show off what you've spent a couple of hours on.

Attach code prompt

If you have saved a sketch to your sketchbook previously, and want to attach that sketch to the post without having to copy it across manually, choose the 'Attach sketch' option and pick the sketch from the box which pops up.

There are no real rules for the forums; if things get out of hand in a discriminatory or offensive manner we'd probably have to step in but otherwise you can post about anything in there.

How to use the code editor

Any code editor that you see on any page of the site will be able to the same things as all the other code editors. That is, they can all Run, Save, Open, Fork and Create sketches. Depending on if you are signed in or not, and if you're working on a previously saved sketch will determine if some of the functionality is available.

For example if you aren't signed in, you won't be able to save sketches to your sketchbook, or open them from your sketchbook.

The buttons

Run

Run When you click this button Processing will try to run your sketch, if it's successful you should see the sketch pop up into the middle of your window.

If unsuccessful, you'll get a message appear at the bottom of your screen letting you know what went wrong.

Every time you run a saved sketch, Peep will store a snapshot of the code you tried to run. This helps for three immediate reasons. One, it is never bad to have lots of saves, "Save early, save often.". Two, if you ask us for help and we can see what you were trying to do whenever you pressed run it can help us identify what was going wrong. Three, it encourages you to experiment with your code as you can now go back and visit each experiment you tried.

New

New When you click this button it will replace what you have in the editor with a new sketch. If you're signed in, it will ask you to name your new sketch, automatically saving it to your sketchbook. Don't be afraid of this, it's only to help you so you get the timeline.

Open

Open Once you have sketches in your sketchbook, you'll often want to open the sketch directly into whatever editor you have available. Say you couldn't finish the tutorial in class but want to open it at home, just visit the tutorial page at home, click open in the editor on the right, and choose the sketch you saved before you left class.

Opening a sketch will bring all your timeline data with it.

Save

Save Save saves your sketch in your sketchbook. If it's the first time you've saved the sketch, it'll ask for a name and will create the sketch timeline along with it.

If you're saving a previously saved sketch, it will ask for a description of what has changed, and create a specially tagged version of your sketch in the timeline.

The timeline

Timeline

The timeline is a history of all the different versions of your sketch. Every time you run the sketch, it stores a snapshot (as long as you've changed something since the last time you ran it), and every time you save the sketch it will create a special snapshot, tagged with what you've changed.

The sketch timeline is only available on sketches that you've saved already. There are two ways to accomplish this. When you save a sketch for the first time it creates the timeline for that sketch alongside it. Or, if you create a new sketch by pressing the 'New' button while signed into Peep, it will ask you to name your sketch and then it will save it immediately.

Snapshots of your sketch created when you press 'Run' show up as little marks on the timeline. Those created by pressing save again will show up as big squares.

To go back to an older version of your sketch, just click on the version you wish to look at, and the code in the editor will change to the code from that version.

How to format text using Markdown

We support the use of Markdown formatting anywhere you can edit text in Peep, including your portfolio pages and the forums. Markdown is a simple "mark-up language" that aims to be an intuitive way to create formatted HTML pages using the sort of tricks that you might use when writing an email in "plain text". Here are some of the basic formatting options that you'll most likely want to use:

Formatting text

You indicate a new paragraphs of text with an empty line, this should be so natural you don't really have to think about it. For example:

This is the first sentence of the first paragraph. This is the second
sentence of the first paragraph. This is the third sentence of the
first paragraph.

This is the first sentence of the second paragraph. This is the second
sentence of the second paragraph. This is the third sentence of the
second paragraph.

will be reformatted into:


This is the first sentence of the first paragraph. This is the second sentence of the first paragraph. This is the third sentence of the first paragraph.

This is the first sentence of the second paragraph. This is the second sentence of the second paragraph. This is the third sentence of the second paragraph.


What can be a little tricky is when you don't want text on consecutive to be joined together, for example if you want to format a poem, even if you write the text like this:

This is the first line of the first verse.
This is the second line of the first verse.
This is the third line of the first verse.

This is the first line of the second verse.
This is the second line of the second verse.
This is the third line of the second verse.

it will be formatted like this:


This is the first sentence of the first paragraph. This is the second sentence of the first paragraph. This is the third sentence of the first paragraph.

This is the first sentence of the second paragraph. This is the second sentence of the second paragraph. This is the third sentence of the second paragraph.


In this case the trick is to put two spaces at the end of every line that you want to be separated from the next. The Markdown looks very similar:

This is the first line of the first verse.  
This is the second line of the first verse.  
This is the third line of the first verse.  

This is the first line of the second verse.  
This is the second line of the second verse.  
This is the third line of the second verse.  
                                           ^^ two spaces

but the formatting is the way we want it:


This is the first line of the first verse.
This is the second line of the first verse.
This is the third line of the first verse.

This is the first line of the second verse.
This is the second line of the second verse.
This is the third line of the second verse.


Italic and bold text

You can make text italic by enclosing it with single asterisk or underscore characters depending on what you prefer, e.g., *this is italic text* becomes this is italic text and _this is also italic text_ becomes this is also italic text.

To make text bold is very similar, you simply use two asterisk or underscore characters, e.g., **this text is bold** becomes this text is bold and __this text is also bold__ becomes this text is also bold.

You may prefer to use one type of formatting for italic text and another for bold text, for example, you might like to use underscore for italics (_italics_) and asterisks for bold (**bold**). This makes it easy to mix the two together, e.g., bold italic (**_bold italic_**).

Block quotes

Block quotes are usually used for when you want to include something written by someone else, for example if you have found a poem that you find inspiring, then you might include this in the text. To create a block quote you start each line with the ">" followed by a space, just like your email program does when including a previous message:

> The more is snows (Tiddely pom),  
> The more it goes (Tiddely pom),  
> The more it goes (Tiddely pom),  
> On snowing.

This will be turned into the following (notice that I'm using the trick from above to force the text onto separate lines):


The more is snows (Tiddely pom),
The more it goes (Tiddely pom),
The more it goes (Tiddely pom),
On snowing.


Remember, that when you include someone else's text that you must reference where you got it from. The above was hummed by Winnie-the-Pooh in Chapter One of "The House at Pooh Corner", by A.A. Milne.

Headings

Markdown, like HTML supports up to 6 levels of headings. Headings and subheadings can be written by "underlining" text with either "=" or "-" signs for headings and subheadings respectively.

This is a heading
=================

Will be formatted as:


This is a heading


And the following:

This is a subheading
--------------------

will be formatting as:


This is a subheading


Note: It doesn't matter how many "=" or "-" signs are on the line following the text, so you don't have to worry getting exactly the same number of them as the characters in the heading text.

If you need subsubheadings or subsubsubheadings etc. then you need to use the alternative way of formatting headings, i.e., place up to 6 "#" characters at the beginning of the line with the heading text:

# Heading

## Subheading

### Subsubheading

#### Subsubsubheading

The above will be turned into:


Heading

Subheading

Subsubheading

Subsubsubheading


Note: while it's not required, you may like to put "#" characters at the end of your heading text as well to make them more of a "heading-like" look:

# Heading #

## Subheading ##

### Subsubheading ###

#### Subsubsubheading ####

Code

The Peep website supports two different ways of formatting code within a document. The first is to indent any code by (at least) 4 spaces at the beginning of the line. For example:

    size(200, 200);
    background(0);

^^^^ There are 4 spaces before each line of code.

Note: If you're using this method then the easiest way to copy code into the text editor is to first select all of the code that you want to insert press TAB twice and then copy and paste the code into the text editor.

The second way to include code into the text editor doesn't require you to indent each line, instead you mark the beginning and end of the code with "~~~", like this:

~~~
size(200, 200);
background(0);
~~~

@peep directives

By default any code that you include in your portfolio posts will be formatted as code but will not be runnable. This is perfect if you want to include a code "fragment" that is not meant to be run.

If you want to include a complete sketch that you'd like people to be able to run, you need to include a specially formatted comment at the beginning of your code. This comment should begin with "/**" and end with "*/", in between you may include Peep "directives" that tell the formatting system that the code should be treated like the code for a sketch. For example,

~~~
/** @peep sketchcode */
size(200, 200);
background(0);
~~~

will be formatted like the code examples in the tutorials, i.e., the code will be shown with any special words highlighted and a link in the top-right hand corder that allows the code to be run. Alternatively, you can specify that the code is run when the page is loaded:

~~~
/** @peep sketch */
size(200, 200);
background(0);
~~~

this will show up in the formatted document with a link to show the code.

Code in your main text

Sometimes you also want to reference a variable or function name, or perhaps a bit of maths, in your text, i.e., without having it appear in a separate paragraph. To do this you need to use the "`" character before and after the fragment of code that you want to insert. (The "`" character is likely to be on the same key on your keyboard as the "~" character.)

For example, suppose you have some code like this:

int x = 100;
while (x > 0) {
  line(x*2, 0, x*4, height);
}

and you want to reference to say something about the way that the position of the line is calculated, you can include this in your text by writing `line(x*2, 0, x*4, height)` within your text, which will be formatted as line(x*2, 0, x*4, height).

Lists

If you want to include numbered or un-numbered lists in your documents you can format these quite naturally. Numbered lists are created by started a line of text with a number followed by a full-stop. Like this:

1. First item
2. Second item
3. Third item

which will be formatted like this:


  1. First item
  2. Second item
  3. Third item

Unordered lists are created by starting lines of text with "-" or "+" followed by a space. For example:

- First item
- Second item
- Third item

will be formatted like this:


  • First item
  • Second item
  • Third item

You can also created nested lists by indenting the "bullets" by two spaces. For example:

+ First item
  + First subitem
  + Second subitem
+ Second item
+ Third item

will produce:


  • First item
    • First subitem
    • Second subitem
  • Second item
  • Third item

This also works for numbered lists, such that:

1. First item
  1. First subitem
  2. Second subitem
2. Second item
3. Third item

produces


  1. First item
    1. First subitem
    2. Second subitem
  2. Second item
  3. Third item

Links

It is very likely that you'll want to link to other places on the Internet when you write your assignment portfolio pages, to link to pages about your inspiration, or perhaps code examples that you used as a starting point for your own sketches. Markdown supports a few different ways to include links in your text.

Making URLs Clickable Links

The simplest way to include a link in some Markdown text is to surround the URL in "<" and ">", this will make the URL into a link to the address. For example, <http://www.peepproject.com> will be translated into http://www.peepproject.com.

Creating a Link with Text and a URL

If you want to have different text displayed for the link than the address of the web page that it links to, you can specify the text and the URL by wrapping the text for the link in "[" and "]" followed immediately by the URL in "(" and ")". For example:

[Peep](http://www.peepproject.com)

is translated into Peep.

Creating a Link wth Text, URL and Hover Text

If you wish the link to show some text when the mouse is hovering over the link you can add this by including it in the round brackets after the link. For example:

[Peep](http://www.peepproject.com "Take me to Peep!")

is translated into Peep

Managing Lots of Links on a Page

Finally, if you have lots of links in your portfolio page (or you need to refer to a single link multiple times) you may prefer to organise them in one place. To do this you can use a "footnote" system of specifying links. To use this method of embedding links in the page you use the following format in your text:

[Name of link][link_id]

and at the bottom of your post you provide information about the link:

[link_id]: http://address.of.link/ "Text to display when mouse hovering"

For example, if we created a document with the following in the text:

[Peep][peep]

and at the bottom of the document had the following link information:

[peep]: http://www.peepproject.com "Take me to Peep!"

It would appear just like the links above, i.e., Peep

This may seem complicated but it can be a good way to organise your links in a portfolio post because you keep all of the URLs out of the main text, which can make it much easier to read what you're writing in the document as you write it.

Note: The naming of link ids is much like the naming of variables in Processing, e.g., you can use underscores to separate words.

Images

Images are included in Markdown documents much like links, the basic format for including images is ![Title of image](url). So, as you can see the main difference is that we start the link information with an exclamation mark ("!"). For example,

![Peep Logo](http://www.peepproject.com/media/images/layout/logo.png)

will be formatted as:

Peep Logo

Also, just like links you can organise your images using the "footnote" style, to avoid having all the URLs cluttering up your main text. In this case we would write the title of the image and the id of the link where the image is specified in the body of the text:

![Peep Logo][peep_logo]

and at the end of the document give the details about where the image can be found:

[peep_logo]: http://www.peepproject.com/media/images/layout/logo.png

You may find that this is much more convenient, especially when working with lots of images.

Note: We've just added the ability for students to upload images to the Peep web site. You can find a link to the page where you can upload images and font files on your profile page.

Further information

More information about Markdown can be found at the following web site. There you will find the full syntax of the formatting language.

Programming resources

The following links are good resources of information about the Processing programming language.