top of page

Hiro Markers - AR and HTML

Writer's picture: Ryan PilkingtonRyan Pilkington


During the TMA1402 module lecture on the 21st, I was excited to learn that we would be engaging in a workshop style session where Simon explains the Hiro marker, its purpose and how to use HTML code to create basic augmented reality experiences.


In my previous university experience, I had taken part in coding for design sessions. Looking back, these sessions were neither something I looked forward to nor hated. I saw the potential that the coding medium had and what it could do for my creative practice as a budding young designer. It soon became apparent that some take to coding like fish do to water and some, do not. Those sessions, although interesting from the outset did, however, feel like a preschool session where we as students we learning how to draw a circle for the first time and then colour it green. Lucky us. It is fair to assume that I never returned to the coding practice once those sessions were over and also fair to assume I have never needed to in my professional life.


That said, part of me was curious to see what coding would be like as part of an MA. Simon showed and explained the Hiro marker, explaining that it works in the same way that a QR code does, however, for augmented reality instead of websites and links. I was nervous, to begin with. Thinking of how precious this MA is to me and how easily I did not take to coding the first time round started to play with the tiny butterflies in my stomach. However, I was pleasantly surprised when Simon shared the basic HTML code with us, allowing us to experiment and deconstruct/break the code in our own time. I was, however, disappointed that we did not learn how the code actually works and how the code is created.


Copying the code into my OneNote digital notebook for later and creating a CodePen account, I started to experiment with the code and the results. There was one section of code that I broke and experimented with in particular, on purpose at least. I later found out which part of the code I had broken to make the webcam feature not activate in CodePen. I decided that, instead of trying to be careful with the code like I did during my BA, this time I would simply type in colours and numbers and await the results. Taking forward whatever I observed and taking that learning into the next code-breaking test.


In these experiments and explorations, I was able to perform somewhat simple tasks such as creating a red sphere, a blue sphere and a green cylinder. After taking notice that the colours CodePen/HTML generates are extremely saturated, I started to experiment by placing "light" as a precursor to whatever colour. Later learning that HTML does not like spaces between words. Taking this learning forward, the colour was typed out as "lightred" for example, resulting in lighter, somewhat pastel shades of colours. Moving forward, I tested with position and scale moving the resulting shapes around the Hiro marker. For whatever reason, one to which I am still no longer enlighted to, “cube” and “pyramid” resulted in nothing in the code. "Cuboid" also resulted in nothing. Believing this was due to the word "Radius" and replaced it with "Size" which affected the code most unexpectedly by supersizing the 3D shape.


I believe there are designers out there that will take HTML and Hiro markers and do incredible things, I, however, am not one of those. I am self-aware enough to know that I do not have to be good at everything and to know when to walk away from a direction. Only after initial tests and exploration that is of course. For some, when experimentation does not go to plan it is a disappointing moment. For myself, however, it simply means that I am now free to go ahead with the next road of exploration, research and experimentation.


I am glad to say I gave Hiro a chance, which I believe is more than others can say, however, I will not be moving forward with this technology for TMA1402.




119 views0 comments

Recent Posts

See All

Research Methods

For certain aspects of the project, I needed to use a variety of research methods to collect information and data that would help inform...

Comentarios


Post: Blog2_Post
bottom of page