# data[].attributes.body
The models have been modelled, the research has been done, the markers have been set and has integrated AR. Our final website has been set. The maya files have been exported as GLB files making them much lighter and not letting them affect the performance of the website.

# data[].attributes.attachment_link.readable_text
Download the markers individually by right-clicking on the relevant image and selecting 'Save image as...' or all at once using the button below.

Print the marker(s) out.

Alternatively, you can use the image on your device as a marker.

If you have printed all markers on one sheet, cut them out being sure not to cut through any of the markers. If not, skip this step.

Open the AR utility and point the camera at the marker and like magic, the atom will appear!

Download All (.zip)

*Note that the files are contained in a .zip format and may require additional steps to open on some devices. Seek help online for how to access .zip files on your device if issues arise.

Start AR

# data[].attributes.attachment_link.description
Download the markers individually by right-clicking on the relevant image and selecting 'Save image as...' or all at once using the button below. Print the marker(s) out. Alternatively, you can use the image on your device as a marker. If you have printed all markers on one sheet, cut them out being sure not to cut through any of the markers.

# data[].attributes.body
Combining both mine and Deny's style, we created a prototype for the rest of the non-metal atoms which we will be following.

# data[].attributes.body
Kat designed the markers for all the 18 non-metal elements inspired by the cartoon I added in earlier.

# data[].attributes.body
Deny made another model for the 3D model for the atoms to help test the model viewer on the website. We decided to go with the previous model due to the fact that it looks more engaging because of how big the spheres are whereas the design created by Deny is quite accurate to how it is taught but could look a little flat for a 3D model design.
It'd be very easy to just rotate the shells a bit, deleting and adding spheres to make the 20 models for the different elements.

# data[].attributes.body
We have chosen to go with non-metals since their composition is easier to create. There have also been some advancements on the website as shown below.
Since this AR implementation is more simplistic than the markers we can use it as added functionality for visualizing the atoms in the periodic table (more marks) and then markers would be used for the teaching aspect in classrooms.
By that I mean have a periodic table on the website where you can click on each element (only the 20 we’re doing) and see the atom.

# data[].attributes.body
Post second presentation, we started to get serious about our presentations and actually figure out what exactly we had to do and start to work on it. We started to get some basic QR code style markers ready with space in the center to potentially put a visual to help us. Such as an image like the one below.

# data[].attributes.body
We had our second presentation and it went a little better than the previous one but not as good as we wanted it to. Everybody suggested we use the letters and not gemstones as markers since it'd be a bit confusing without the AR, whereas with the letters, either way, students would understand which chemical they are dealing with.

# data[].attributes.body
Instead of using the gemstones, we have decided to go with letters inspired by a kids tv show. This would be more child-friendly and related to what we were trying to go for. And we could use letters as markers for the periodic table.

# data[].attributes.body
We have decided that we wont be using calligraphic fonts because it will be difficult to distinguish, hence we will have to use Sans. A-Frame does image tracking so the idea of the markers being used would work.

# data[].attributes.body
Kat finds out information on non-metals.
I create the designs to represent it.
Deny creates the website for the AR to be integrated into.
Reece puts in my graphics into the AR.

# data[].attributes.body
A-Frame up and working, currently trying to figure out how to use the custom markers.

# data[].attributes.body
An animated background has been added. The atoms float but we are unable to get the electrons to orbit, since that would be a bit complicated with how they float using just CSS.

# data[].attributes.body
Since we were going with 2D, I just wanted to try modelling the models on Maya and find out how it would look if we did it in 3D, and so I created a model for us to decide, and the reasons I prefer going with 3D was that; AR’s primary benefit is having the ability to place things into 3D space via the camera allowing people to walk round it, get close etc. By going for 2D we would lose the main benefit of having AR and essentially what will happen is you end up with a floating textbook. KS3 Chemistry, having done it myself focuses on 2 main things and that is Atomic structure and bonds. The types of bonds and how elements bond together and remain stable by having ‘complete’ shells (2 in the first shell, 8 in the 2nd and 3rd and 2 in the 4th, this is the extent at which KS3 is taught). My idea for nailing exactly what the brief was asking of us would be to create 3D models of elements and have them display on top of markers. In a lesson the teacher can then ask the kids to find others and bond with them (I’ll explain how I think we can do this conceptually). The students will then see on their screen the Atom and the electrons orbiting in shells and when another marker is placed next to it, another model loads in with the compound of the two elements bonded with information about the type of bond, e.g. Covalent bond, Metallic bond etc. Metallic bonds in KS3 are described as ‘seas of electrons’ so it’d essentially be two spheres surrounded by electrons all mixed together, Ionic bonds the electrons are ‘given’ to the other element and covalent the electrons are shared.
Modelling the atoms would be very easy, because it would be just a sphere with smaller spheres around it and color coded so I wouldn’t be concerned about it being 3d as opposed to 2D which will actually have issues like resolution when you move close and keeping the image always facing the camera and not static and such. With 3D I actually think it’d be easier.

# data[].attributes.body
While planning how we were going to carry out this assignment, we had a ton of ideas, one, which I really liked but seemed a bit complex was, a marker scanner where people are shown a pattern that they can print or draw themselves and then once they're scanned they are assigned to an element and then the user can do things like mix them and see the chemical reaction you would get out of it.
This idea seemed great but a bit complex since there's a lot to design model and mark up.
So we went with the second idea that we had. We would have a small poster on our website that was printable, and once the user points his/her camera towards it, they would be able to see the chemical structure and the other details related to the chemical.

# data[].attributes.body
This week, we started delegating work to each of the members and creating a Gant Chart to help us figure out what we have to do before the second presentation and the deadline. Since Reece and Deny are good with the technical side of things while Kat and I are better with the creative side, that is how we delegated our work. Deny was going to be creating the site that hosts the AR, Reece would be using A-Frame to create the AR out of the models given, Kat would be creating the graphics, i.e. the markers, and I would be responsible for the modelling, and other graphics related things.

# data[].attributes.body
After solidifying our ideas, we decided to go with 2D since that would be easier and more space for experimentation.

# data[].attributes.body
We just had our first presentation, and as a group have agreed that it didn't go well, at all. We were lacking the Gantt chart, and were told that we didn't have a solid concept for our presentation and that we didn't have a plan, and that we had included too much text in the presentation and not much words so we were basically reading off of the presentation which didn't seem right. We also weren't communicating much as a group, since a few members we're unavailable for a few meetings, also the difference in time zones not allowing us to meet up at a proper time and discuss the project. We also realized that we hadn't delegated proper roles to each of the members for us to better carry out the work as individuals, and making it easier for us to work together. But we discussed that we will make it better for the second presentation and work on our communication as well as delegating work and meeting up with our group supervisor, Mike.

# data[].attributes.body
To prepare for our presentation, we each researched different parts of using AR to create a learning space for 11-14 year old students, such as, our target audience (11-14 year olds as well as school teachers as they have to decide whether the application is suitable), potential AR implementation into a website or as a Snapchat filter, AR and how it is being used and can be used in education and other fields, technological trend and research into A-Frame and AR.js.
We also narrowed down to non-metals since there are only 10 of them.

# data[].attributes.body
And finally, the logo we finally chose is what Reece created, a more simplistic design, to show the different atoms and structures and more K3 oriented.

# data[].attributes.body
Kat's ideas are shown below

# data[].attributes.body
We have come down to naming the group DARK, since it relates to dark matter in chemistry as well as has all of our initials in it. Deny created a small logo for this digitally.

# data[].attributes.body
To prepare for the presentation, we began our research and discussing about which type of elements we will be covering; metal or non-metal, as well as discussing which colors we would be associating with the periodic table. For our presentation, I drew out a few logos to represent our group.

# data[].attributes.body
For our second year project, we have been given a ton of different topic to choose from that are technology related. My group consists of Kat, Reece, Deny and I. With all the topics given to us, we have shortlisted two projects; the AR site for K3 students for Chemistry, and an AR site to make researching about travel planning, attractions.etc. easier.