{"id":403,"date":"2023-10-17T19:50:25","date_gmt":"2023-10-17T19:50:25","guid":{"rendered":"https:\/\/mrcottle.co.uk\/WP\/?page_id=403"},"modified":"2023-12-15T11:59:50","modified_gmt":"2023-12-15T11:59:50","slug":"emoji-project","status":"publish","type":"page","link":"https:\/\/mrcottle.co.uk\/WP\/emoji-project\/","title":{"rendered":"Emoji Project"},"content":{"rendered":"\n\n\n\r\n

Emoji Project<\/span><\/p>\r\n\n\r\n

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.<\/p>\r\n\n\n\n\n\n\n\n\n\r\n

The <\/span>intention<\/strong><\/span> of this unit is to provide an introduction to coding in JavaScript, looking at Co-Ordinates and vector graphics. <\/span><\/p>\r\n\n\n\n\r\n

Students create a student portfolio showing their designs, research and final coded emoji. <\/span><\/p>\r\n\n\n\n\r\n

The <\/span>impact<\/strong><\/span> of this unit will be measured by the students final portfolio. <\/span><\/p>\r\n\n\n\n\n\n\n\n\r\n

Example Emoji designs and code<\/strong><\/h5>\r\n\n\n

Your interactive emoji is make up of lots of simple shapes which can be overlapped to create patterns and change these shapes. <\/p>\n

 <\/p>\n\n\n\n\n\n\n\n\n\n
\n

Setting up a paper size<\/strong><\/p>\n

 <\/p>\n

 <\/p>\n<\/td>\n

\n

<svg height=”600″ width=”600″><\/p>\n

 <\/svg><\/p>\n

 <\/p>\n<\/td>\n<\/tr>\n

\n

Pologons (Squares, Rectangle)<\/strong><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n<\/td>\n

\n

<polygon points=”0,0 600,0 600,600 0,600″ fill=”#D1C4E9″\/><\/p>\n

 <\/p>\n

This has a set of 4 co-ordinates which are the four corners of your pologon. <\/p>\n

The code at the end #?????? is the colour of that shape.<\/p>\n

 <\/p>\n<\/td>\n<\/tr>\n

\n

Pologons (Triangles)<\/strong><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n<\/td>\n

\n

<polygon  points=”300,10 200,125 400,125″ fill=”#512DA8″ \/><\/p>\n

 <\/p>\n

This has a set of 3 co-codinates which are the 3 corners of your triangle.<\/p>\n

The code at the end #?????? is the colour of that shape. <\/span><\/p>\n

 <\/p>\n<\/td>\n<\/tr>\n

\n

Circles<\/strong><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n<\/td>\n

\n

<circle cx=”300″ cy=”300″ r=”200″ fill=”black”\/><\/p>\n

 <\/p>\n

cx and cy are your co-ordinates for the centre of the circle and r is your radius.<\/p>\n

 <\/p>\n<\/td>\n<\/tr>\n

\n

Eclipse <\/strong><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n<\/td>\n

\n

<ellipse cx=”300″ cy=”350″ rx=”55″ ry=”30″ fill=”black” \/><\/p>\n

 <\/p>\n

 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. <\/p>\n

 <\/p>\n<\/td>\n<\/tr>\n

\n

Lines<\/strong><\/p>\n

 <\/p>\n

 <\/p>\n<\/td>\n

\n

<line x1=”133″ x2=”133″ y1=”370″ y2=”350″ stroke-width=”8″ stroke=”#7CB342″ stroke-linecap=”round”\/><\/p>\n

 <\/p>\n<\/td>\n<\/tr>\n

\n

Text<\/strong><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n<\/td>\n

\n

<text x=”105″ y=”45″ fill=”#AB47BC”  font-family=”arial black” font-size=”35″> TEXT GOES HERE  <\/text><\/p>\n

 <\/p>\n

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. <\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

  <\/p>\n\n\n\n\n\n\n\n\n\r\n

Support Links<\/p>\r\n\n\r\n

 <\/p>\r\n\n\n\n\n\r\n

To code your emoji please use JS Fiddle – Remember to select save and copy your URL at the end of the lesson.\u00a0<\/p>\r\n\n\n\n\r\n

Click here for a link to a HTML colour chart to help you with choosing colours for your code.\u00a0<\/p>\r\n\n\n\n\r\n

When you have finished your main emoji you can add some HTML symbols on using the add text code.\u00a0<\/p>\r\n\n\n\n\r\n

If you are stuck, you can click here and see an example of a coded frog.\u00a0<\/p>\r\n\n\n\n\n\n\n\n\n\r\n

Key Terms<\/p>\r\n\n\n\n\r\n

Emoji<\/p>\r\n\n\n\n\r\n

A graphics to show an emotion.<\/p>\r\n\n\n\n\n\n\r\n

Shape<\/p>\r\n\n\n\n\r\n

A shape formed from coding, for example a square or circle<\/p>\r\n\n\n\n\n\n\r\n

Coding<\/p>\r\n\n\n\n\r\n

A set of text to create a program, graphics or webpage<\/p>\r\n\n\n\n\n\n\r\n

HTML<\/p>\r\n\n\n\n\r\n

Hyper Text Markup Language – used to create websites<\/p>\r\n\n\n\n\n\n\r\n

Polygon<\/p>\r\n\n\n\n\r\n

A shape formed with 3 or 4 sides, ie a rectangle, square, or triangle<\/p>\r\n\n\n\n\n\n\n\n\r\n

Future Career Opportunities<\/p>\r\n\n\n\n\r\n

Skills<\/span><\/p>\r\n

    \r\n
  • Programming<\/span><\/li>\r\n
  • Teamwork<\/span><\/li>\r\n
  • Working to a deadline<\/span><\/li>\r\n<\/ul>\r\n

    Average UK Salary \u00a357,000<\/span><\/p>\r\n\n\n\n\r\n

    Skills<\/span><\/p>\r\n

    \u00a0<\/p>\r\n

      \r\n
    • Creating ideas<\/span><\/li>\r\n
    • Communication with clients<\/span><\/li>\r\n
    • Working to a deadline<\/span>\u00a0<\/li>\r\n<\/ul>\r\n

      Average UK Salary \u00a325 – \u00a335,000<\/span><\/p>\r\n\n\n\n\r\n

      Skills<\/span><\/p>\r\n

      \u00a0<\/p>\r\n

        \r\n
      • Creative skills<\/span><\/li>\r\n
      • Working with clients<\/span><\/li>\r\n
      • Working to a deadline<\/span>\u00a0<\/li>\r\n<\/ul>\r\n

        Average UK Salary \u00a326,000<\/span><\/p>\r\n\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-403","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/comments?post=403"}],"version-history":[{"count":13,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/403\/revisions"}],"predecessor-version":[{"id":437,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/403\/revisions\/437"}],"wp:attachment":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/media?parent=403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}