Emoji Project
The "Emojis" computer science unit is a delightful blend of creativity and coding. Here, students harness the power of JavaScript to craft charming vector graphics, turning their festive spirit into captivating electronic Christmas cards. In this journey, they explore the art of graphic design and animation, giving life to a myriad of holiday-themed emojis. They dive into concepts like SVG (Scalable Vector Graphics), using JavaScript to manipulate shapes, colors, and animations. This unit celebrates the fusion of art and technology, allowing students to express their holiday cheer in a uniquely digital way, while also honing their coding skills in a fun and engaging context.
The intention of this unit is to provide an introduction to coding in JavaScript, looking at Co-Ordinates and vector graphics.
Students create a student portfolio showing their designs, research and final coded emoji.
The impact of this unit will be measured by the students final portfolio.
Example Emoji designs and code
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-ordinates 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 elipse 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. |
Support Links
Key Terms
A set of text to create a program, graphics or webpage
Hyper Text Markup Language - used to create websites
Polygon
A shape formed with 3 or 4 sides, ie a rectangle, square, or triangle
Future Career Opportunities
Skills
- Programming
- Teamwork
- Working to a deadline
Average UK Salary £57,000
Skills
- Creating ideas
- Communication with clients
- Working to a deadline
Average UK Salary £25 - £35,000
Skills
- Creative skills
- Working with clients
- Working to a deadline
Average UK Salary £26,000