Category Archives: Projects

design Projects

Making the virtual robot army

There comes a time in everyone's life when you just have to face up to the fact that having a robot army is nothing less than awesome.  I've decided to start creating mine using Blender, because the only thing better than my own robot army is a robot army I can animate and put into virtual worlds.

Its been a while since I've done a purely digital project and over a year since I did anything in Blender and I wanted to get back into it and refresh and improve my skills.

The first stage is create a drawing in Illustrator, actually make two. One front on and one from the side. Set these as background images in Blender and begin the modelling.  The basic modelling was really easy, fortunately my robot is a simple shape. The trickiest part was the cut outs in the body. There is a boolean modifier too that allows you to overlap two mesh objects and calculate the difference between the two. This has the effect of removing the overlapping part of one mesh from the other. It took a while to get this to work reliably, but was quite quick to do after some practise.

Basic Robot model
Basic Robot model

The arms were initially made from cones with the ends cut off but were later remodeled by creating cylinder and reducing the size of one end face.

After the modelling was finished next came the U.V mapping and texturing. U.V mapping  is the process of unwrapping the model along the edges to create a flat net. This net can be saved as a image file, exported to Photoshop and coloured in. This mostly went quite smoothly but I had trouble with the arms distorting the image which is why I changed from a cone to a cylinder.

Robot model with Head textured
Robot model with Head textured
Fully textured Robot
Fully textured Robot

I was reasonably pleased with the outcome of the U.V mapping and texturing as it was the first time I had done it.  The next time should be better as I now know a few hints and tips that will improve it.

I now have a Robot that looks like a Robot, but its still very static and can't move.  I would like to try some animation and also use the Robot in 3D computer games written in Unity so the next stage is to rig the Robot.  This creates a skeleton inside the model that can be moved around and the outer body of the robot will move when this skeleton is moved.

Robot showing the Skeleton rig
Robot showing the Skeleton rig

Like the U.V mapping the rigging isn't something I'd done before and by the end I knew how i would improve it for next time. Also the Robot model isn't really suited to being rigged as the hip and shoulder joints aren't really correct. This causes the body to distort when it walks as their is interference between the top of the leg and the bottom of the body.

Walking Robot showing body distortion
Walking Robot showing body distortion

I had to put the project on hold at this stage as I was picked for a course learning to write computer games in Unity which would finish in showing our completed work at the V &  museum Friday Lates Event. I'll write about that next time and will bring you more Robot updates soon

 

Art design developer making Projects technical

What I did with Lightning data,a Raspberry Pi and Anti-static bags

Do you ever wake up in the middle of the night when there is a thunderstorm happening and think "I wonder if its possible to make a digital sculpture that visualises lightning data using LEDs"?
No?
must just be me then.

That was back in March and after lots of faffing around with wire, plastic metal and code I have made it happen, here's how.

The first thing was to see if it was actually possible and for that I had to see if the data was available. There are commercial services that provide the information but they tend to be quite expensive as it is valuable for I think Insurance and similar services. I found an amateur network of people who run detectors and upload the data but they don't publish the data unless you have one of the detectors. I tried the Met office but they only publish data for lightning data for around the U.K, they publish an image file not actual data I could do anything with and there isn't enough lightning happening around the U.K for it to be interesting.

After finding lots of Flash based sites that would be either difficult or impossible to extract the Data I found the University Of Washington global map of Lightning data http://wwlln.net/new/map/    A bit of poking around and it was possible to find the underlying data to work with http://wwlln.net/new/map/data/current.json 

Next was the technology choice.  It would be powered by a Raspberry pi and use Neopixel strips for the LEDs.  I considered  both Python and NodeJS for writing the code. Python would probably have been the better choice and I think it would have been faster and easier but I hadn't done any NodeJS for a while and I wanted to dip my toes in again so that's want I plumped for.

First part of the develpoment was to control the Neopixels from the Raspberry Pi.  I used this Library https://www.npmjs.com/package/rpi-ws281x-native and set to work playing with the Neopixels.

It was around this time I had the idea of using metallic anti-static bags.

The eagle eyed among you might notice that I'm  actually using an Arduino for that test

I also started to think about what the sculpture would look like.  Not straight and angular like a single fork lightning strike, not a  sphere with dots plotted on it, I wasn't going for an artistic interpretation more than a simple  data visualisation. I began to think about  the swirliness and chaos of clouds and storms and started sketching some ideas.

I eventually settled on four long strips of  Neopixels, intertwined, each strip representing one quadrant of the earth taking the point that the equator and the Greenwich meridian intersect as the centre as that seemed a sensible thing to do.  I fell into a bit of an hole learning about map projections and plotting the data onto images of the Earth using P5JS .  It wasn't really necessary for the final outcome but I wanted to check I was doing everything correctly and it felt the right thing to do.

lightning data plotted onto map of Earth

I did some prototyping in P5JS to get an idea what it would look like and to  start working with the data.

Now I knew I could control the LEDs, had an idea of what I wanted the end result to look like and I was comfortable with the data I began to pull it all together.

To stop the Neopixels just from dangling down limply I came up with the idea of using the waterproof strips that have a clear plastic covering over them, into this I pushed down a thin solid wire that I had inserted into a clear heatshrink sleeving to prevent it electrically  shorting the LEDs strips.  This was a lot harder than I had anticipated and there was a lot more swearing than i thought there would be.

These strips were then covered in sleeves  I had made by cutting and gluing anti static bags. That was also more difficult than i thought it would be,involved burning my fingers with hot glue  and I didn't really work the best way to do it until it was finished. But it kept me amused on twitter for a few evenings.

A few hours were spent wiring it all up, crimping the connectors together, then taking it all apart and doing it again properly so it would actually  work and its now finished.  It can run either with the Raspberry Pi connected to the internet and pull down updates to the data or offline if there is some data loaded.

There are still some bugs in the software that need fixing.  I want to update the code so that it automatically detects if there is a live internet connection and if not will run in offline mode. It has run successfully for several hours per day for five days at an art show for Science Museum staff.

 

I've already started on getting rid of the breadboard wiring for the chip that converts the output from the Pi to a voltage level suitable for the Neopixels but thats a story for another day.

PCB next to bread board with chip and wires

 

 

I'd like to exhibit it further  but don't really know how to go about that. I would love to hear from anyone who could help me with further exhibiting or  knows how I would do that.  Leave a comment or get in touch on Twitter.

So here it is running

 

developer making Projects silly

Poking Mangoes

It seem like half the world has gone Pokemon Go crazy. The rest of the world has just gone stupid.

In silly times like this I like to make daft things.  Mostly inspired by this

And it turns out lots of people are using the #pokemango hashtag.

I decided that Pokemango should be a real thing, because that's the sort of thing I do.  Remember I made Farting statues, this is the level I work at.

Pokemango logo

 

A few  technical details you might be interested in.

Its built in HTML/Javascript/CSS.

The animation of the mango is CSS. I was only going to have a single version of the animation but triggering the same animation twice in the two different CSS classes didn't seem to work. I might have a look at why that is, but having two separate animations is nicer anyway.

It could have been done in just CSS if it was intended only to work on desktop browsers and be triggered by mouse hover over the mango but it felt that to poke a mango needed a definite click and not just a hover. And i don't think that would have worked on mobile browsers any way.

Its a responsive web page so should work on both mobile and desktop browsers.

I haven't used any browser specific CSS prefixes. Its been tested on Chrome/Firefox/Safari on a mac and Chrome on a Android tablet. I haven't tested it on a iOS device because I don't have one. If it doesn't work on one of those happy to make any changes if needed. Its not tested on internet explorer because frankly i couldn't care less about that browser.

The Sentence 'Poke the mango, go on poke it'  is a web font.  I thought as though i was doing lots of other CSS I might as well throw that in there as well.

The code is up on github if that sort of thing interests you, of course its all in the web page so you can look at it on there as well.

Any way it can be found at pokemango.bringtherainbow.com have fun.

Art making Projects

Making a new Skull

Most people would make a papercraft skull  as a Halloween project , but I'm not most people so I made mine in April.  This isn't the first skull I have made.  The first was around two years ago, it was made of paper, cut out with scissors and glued together using Pritt Stick.  It was always my intention to add LEDs to the eye sockets to make it extra spooky but because of  the strength and quality of the build it is  a little fragile and i didn't want to destroy it.

Having gained some more experience from the Oceans Project Little boat, as well as an X-Acto knife, a cutting board and PVA glue I decided to re-visit this project and add those red LEDs. It would also be a good project to control the LEDs from a small microcontroller programmed in C that I was exploring in my last blog post.

The first step was to print the Skull onto card.  I chose 160gsm from Ryman It is thick enough to have the required strength but still easy to work with.    The Skull design is from Ravensblight.com   As well as the Skull there are a lot of other spooky/monster themed Paper craft projects to make.  It was the design I used the first time.  I looked around again and it was still my favourite to use.

The only slight quirk to this design is that there are no tabs to glue together.  All the joins are made by placing edges next to each other and using sellotape.  This means that it is important that the pieces are cut out accurately.  The only place where i went slightly wrong on this was on the jawline.  The line prints out as a very shallow 'V' but the joining piece is perfectly straight.  It looks to be a slight error caused by the resolution of the printing rather than a mistake in the deisgn.  If I built the model again I would check mating parts before cutting  to make sure they will  line up correctly when joined.

Learning from my first build of the skull I glued re-enforcing strips along the joins as I don't think the sellotape will stay stuck for too long.

 

Here is build in photographs.

Printed skull design
Getting ready to start

 

Eye holes cut out of eye sockets
Eye holes cut out of eye sockets

 

Centre section of face cut out
Centre section of face cut out

 

Eye sockets cut out
Eye sockets cut out

 

Eye sockets joined to centre of face
Eye sockets joined to centre of face

 

Forehead joined to face
Forehead joined to face
Forehead sections joined together
Forehead sections joined together

 

Jaws cut out and ready to join to face
Jaws cut out and ready to join to face
Jaws joined to face
Jaws joined to face
Joining rest of top of skull
Joining rest of top of skull

 

Bringing sections togeth to form the finished skull
Bringing sections together  to form the finished skull
Eye sockets cut out
Eye sockets cut out

 

Eye sockets made up, with LEDs in them
Eye sockets made up, with LEDs in them
The finished skull, also has nose attached
The finished skull, also has nose attached
Finished skull with LED eyes lit up
Finished skull with LED eyes lit up
Original paper skull (left) next to new cardboard skull
Original paper skull (left) next to new cardboard skull

 

All that is left now is to connect the LEDs up to a microcontroller, so they can be controlled from a switch or a sensor.  I've also downloaded another project from Ravensblight that i'm going to have a go at.

 

 

 

 

 

 

 

 

 

 

 

 

Art developer Projects thoughts

More Ellipses, lots of Ellipses

If you saw my last post where i showed I'd been playing with drawing ellipses in P5JS I mentioned that I'd been trying to create  a simple animation of circles of continually decreasing circles. The result of my first attempt was interesting and I think quite beautiful, so here is is again.

See the Pen NxBJdy by Catherine Jones (@m-fkill) on CodePen.

Well after that I carried on. I thought making the circles as individual objects and then repeatedly drawing them at different sizes might be the way to go.

It wasn't but after playing with the parameters it gave an interesting effect

See the Pen QyZmpM by Catherine Jones (@m-fkill) on CodePen.

The third attempt to the object orientated approach further.  Each circle would be an individual object and I would give them a start radius, reduce the radius on each frame. Then when the radius reached zero, reset it back to the original size.

This sort of worked but it tended to create batches of circles with different gaps to other circles.  I think I could have made it work by working out the number of circles I needed for a particular canvas size and gap between the circles.  But it felt that it was starting to get complicated.

Of all the attempts though I think the result I ended with here is my favourite. Seeing the Circle pattern appear to grow, stay steady for a while then it sort of implodes on itself before finding its actual final pattern after around one minute was sort of cool, I couldn't have predicted that. If I had wanted to come up with that sort of effect I certainly wouldn't have gone about it that way.

See the Pen OMBvmR by Catherine Jones (@m-fkill) on CodePen.

After rethinking what I was trying to achieve and looking back at my previous attempts and what I had learned. Finally coming up with the working circle pattern was a lot easier and the simplest code of all the previous attempts. But i couldn't have done it without the others.

See the Pen BjqrZp by Catherine Jones (@m-fkill) on CodePen.

Art developer Projects

Making a Game

For the last eleven weeks i've been taking a online course introduction to programming for the visual arts with p5 js .P5 is a  Javascript library that makes creating art and interactive web experiences simple and accessible.

As well as introducing P5 the course has looked at different aspects of art created through software and shown historical examples to put the course into a wider context.

The last assignment was to write a simple game.  P5 isn't really intended for writing games but the course has covered enough to make a simple game possible.

I'm actually pleased with the outcome of my game and have had some good and positive feedback from my course mates.  Its not fully polished and finished but has the basic mechanic of the game.  It took me around seven hours on Sunday starting from scratch.

I'll probably update a few things and get it working on mobile devices. I've not tested it yet but think the canvas size might be a problem.

It doesn't have a proper name yet, the best i've got at the moment is Super Circle Colour match. It can be played at Super Circle Colour Match.

I've noticed it runs faster on Chrome making it harder than it does on Firefox, so thats a tip if you aren't good at this sort of thing like me.

Anyway have fun and let me know what you think,either in the comments or on Twitter 

Art Projects

Selling the Mona Lisa

A few months ago I went to Paris for work. I had hoped to see the Mona Lisa in the Louvre after i had finished but it was a Tuesday and everything is closed in Paris on a Tuesday,no one told me that.  I came home with only a blurry picture of the Eifell tower as a souvenir.

blurry Eiffel tower
Eiffel Tower, told you it was blurry

Oddly I know exactly what the Mona Lisa looks like having seen many pictures of it in books when I was younger and now on the internet.  This has left me wondering what exactly are those reproductions that we see on the internet. Is it the Mona Lisa or is it something else? Can I have an opinion on that famous smile or thoughts about Da Vinci's genius of being a master of both art and engineering without ever actually seeing the original?

To help me try and understand what digital images are i decided to see what would happed if I base64 encode the Mona Lisa and other images of artworks.

If you are not familiar with it base64 encoding is a method of representing digital data for when it needs to be transmitted over a medium that only supports sending textual data. If want to know more have a look at the Base64 Wikipedia page

I wrote a short Python script to convert a binary file to a based64 encoded text file.  Opening this text file in a text editor was odd.  The data wasn't recognisable as the original Mona Lisa in any way. There is no way of telling what parts are the background or the different colours that are present.

Mona Lisa

The Mona Lisa image file  I  used was taken from Wiki Media commons and according to Wikimedia the image is in the public domain so I could use it without fear of anyone demanding money for its use.  That doesn't go for all images of the Mona Lisa.  Corbis a company owned by Bill Gates sell licenses to images of the Mona Lisa.  Is there's a better image of the Mona Lisa because its the official licensed version.  Would I get more please or a better understanding of the work if I looked at the Corbis image over the Wikimedia Image?

Girl with a Peal Earring

 

Sunflowers

As well as Base64 encoding a mona Lisa image I did the same with The Girl with a Pearl Earring and Sunflowers  Both of these I used the smallest image size that was available.  For sunflowers I decided to make it smaller still. When I base64 Encoded that tiny picture which became pixelated and distorted when zooming into it there was a odd string of text in roughly the centre of the file

 

"BRERERERERERERERE
REREREREREREREREREREREQBFRkZIBwgJhgYJjYmICY2RDYrKzZERERCNUJERERERERERERERERE
RERERERERERERERERERERERERERERERERP/AABEIAHkAXAMBIgACEQEDEQH/x"

 

Not sure if that has any meaning or if its just a strange human thing that we give meaning to something without any meaning, after all that string represents some digital data.

 

To complete this exercise I decided I would take these text files and create digital images from them and put them up for sale.  Maybe in a few years time these images are what robots will hang on their walls of the homes.

The images are available from Redbubble as everything from a hoodies to iPhone covers.  Not sure Van Gogh,Vermeer and Da Vinci would ever have imagined that their paintings would be transformed into a series of  text characters adorning mugs and iPad covers when they painted them.

Red bubble

I'm not quite sure If i've satisfied my own curiosity about what these images actually mean, if anything i'm even more intrigued now

I'll put the Python script and Base64 Encoded text files on to git hub later on for anyone interested

 

Art Projects thoughts

Making a Twitter Art

I make lots of things, If you want you can have a look at the ones i've wrote about on this blog now that i've organised them all onto one page at http://www.bringtherainbow.com/category/projects/ 

Some of them are for a real good cause like the little boat, I made for Oceans Project . Others are to learn about something new like the Unofficial guide to the Natural History Museum

Sometimes I just want to make things that don't exist  or turn a tweet into something real  and sometimes I just want to make statues fart 

What i've never called any of the things I make is art, to me all the things I've made are just things i've made. But my latest project I think it is art simply because I can't think of anything else it could be.

When I was working on the Tweeting Satellite  project for work last year i became fascinated with twitter bots and how metronomic they are,  sending out tweets regularly, not needing something funny to happen to them on the way to work or to be frustrated that the milk in the fridge has gone off for them to tweet.  The Tweeting Satellite was only a short project but I wanted to create something whose entire point was that it would tweet regularly for a long time.

Its taken a while since I wrote it but @ColoursAll is now live, it will tweet every hex colour from 0x000000 to 0xFFFFFF in order. The reason its taken so long is that rather than just sign up to an hosting service I wanted it to actually physically exist.  For this I took advantage of Colocker offering a free hosting to a Raspberry Pi for members of London Hackspace.  This was most of the delay, getting around to setting up the Raspberry Pi.

At around  the same time as writing @ColoursAll I wrote @TickTockBot which ran over New Years Eve.  I always find New year a bit strange, its seems such an arbitary celebration that I don't understand  and every year now I just tend to hide under my duvet. @TickTockBot was my way of dealing with it last year.

Anyway @ColoursAll is running and is due to complete in approximately 1915 years time.   It feels odd making something that has the potential to last so long. I'm guessing that in actual fact it won't last that long. Something will happen  first. Twitter will shut down,Colocker will shut down or the world will just end.

I should probably have  put a message to be tweeted at the end but I haven't, or have I?  You'll just have to wait and see.

making Projects

Making a small boat

Last year I volunteered at the first Technopop festival in East London for three weekends.  The first two weekends was helping teach kids to program in Scratch and build and program Robots.  On the last of these weekends I was stood next to a boat,  that might sound boring but its not just any boat.

boat_technopop

The boat in question belongs to Sarah Weldon of Oceans Project, Sarah is aiming to row around the U.K a challenge named The Great British Viking Quest  As well as rowing around the coast of the U.K Sarah will be documenting her progress with wearable technologies and using an online learning platform to communicate STEM (Science,Technology,Engineering and Maths) subjects to students all around the world.

Sarah

 

All the time Sarah will be collecting data as part of her PhD research into 'effects of calorific stress on the neuro-cognitive performance on ocean rowers'.

It was really cool to talk to Sarah at Technopop festival and find out all about the rowing.   I really liked the technology aspect to the expedition and was  impressed by all the planing and preparation she has to do for the trip.

Skipping  forward a few months I have started to become interested in paper model making and am trying to build a model McLaren P1 Car from a kit .  Lets say its going quite badly at the moment.  I've already scrapped the first two versions of it so decided to take a break before trying again.  But had become interested in the process of turning a 3D model into a Papercraft version.  Also wanting to learn how to use Blender  to create 3D models,knowing that Sarah had just launched her Kickstarter to raise the funds for the expedition and wanting to support her  I had an idea.  I would make a Papercraft model of her boat.

Creating the model in Blender wasn't too hard.  There are a few ways of doing it but by far the simplest is to start off with a cube and then stretch,extrude and add faces and edges as needed.  Its not perfect replica but I didn't want to make it too complex knowing that it would be being turned into a paper model, so wanted to keep it nice and simple.

When it came to turning the 3D model into a paper model I knew of  PepaKura would do the job but thats Windows only and I use a Mac.  Fortunately while learning Blender I found the plug in system so wondered if there was a plug in that would do the same  and there is 

After exporting the model to create the Paper mesh I used Illustrator to scale it up and then split into three pieces to make it a decent size and fit onto a single A4 piece of paper.

It took about three prototypes altering the tabs and tidying up a few details before I was happy with it and send to Sarah.

 

boats

The model is now available on the Oceans Project Website   Why don't you download one, make it and decorate and send the results to Oceans Project.

It would be great if you too supported The Great British Vikings Quest by backing the  Kickstarter for the project.

 

boat_picture

 

Projects

Unofficial guide to the Natural History Museum

Do you  remember Farting Statues from last year? I like to think of it as the  cult hit of 2014.  I like to think that its far ahead of its time and in many years to come it will be seen as a defining moment in the fart apps genre.  Probably won't though.

But writing it did get me thinking a lot about how people can be inspired by museums to write apps and learn to code.  But its not all about coding.  I started to write a computer game based around the Horninman museum.  But while writing it I got a bit distracted by the Guardian article about Twine

I'd heard of Twine a few weeks before but not really looked at it much,   and I still hadn't intended to as I wanted to concentrate on the Horniman game.  That changed when I visited the Natural History Museum one lunchtime.  Wanting to see Sophie the Stegosaurus that had recently been put on display I headed to the Dinosaurs Gallery, but no Sophie.

Discovering later that Sophie wasn't with the rest of the Dinosaurs but in the Earth Hall gave me a couple of ideas.  One is a game based around Dippy and Sophie and the other was a re-thinking of the traditional museum guide or map.  The Dippy & Sophie game will come later (Hopefully) but I got working straight away on the museum guide.

Using only the Natural History museum map  and website I've created a basic interactive guide basing it loosely on the early eighties text adventure games like  Sphinx Adventure  The guide gives you a description of your location and the options of where to go next.

 

Structure of the guide
Structure of the guide

The guide is up online  for you to try out.  I'm not going to make any claims for its accuracy, as I've not had chance to try it out in the museum yet to check, but will do.

 

Screen Shot 2015-02-08 at 12.20.21

I'll put the code up on github for anyone who wants to build versions or just have a look how it was built.  It barely scratches  what Twine can do using only links between the passages.  There is the possibility to add in Macros,variables and add more interactivity.

Would love to hear what you think of the guide and using Twine for developing interactive museum games.