daniellevass/1.md

## 1.md

      
    Raw
  

              1.md
            
          
    1. Aims

The aim of this worksheet is to help you create your own emoji using SVG!
We will need to write code to make some paper, circles and polygons and move where they are located on the page using coordinates.


Above is an Android emoji made using several circles (we can also animate it later!)


2. JSFiddle

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!


3. Coordinates

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.


4. Paper

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!

5. Circles

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 </svg>
<circle cx="300" cy="300" r="200" fill="yellow"/>

The above means, make a circle with the following attributes :

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


6. Colours

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?


8. Polygons

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 = 0,0
top right = 600,0
bottom right = 600,600
bottom left = 0,600

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 shape.
<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 x and 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!


9. Finishing

Before you move on, make sure your emoji has the following:

1 face
2 eyes
background

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! 🌟

  
## 2.md

      
    Raw
  

              2.md
            
          
    1. Aims

The aim of this worksheet is to show you some of the colour things you can do in SVG.
we will look at using the following in our emojis:

stroke
fill
opacity
linear gradients
radial gradients


above is my emoji at the end of this tutorial


2. JSFiddle

If you haven't got it open in a new tab, find your emoji from the last worksheet. We're going to add some more jazzy colours to it this worksheet!


here's mine, all ready for the party!


3. Stroke vs Fill

So we've already used the attribute fill in a lot of our shapes. This fills in the shape with a solid colour.
We can also use an attribute called stroke to draw a line around the shape. If we want a thicker line, we can increase an attribute called stroke-width.
I'm going to update my yellow emoji circle to have a green line around the edge:
<circle cx="200" cy="200" r="180" fill="#FFCE54"
         stroke="#A0D468" stroke-width="15"/>


doesn't it look smarter already?


4. Opacity

Another fun attribute all shapes get that we can play with is the opacity - this just means how seethrough it is.
I'll update my emoji to be 50% transparent:
<circle cx="200" cy="200" r="180" fill="#FFCE54"
         stroke="#A0D468" stroke-width="15"
         opacity="0.5"/>


oops, maybe he looks a little too much ghostlike now?


5. Linear Gradients

Let's add something new to our emoji, how about a gradient background!
First off we need to declare that a linearGradient:
<linearGradient id="linearGrad" 
                  x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#4FC1E9"/>
    <stop offset="100%" stop-color="#AC92EC" />
</linearGradient>
We need to make sure the id is something we remember, as we'll use this in a minute. We're going to go from 0% to 100% along the x axis (right to left). Then we can declare some colours and where they should start. E.g. far left should be blue, far right should be red.
To use it we need to change the fill attribute in the shape we want to use the gradient (our polygon):
<polygon points="0,0 0,400 400,400 400,0"
          fill="url(#linearGrad)"/>

make sure you add a # which here means, find something with the id of linearGrad


snazzy, right?


6. Radial Gradients

So we liked linear gradients enough to learn how to do a radial gradient too!
They're very similar! The stoppers are points from the middle e.g. in the center stay yellow, then go to orange around the outside.
<radialGradient id="radialGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="25%" stop-color="#FFCC00"/>
    <stop offset="100%" stop-color="#FC6E51" />
</radialGradient>
Don't forget to set the fill of your face circle to your new gradient. If you forget, check how your linear gradient works!


is it possible to have too much colour?!


7. Finishing

Before you move on, make sure your emoji has the following:

Path
Opacity
Linear gradient
Radial gradient

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! 🌟

  
## 3.md

      
    Raw
  

              3.md
            
          
    1. Aims

The aim of this worksheet is to introduce into JavaScript by making our emoji change colour when we click on it.
We will learn what the following are:

id's
variables
functions


2. JavaScript


3. jQuery


4. ids


5. variables


6. clicking


7. changing things


8. finishing

Before you move on, try making at least two other things clickable.
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! 🌟