Web Programming Space Worksheet 1.5

webprogramming_space_1_5.md

Space Worksheet 1.5

You need to find the repl.it link for the solar system that you made last week - if for whatever reason you can't or you have lost it I have made you a starting jsfiddle - you will need to copy it into your repl.it before you start!

Task 1 - Hex Colours

There are many ways to represent colours with computers - we've been telling our svg shapes to be "red" or "yellow" or "green" - this isn't great if you want a specific colour green!

Option A - rgb values

Microsoft Word likes to use this - if you ever try to change the colour to a custom colour you get a colour wheel:

This gets you three values (Red, Green, Blue) - 0 means you've got none of that colour, 255 means a lot of that colour. So:

• red would be 255,0,0
• green would be 0,255,0
• purple would be 153,51,204

Option B - Hex Values

this is what most people use now

Basically a more efficient way of representing a rgb value - Instead of going from 0 to 255, you go from 00 to FF

• red would be #FF0000
• green is #00FF00
• purple would be #9933CC

Try making each of your planets a more accurate colour in your solar system. There are some links at the bottom of the page to get some hex color codes quickly!

Task 2 - Gradients

Linear gradients

  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#1AD6FD"/>
      <stop offset="100%" stop-color="#1D62F0" />
  </linearGradient>
    
  <circle cx="100" cy="100" r="100" fill="url(#grad1)" />

• id = the name of the gradient - needed to give to the circle's fill attribute
• x1 & x2 = start and stop x values = these go from 0 to 100 to make our gradient
• y1 & y2 = start and stop y values = these stay constant for our example
• stop offset
  • offest = how far down the gradient you want the colour
  • stop-color = hex code for the stop point

Radial Gradients

  <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#ffcc00" />
      <stop offset="100%" stop-color="#cc0000" />
  </radialGradient>
  
  <circle cx="100" cy="100" r="100" fill="url(#grad2)" />

• id = used to connect with the shapes you want that colour
• cx & cy = represent the center coordinates for the outer circle
• r = how far the gradient should go out from the center
• fx & fy = denote the coordinates for the inner circle

In your solar system - make Earth use a horizontal linear gradient from green to blue. If you get time make your sun become a radial gradient.

Useful Colour Links

1. http://www.colorhexa.com
2. http://ios7colors.com/
3. http://developer.android.com/design/style/color.html

Extension task - Rotating Planets

NB You can leave this extension task until after the next worksheet as they are separate pieces of work.

Your planets will look super-cool when they show a lighted side to the sun and a shaded side away from the sun as they travel in their orbits.

You can make your planets look like that using css transforms on a linear gradient.

You already know how to make a linear gradient, and copy this css rotate transform into the css block:

#earth{
    animation-name: planets;
    animation-duration: 50s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
}

@keyframes planets {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

• #earth matches the id= in your html
• animation-name: matches the @keyframes
• animation-duration: lets css know how slowly to rotate
• animation-timing-function: lets css know to rotate smoothly

Here are a couple of links to help you experiment with different effects:

• https://css-tricks.com/transforms-on-svg-elements/
• https://www.w3schools.com/cssref/css3_pr_transform.asp

Here's one I made earlier https://jsfiddle.net/437cyk6r/7/ .