Skip to main content Open main menu ANU crest Search this site
Close search

A3: Social Media Ad

ROBIN WORRALL- phones on a train

Photo by ROBIN WORRALL on Unsplash


  • Due: 9pm AEDT Tuesday, October 5 (week 9) (careful about daylight savings)
  • Mark weighting: 15 marks
  • Submission: submit your assignment through Gitlab (full instructions below)
  • Policies: no late submissions accepted; for other policies (e.g. academic integrity) see the policies page


Ads (advertisements) are everywhere on social media these days, from “promoted” tweets, to product placements on YouTube and sponsored Instagram stories.

The goal of any social media advertisement is the same: grab a user’s attention and convince/manipulate/trick them into caring about a product or service or taking a certain action (kind of evil huh?).

Most ads are annoying and unmemorable, but they can be brilliant and artistic (probably still a bit evil though!)

For assignment 3, you’ve landed a marketing job at a top supermarket chain (congrats!) and the boss has assigned you to create an social media advertisement for a product you would find at a supermarket in p5.js.

Your social media ad needs to do the following:

  1. Have a hook: Grab the viewer’s attention and hook them into interacting.

  2. Last 30 seconds: Give them an interactive experience that lasts for 30 seconds.

  3. Leave an impression: Leave the viewer convinced that they need to go and buy the product you have chosen to advertise.

N.B.: You get to choose the product you advertise (it should be something you can get from a supermarket, otherwise the boss will NOT be happy).

If you’ve got questions, then make sure that you read all the way through to the FAQ at the end of this page—they might be answered for you already!

Getting started

Here’s the process for working on the assignment:

  1. fork & clone the assignment 3 repo

  2. make an interactive social media ad sketch in sketch.js

  3. as you go, commit and push your progress to the GitLab server

  4. pressing spacebar while running the sketch will save a thumbnail.png` file to your Downloads folder (just like assignment 1!)—when you’re happy with your sketch, download and copy a thumbnail to assignment 3 folder (and then don’t remember to push!).

Make sure you push something to your fork asap, and reach out for help if you can’t get it to work. Remember to take advantage of the Git help in the FAQ.


Your submission must include:

  1. all the code (sketch.js) and assets (in the assets/ folder) required to create an interactive p5.js experience advertising your product/service

  2. an (max 200 words) describing your artwork

  3. a statement-of-originality.yml describing any inspiration/code/assets you got from other places

  4. a thumbnail.png containing an image showing a preview of your ad (this is for the assignment gallery)

The artist statement

Your submission must include a short (max 200 words) artist statement. This is a short document, written in the first person, which answers the question:

how does your interactive ad convince users that they should buy your product?

You won’t receive a separate mark for the artist statement, but it will be used to help evaluate your sketch. So make sure you use it to (briefly) talk about things like:

  • what (in your mind) is the purpose of a social media ad—and how has that influenced your work?
  • how have you tried to
    • attract the viewer’s attention?
    • make the viewer care about the product you’re selling?
    • leave a lasting impact?
    • hook the viewer?
  • how have you incorporated interactivity? how does the interactivity enhance the message of the ad (rather than just being incidental)? what are the dangers/opportunities with this approach?
  • how is your sketch an ad? how is it different from another type of interactive sketch, e.g. a game?
  • are there social/ethical/commercial concerns for your ad?

Submission process

Here’s the process (again, remember the Git help screencast videos)

  1. fork the assignment 3 template repository from the CECS GitLab server

  2. clone1 & work on your fork of the assignment 3 repo, regularly committing & pushing your changes to the GitLab server

  3. at the submission deadline, the latest commit2 pushed to the GitLab server (not on your local machine!) will count as your submission

Again, there are some “checks” which the GitLab server runs to help you out. So if you get a pipeline failed email, then have a look at the FAQ.

Submission checklist

  1. my project satisfies the requirements

  2. my completed assignment has been pushed to the GitLab server, and all the required files (your versions of, statement-of-originality.yml and sketch.js) have made it to the server

  3. my statement-of-originality.yml file includes all the required references/acknowledgements, and everything not mentioned in there is my own work

  4. my sketch works when viewed in Firefox on the lab machines at the test URL


You can ask a question on the COMP1720 forum using the ass3 tag and if it’s popular enough I’ll put it up here.

Also, remember that there’s lots of helpful info on the FAQ page which applies to all assignments.

What’s the difference between an ad, an advertisement and a commercial?

Nothing, they’re all just synonyms (words which mean the same thing).

What product should I advertise?

It’s up to you, but since you are working for a big supermarket it should be something you can buy at a supermarket.

Can my ad be evil/manipulative/unethical?

We’re only pretending to be marketers here so you can make an ad that is pretend evil if you want (as long as we know it’s not really evil). Please don’t be evil in the real world.

We do draw a line at content which is discriminatory, sexist, racist, or harassing towards certain groups. That kind of content is not ok even as a joke or in a pretend ad, and is not ok for a university environment.

Finally, your work should be ok for public viewing (e.g., appropriate for kids and grown ups), keep it G-rated.

As always, if you have an idea but you’re worried about whether it’s appropriate, ask on the forum or ask the course convenor directly.

So am I supposed to make an artwork or an ad?

We don’t see a strong distinction; can’t an ad also be an artwork? Think about our definition of art from week 1:

when something is done so well that it exceeds the function of the thing that it is for


it has a surplus or excess je ne sais quoi

In other words, the best ads might transcend ad-ness and become art. This is what we want you to do.

Does it have to be exactly 30 seconds long?

It should hold a user’s attention for around 30 seconds. Try it with your friends (use a stopwatch to see how long they look at your work).

Can I incorporate actual video into my sketch?

p5.js doesn’t handle video very well at all so we recommend that you do not try to incorporate video in your sketch.

Your ad is supposed to be interactive and made in p5. So don’t get hung up on what you can’t do (compared to a video ad) but think about what you can do.

I don’t know where to start?

Think about the ads that have really “stuck with you” in your life—why were they so memorable? How might you translate those attributes into an interactive p5 ad?

Here are a few links to spark your imagination:

Can I just make an interactive p5 version of an existing ad?

No, your job is to come up with a new ad.

It’s ok to be inspired by other work and even riff on common ad tropes/cliches; however, you can’t just make a copy of an existing ad, however well you do it.

What counts as interactive?

The answer to the same question for ass2 is still relevant to this assignment. You’ve learned even more code stuff since then, so feel free to different (and multiple) types of interactivity. Remember to give the viewer cues about what they can do.

What size should the sketch be?

The template uses windowWidth and windowHeight to set the canvas size based on the size of the web browser window. Make sure your sketch adapts to this size—so use width and height instead of hardcoded numbers (e.g. 200) wherever you can.

  1. make sure you clone your own fork (i.e. the one with your uni ID in the url) to your local machine, not the template (because obviously you aren’t able to change the template for everyone—GitLab won’t let you) 

  2. it’s the master branch which counts as your submission—which is the default anyway (if you’ve just followed all the instructions then you’ve been working on the master branch all along) 

bars times search arrow-left