Saturday 27 January 2018

Clitocopia: Cliteracy and WebVR

At our first ever meetup in 2017, Sinead and her husband Francois talked us through their Clitoris Vulgaris project, algorithmically generated twitter art, as part of a wider effort to raise awareness of female anatomy. Their work touched on 3-d models, colour models, natural language processing to create plausible scientific names, and an insight into how bots interact with each other.

This month we were lucky to have Sinead and Francois back to talk about their next project - Clitocopia.


Sinead and Francois' slides are here [online].

The video is online at [skillsmatter].

Cliteracy

Overarching both the Clitoris Vulgaris and this Clitocopia project is the ambition to address the poor understanding, myths and even taboos, around the clitoris. Sinead highlighted the issue powerfully by demonstrating that too many people, women and girls included, do not know what they look like. Particularly striking was the fact that almost everyone can recognise and draw the male sexual organs  - a penis is an iconic universal symbol - but very few can draw the female clitoris.

Sinead and Francois' approach to raise awareness, dissolve. taboos and demystify the clitoris is to use technology in a fun, engaging way that draws people into the subject without them really feeling dragged or lectured. Previously they created a twitter bot, Clitoscope, that automatically created a rendering of a clitoris, with mapped textures and plausible scientific names. It was a fun experience for social media users, and successful too.

This time they've extended their ambition, using virtual reality technologies that really are just emerging right now, to create a very immersive world for users to explore. The idea is to enjoy the world, but also to seek out hidden a clitoris to progress to the next level. They call it this experience Clitocopia.


Virtual Reality User Experience

It's not an exaggeration to say that virtual reality is a new and still maturing technology. Not only does the tech not always work uniformly and consistently, the best practices for designing worlds to be both intuitive and comfortable are not yet established. The field is still new.

That means that the thinking Sinead and Francois put into developing the user experience is probably new and valid. For example, they thought carefully about not throwing the user straight into the world without any warning or clues. Their intended users are firmly normal people - not just already tech savvy developers. Even the confirmation of how to signal that the user had succeeded in finding a clitoris needed some careful thought. Any wrinkles in user experience are a lot less tolerable in virtual reality.


Technologies and Algorithmic Challenges

The development of Clitocopia couldn't have come much sooner - the technology for creating and experiencing virtual reality in a way that is both accessible to many, on a range of devices, using open web technologies is just maturing right now.

They chose A-Frame - a web technology that first started as a Mozilla project, but is now becoming a web standard across different vendors and devices. And it works with your choice of user technology - from using a mouse on a desktop, moving your smartphone around you in the real world, or immersing yourself more fully with Google Cardboard or DayDream headsets for example. Sinead and Francois brought some headsets along and that provided a lot of fun at the end of the session!


Sinead and Francois were very open and honest about sharing their journey - including the bumps and dead ends. This is more valuable than just admiring a finished product and gives a much more intimate understanding of the technologies and methods, and their limitations.

They wanted to use beautiful botanical illustrations of fruit and plants to create a landscape in which the clitoris was hidden. Fruit and vegetables are perfect for camouflaging human anatomy! It's not an accident that through the millennia, shapely and juicy plants have been euphemisms for human bits and pieces!


They wanted to automatically extract the fruit from the mainly Victorian botanical prints, but this was a challenge. Even though many image segmentation methods are good, they are still not general enough to cope with a variety in the source set of images. Here's Francois explaining the idea of thresholding to simplify and bring out the primary subject of an image.


They used trained neural networks provided online by research groups, but again, the success rate wasn't high enough. In the end they cut out the fruit by hand.

Another key challenge was using the 2-dimensional images of fruit to create a world in the three-dimensional virtual world. Sinead and Francois explained how they tried different methods for projecting the images onto a 3-dimensional sphere, within which the user remains. That brings with it the issues of distortion - just like we have different map projections distorting the globe. A specific problem was sorting the images of fruit and vegetation to make it easier to, hopefully, place automatically. They again turned to methods from the world of machine learning, and used the t-SNE projection to group together similar plants with good success.

Placing the plants such that there are no gaps between them was something they put effort into - but that too remains unsolved - that is, doing it automatically, and in a way that is pleasing to the eye.

Overall they succeeded in creating a three-dimensional virtual world that is engaging, visually interesting and pulls the user in to explore the world in an intuitive way.


A-Frame Example

The A-Frame technology they used is interesting. Not only is it open, and an increasingly adopted web standard, which works across many kinds of devices - from smartphones to tablets, though headsets and on big traditional displays - it is has also been designed to be easy to use.

That last point is important - because too many technologies have suffered, and often failed, because they were too difficult to learn and use. A-Frame very comfortable for web developers - it looks just like HTML.

Have a look at the following simple example from the wikipedia page:

 <html>
   <head>
     <title>Hello, World!</title>
     <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
   </head>
   <body>
     <a-scene>
       <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
       <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
       <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
       <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
       <a-sky color="#ECECEC"></a-sky>
     </a-scene>
   </body>
 </html>

You can see that in the head section we pull in a javascript library to give us access A-Frame capability. We then create a scene in the body section with an <a-scene> tag. Everything in that section is intuitive and needs little explanation. You can see a box, a sphere, a cylinder, a plane and a sky being declared with properties like size, location and colour.  It couldn't be easier. If you copied that code into a html file and pointed your browser it would create a virtual world which you could navigate - using your mouse, or your smartphone held up and moved around you, or even your virtual reality headset, all without additional fuss.

Have a Go Yourself

Sinead and Francois recommended the glitch platform for learning about web virtual reality and A-Frame. Here's a link to get started [glitch], with a tutorial here [aframe.io].

And here is a link to Clitocopia, also hosted on glitch - remember to use headphones if you don't want anyone around you to be upset by the botanical sounds!


What a great start to the Algorithmic Art year!