Project by: Alexander Tkaczyk-Harrison, and Bradley Griffiths.

 

Smart Alien is an educational tool designed to teach children about space. Children start learning about earth and the solar system as early as Key stage level one and now we have developed an app that will make your children just that more interested in about the universe we live in.

 

With Smart Alien you can jump into your rocket ship and travel through space looking at all the different planets in our solar system, teaching you about the distances, ages, size’s, obit time and giving you fun facts about each planet. As you use your directional buttons to fly round the solar system you can get close up and personal with each planet, or zoom far off into the distance and see how beautiful our universe really is.

 

Our target audience for Smart Alien are children learning at key stage level 1 aged between five to seven years old. We have made sure to include in our app what children are learning at this stage in their life about space. We realise that this age is one of the most important in the development of a child’s brain. We wanted to make the subject of space as interesting as possible for them. While researching about the solar system [1]at key stage one level we know that a student should be learning about the different planets, the orbit time, the distances which you can all find in our application.

 

During our research, we found that there has been a growth in children using mobile devices and playing games on tablets and computers. [2] Studies show that 20 percent of one-year-olds have their own tablet computer and 28 percent of two-year-olds can navigate a mobile device without help. We felt with the growing pace of technology that would be a good idea to start trying to create more educational programmes for children to use on their computer/tablets so they could use it for revision and study.

We consider our audience in our design by making the program very easy to use with a simple layout for educational purposes.

 

Documentation of creative process:

When we began the creative process, we had a starting point. That starting point was including WebGL in our project. We had to gain an understanding of the way WebGL works with P5js as it works completely differently in contrast with the regular P5 library.

We played around with primitive shapes such as boxes and spheres (as opposed to rect’s and ellipse’s) and when we felt comfortable with the library, we moved onto the next step.

Our original idea was to create a program which gives the user an Autonomous Sensory Meridian Response (ASMR) to what is being viewed on the screen. ASMR is that feeling you get occasionally when, for example, you get a shivering / tingling sensation going down your spine when you hear particular sounds / see particular visuals. [These can include people whispering, the sound of scrunching paper, etc.

Here is an example of a video designed to give you an ASM Response:

 

The intention was to tie in the feeling of floating in space into the ASMR program we were creating.

To do this we first created a sphere, which going to be a planet. We applied a texture of planet earth to the sphere. The next step was to create stars to make it look like the sphere is in space. We achieved this by making a constructor function to create a small sphere at a random location. This constructor function was then called in a loop which runs 1000 times, and every time pushes a new Star into an array of Stars. This worked extremely well, as we now had 1000 stars at random locations. We then wanted to apply movement to the 3D space we had created. We achieved this by rotating everything using Perlin Noise. This gives a free flowing feel to the movement of the rotation, as well as it being random.

For this to work as intended, we would have needed to set it up as an installation in a large, empty, black room with no light in it. The visuals of the program would then be projected onto one of the walls, while the sound was played loudly through speakers. We could not, however, achieve this as we needed to hire a large room, and a lot of equipment.

This is where we changed our idea. We stuck with the solar system frame for the program, but changed the basis to be an interactive, educational program to be used in schools to teach children about the solar system.

We began by adding more planets into the program using a constructor function which we called with specific locations and sizes and spacing them apart from each other, and applying textures to them. One problem we encountered was the stars which we had originally created were now moving through some of the planets. This did not look realistic, so we made the stars significantly smaller than the originals, and also created a giant box to go around the whole of the solar system. We applied a star texture to the box, which gave the desired effect of our solar system being part of a bigger solar system.

The next task was to be able to move the camera from one planet to the other. This was done very simply, by creating a variable for the camera’s Z position, then adding and subtracting 50 from that variable when the left and right arrows are pressed. We also created a variable for the cameras X position so the user can zoom in on the planets.

One problem we encountered here was that of how to include restrictions to prevent the user from moving the camera past a certain point. I.E. preventing the user from being able to zoom through the planets, and outside of the box surrounding the universe.

 

We achieved this by using a series of if statements. Here is an example:

if (keyIsDown(DOWN_ARROW)) {

camZ += 50;

}

 

if (keyIsDown(DOWN_ARROW) && camZ == 5950) {

camZ -= 50;

}

Next we needed to create a way of displaying the planets information including name, size, distance from the sun, and orbit time. This required researching into planetary facts. This was done by creating an extremely thin box then applying a custom texture to the box which we created in Adobe Photoshop. This worked perfectly.

After user testing we concluded that we needed to add the distance between the planets. This obviously could not be realistic as the distance between the planets at one point goes to 4.5 billion km from one to the other. So to counter this, we spaced the planets evenly apart, and then added another box with a custom texture on it stating how far the distance is to the previous planet. This appears to work well.

 

Link to live project: http://doc.gold.ac.uk/~atkac001/functionStars/index.html