The aim of this worksheet is to help you create your own emoji using
We will need to write code to make some
polygons and move where they are located on the page using
Above is an Android emoji made using several circles (we can also animate it later!)
We're going to be using a website called JSFiddle to create our own emojis. First we need to open JSFiddle in a new tab (right click and open in new tab) http://jsfiddle.net/
You should then see a set of four squares - we're going to be working on the top left box "HTML"
There are two really important buttons in the top bar to focus on:
Run = press this every time you want to see what your code does - this should then appear in the bottom right box called Result
Save = when you've made something neat work - press save and JSFiddle will create you a unique URL. Make sure you write this down somewhere safe, so you can add more things to your emoji next time!
SVG uses the same coordinate system you've seen before in Maths! The only difference is the origin (0,0) is top left instead of the traditional bottom left.
If we draw a circle and want to work out what it's coordinates would be.
We'd need to count first how far away from the left edge of paper along the horizontal (x) axis it is - the higher the x number, the further right the shape is.
Finally, we need to count how far away from the top of the paper along the vertical (y) axis it is - the higher the y number, the further down the paper the shape is.
As we're going to be doing some drawing today - the first important thing to do is to create ourselves a piece of paper. We can do that by using a technology called SVG. Write the following into the HTML box in JSFiddle.
<svg height="600" width="600"> </svg>
If you tap run now, does anything happen? It might not look like it but if you look super carefully you can see the scroll bars appear meaning your paper is going to be bigger than the result box can show!
Now let's actually draw something!
The most important part of the emoji is the "face" - which is a really big yellow circle!
Write the following code inside your paper, after
<svg height="600" width="600"> and before the
<circle cx="300" cy="300" r="200" fill="yellow"/>
The above means, make a
circle with the following
cx= center x value (how far right)
cy= center y value (how far down)
r= radius (how big the circle is)
fill= what colour the shape will be
So that yellow colour we made isn't really the same yellow colour as the emojis on my phone. How can we make that better?
Computers have many different ways to represent colours, websites tend to use a thing called
Hex Colours and they look like this:
- black #000000
- white #ffff00
- yellow = #ffcc00
Instead of the word "yellow" write "#ffcc00" and see what happens? The hash character (#) is super important, without it the computer doesn't realise it's a colour!
If you'd like some colour inspiration, Google have a great list of colours and their hex codes - check it out at https://www.google.com/design/spec/style/color.html#color-ui-color-palette (right click, open in a new tab)
7. More Circles
Spend some time adding more circles to your emoji - don't you need some eyes, maybe even a nose?
Does it look scared to you?
Another shape we'll probably want to use is a
polygon. Polygon is just a fancy name for a shame with many points. A square is a polygon with 4 points. Triangles with 3. etc.
If we want to make a square background for our emoji, we could break it down to the following 4 coordinate points:
- top left =
- top right =
- bottom right =
- bottom left =
Next we can write them all together, though we have to make sure they are in a sensible order =
0,0 600,0 600,600 0,600
Finally, we can subsitute our points into our
<polygon points="0,0 600,0 600,600 0,600" fill="red"/>
If you add this below all your circles what happens?
There is a thing called a
z index. We've taken special care to where the
y coordinates go in our shape, but how do we make sure something doesn't go over the top of another shape???
This is handled by when it's drawn. If you pretend your the computer drawing all of these shapes. First your going to want to draw the background, then the yellow circle for the face, then the black eyes. etc. We just need to make sure our background is one of the first shapes that gets drawn! Simples!
Before you move on, make sure your emoji has the following:
- 1 face
- 2 eyes
Don't forget to save your work, and write down the link so we can add it to it next time!
You could also take the link home and show your friends and family what amazing work you've done! You could also make me happy by clicking the "send feedback" button and send your emoji to me too!