Animating website

I have continued on with the website this morning and added a couple more animations throughout, in order to keep the site interesting. Due to creating more of an interactive instruction manual that I want to follow on with a game, after deadlines, I am going to create an advert for the up and coming game, of which I will preview on the website. Screen Shot 2016-03-23 at 10.47.37

On the home page, at the bottom, I have provided this information. I think it is important to create a facebook and instagram page as well as link it to a youtube channel, due to potentially reaching out to more of an audience.  A lot of young children use social media and even though they aren’t the main users, the teachers that will consider using this assignment in class are frequent users.

I briefly went on to creating the facts pages about each planet, however have only completed the section on planet Earth. I like the layout of these pages, however I plan to make them more interactive down the line.  I really want to incorporate an animating solar system, somewhere in the website however I was tackle that task next week.  I might even include this on the planets information page and make toggles so you can switch between each planet. This is what the planet Earth page looks like so far:

Screen Shot 2016-03-23 at 10.47.49

Obviously this is a still image and therefore you cannot see the animations, however the moon is rotating 360 degrees around earth and the smaller earth is rotating at 360 degrees every two seconds, whilst the rays of sun move to and from the planet. This is a demonstration of how seasons/day and night work.

Animating website

Using Muse

After some more experimental work on the animating WebGl solar system, I decided to move onto creating something more simple and 2D. I won’t disregard the idea of an animating solar system just yet, however I am finding it more difficult to work with and don’t want to spend too much time worrying about it potentially not working.

After deciding to continue on with something else, I looked into working with Muse and so far I think it’s going really well. I have been using Edge alongside Muse for my animations and I am finding that the two work really nicely together. I have so far created my Landing Page and Home Page…these aren’t completely finished and I may alter them further now the line, however they are doing a good job at representing what I particular theme I want to follow on with.

Screen Shot 2016-03-21 at 18.04.54

 

I have redesigned the logo for my work, as I believed this style was more suited to the Space theme. I have ignored the stereotypes of space with regard to colour scheme and design in many other regards, that I thought keeping the font relatable would be a good idea.  There are also connotations to ‘Space Invaders’, the arcade game and I thought this was also appropriate when branding my product.

Screen Shot 2016-03-21 at 18.05.03

The Homepage show above, doesn’t contain too much written detail as I don’t want to bombard students with an overload of information. It gets straight to the point and is quite playful. With adding the option of ‘No, Space is Boring’…I am going to try and change the minds of those who don’t want to learn about space, by linking this page to basic facts and figures and designs, hopefully enticing students to want to learn more.  The ‘Yes, I’m So Ready’ page will link to a preview of the sketch book provided in the kit, asking them to open it up and write their Names etc (will provide an example). In the next week, I am going to create all the individual pages and briefly add notes to them so I know exactly what needs doing on which. This will enable progress to happen and put me on the right track, so I know how much needs doing daily in order to complete this project in time for testing.

Using Muse

Animated Solar System

I have spent some time working with my tutor to build an animating solar system, using Javascript in Brackets. I have decided to use this process as part of my experimental phase, due to the work being too difficult to tackle. I am not overly familiar with using javascript and therefore some of the functions are foreign to me, especially because its using THREE.js. What has been built so far looks awesome and i’m really happy with the outcome, it is also really easy to process the animation as it requires you to only change a number. For example the orbit speed/distance from the sun is controlled using numbers, as is the planet and sun size. However, I want to tackle another way of creating a similar style thing, that I can enter onto a webpage.

When previewing the so far built solar system, you have the option to switch from a 3D view to 2D. I have included two images of what it looks like when previewed.

Screen Shot 2016-03-10 at 17.04.30 Screen Shot 2016-03-10 at 17.04.47

Animated Solar System