Unit 1 - Year 7 - Interactive Emojis
Computer Science: Today's Learning Objective
 |
To understand how to build up basic shapes to create an emoji using online software. |  |
To understand how to build up more advanced shapes, including text and lines to create an emoji using online software. |  |
To understand how to use some basic Javascript to make your emoji interactive. |
Emojis
The JavaScript programming page for your emojis. You will need to use this page and follow the instructions to save your emoji design.
JS Fiddle
A step by step graphical guide to more advanced outcomes from your emojis. You should follow the different sets of instructions to help you complete your design.
Emoji Programming Guide
Example Emojis
 |
 |
 |
 |
Example Code Clips
This page just summarizes the coding which is available on the Project Tigr website to help you with coding your Emojis.
Your interactive emoji is make up of lots of simple shapes which can be overlapped to create patterns and change these shapes.
|
Setting up a paper size
|
<svg height="600" width="600"> </svg>
|
|
Pologons (Squares, Rectangle)
|
<polygon points="0,0 600,0 600,600 0,600" fill="#D1C4E9"/>
This has a set of 4 co-ordinates which are the four corners of your pologon. The code at the end #?????? is the colour of that shape.
|
|
Pologons (Triangles)
|
<polygon points="300,10 200,125 400,125" fill="#512DA8" />
This has a set of 3 co-codinates which are the 3 corners of your triangle. The code at the end #?????? is the colour of that shape.
|
|
Circles
|
<circle cx="300" cy="300" r="200" fill="black"/>
cx and cy are your co-orginates for the centre of the circle and r is your radius.
|
|
Eclipse
|
<ellipse cx="300" cy="350" rx="55" ry="30" fill="black" />
cx and cy are your co-ordinates for the centre of the exlipse and rx and ry are your two radiuses to form the shape.
|
|
Lines
|
<line x1="133" x2="133" y1="370" y2="350" stroke-width="8" stroke="#7CB342" stroke-linecap="round"/>
|
|
Text
|
<text x="105" y="45" fill="#AB47BC" font-family="arial black" font-size="35"> TEXT GOES HERE </text>
x and y are your co-ordinates for where your text is, fill is the colour, font-family is the actual font, and font-size is the size of the text. |
Assessment criteria for your emojis.
To get the best out of your levels for this module you should follow the marking criteria guide below. Lower levels at the top and upper levels at the bottom of the guide.
Your emoji booklet
Programming your Emoji:
