Category Archives: developer

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.

developer making technical

Going Beyond Arduino part 1

This is Part one of probably three. but that might change.

I love Arduino, you should love Arduino, we all should love Arduino. Good that's settled then. But if Arduino is so good why would I want to go away from this.

Like a lot of things I start playing with, I want to take them apart,explore them deeper and find out how they work, even if that means things get broken in the process. With Arduino that started when I started listening to the Embedded.FM podcast. If you don't listen to Embedded.FM I really recommend it, Elecia and Chris cover everything from Hacking BB8 toys, through STEM education to the control of quadcopters and satellites, with the occasional cat interview thrown in for good measure.

Right, back to Basics and a few terms explained. The Arduino is a microcontroller board. A microcontroller is a simple computer that has all the components that are normally all on separate chips and connected together on one single chip.

To make programming easier the microcontrollers on Arduino boards are pre-programmed with a bootloader. The bootloader is a small program that runs on the microcontroller to allow the code to be sent straight from your computer to the microcontroller without any additional hardware needed.

My motivation when I started with this was to completely remove the Arduino environment. This meant no bootloader, no Arduino IDE or libraries and to write the code in C.

The first step I took was to buy a ATTiny85 microcontroller. These are the chips that are found on Adafruit Gemma, they are simple and cheap enough to not have to worry if things went wrong.

After getting the ATTiny85 working I started playing with the chips on an existing Arduino board that were already programmed with the bootloader and also through up other surprises I didn't know about. I'll cover those in a future part, when I start to

Before I begin its worth mentioning that all the hardware and software I'm talking about is relevant to the Atmel AVR chips which power the majority of Arduino boards. There are some boards that use ARM or Intel chips. I haven't explored these boards yet.

To program the microcontroller without the Arduino environment two things are needed a programmer to talk to the microcontroller and software to send the code to the microntroller.

There a lots of different hardware programmers available, its possible to set up an existing Arduino board to program.
This is the one I have,
USBASP Programmer

it plugs in to the USB port, includes a cable and adapter to convert the header on the cable from 10 pins to 6 pins. The other small device in the centre of the cable is a breadboard adapter from Adafruit that makes using the programmer with breadboard easy.

Searching for usbasp on ebay will turn up loads of these, some the bare boards and some in the nice green enclosure like mine.

The software needed to send the programs from your computer is called AVRDUDE. There might be other software for doing this but I'm not aware of any.

For installing AVRDUDE Limor Fried (Lady Ada of Adafruit) has tutorials for Windows, Mac and Linux. 

I installed AVRDUDE by installing Crosspack as suggested.

Its worth having a read of all of Lady Ada's AVR Programming tutorial. I found it really useful.

So thats the beginning covered, the chips,the hardware and the software. Next time we'll build a simple circuit and program the ATTiny85 using the USBASP programmer and AVRDUDE.

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 thoughts

Playing with ellipses

Have been playing with P5JS a lot recently.  Was wanting to create an animation of continual decreasing circles.  It didn't really come out like I intended but I like what did happen.

Also trying out using codepen.io for putting the Javascript experiments online

See the Pen NxBJdy 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 

developer python technical thoughts

Do you remember the Mackerel?

You might remember my recent post on writing a short python program to solve the Yakult problems on the tube
I said then that I didn't think it was the only or best way to solve the problem. I've spent a few minutes tonight improving it and have also made it so it takes a command line argument so it can be run from the shell

e.g
>> python yakult-problem.py mackerel

st. Johns wood

Not going to go into details her but if you are interested it is up on github

developer python technical thoughts

Solving the 'Yakult Problem' in Python

They say one of the best ways to learn something is to teach it,  I think they do, sure I have heard that somewhere, never sure who they are and  even if they don't I'm saying it now.  As I'm doing a proper course in learning Python I decided to write this short tutorial on one aspect of the python Language.

If you live in London you may have seen Posters advertising the Yakult Pro-bio-whatever drink stuff.  Not the faintest idea if its any good but I do like the posters with a short teaser on it.  Something similar to:

Yakult riddle

 

 

o.k Lets break the problem down.

1. load the file in

2. Go over (or Iterate over as we say in computer speak) all the station names

3.  Iterate over all the letters in the word that I am testing the  station names against.

4. Iterate over all the letters in the station name and compare it against the word being test

5 if  there is a match of letters , stop and move onto the next station, no point in carrying on

6 If no letter matches are found, store that station name for retrieval later.

Loading the File

It took a little while to find a list of all that station names in an easy to use format, but manages it after a bit of searching a messing. The stations are stored in a file called station_list.txt

#Create  a list to store the station names in 

station_list = []   

#open the file called stations_list.txt and store it in the object called stations_file

stations_file = open('./station_list.txt', 'r')  

#Read the stations in from a file
     for line in stations_file:

#Store all the stations in a list after converting the characters to lower case

station_list.append(line.lower())

stations_file.close()

I don't want to focus on the file reading as it is not core to this exerscise.  Converting the characters to lower case was something that was picked up in testing when I realised the the Upper case initial letters of the station names were not triggering matches against lower case letters in the chosen string.

Ok rather than going line by line it will make more sense if I add in the 3 iterations of step 2,3 and 4 then flesh those out with what happens in each one.

 

for station in station_list:

    for my_char in my_string:

        for station_char in station:

 

 

As described above the program iterates over the station_list.  'my_string' is then name of the variable that holds the string that is passed to the function when it is called, that is then iterated over and finally every character in the current station name is iterated over.

So the first thing to do is compare the current station character with the current character in my_string and if they match then stop the current loop

if station_char == my_char:

    break

 

Thats stops any more tests on that station name happening for that one particular letter in my_string, but carrying on testing my_string at all is wasteful and we haven't done anything to store the station name if none of the characters match.

 

 if my_char_count == len(my_string) -1 and not found_letter:

    result_stations_list.append(station)

 

You will see that these lines test a variable called  my_char_count against the length of  my_string and variable called found_letter .  This is finding out if the current character is the last one in the word and if no matches have been found.

If  that test is passed the station name is added to the list of  results with

     result_stations_list.append(station)

Finally the my_char_count is incremented and when all the iterations are compete the result_stations_list is returned from the function

 

    my_char_count +=1

 return result_stations_list

Because the station list are separated by a newline the list shows that as '\n' these can be removed if you like, but i'll leave that as an exercise for you to try.

 

That shows the basic workings of the program,  the full thing is on github have a look and see what you think.  I'm not saying this is the best way to solve this problem, am sure its not the only way.   But its the way I wanted to solve it using the Python language constructs we have been learning in class and hopefully it nails the workings of the language into my head.

For another take on the problem a solution in Java can be found on this blog

 

Oh and if you are interested 'St Johns Wood'

developer museums Projects technical thoughts

An App called Farting Statues, I made it, here's why

Farting Statues, yes really an app called Farting Statues.  If you don't believe me go and have a look on the  Google Play Store  If you have a Android device install it and have a play with it.   Ok it's a real app that I made, explaining why I made it might take a bit longer but here goes.

 

Farting Statues main screen
Farting Statues main screen

At the end of last year i took a Coursera course called  Creative, Serious and Playful Science of Android Apps an introduction to computer science and writing Android apps. I'm not a really a beginner but it was a nice course to do. I picked up  some useful tips and tricks when using the Eclipse IDE and it was good to have a lot of the things that I have taught myself verified as the right way to go.

One of the early assignments was to produce a simple app that displayed a photograph of an early computer along with explanatory text. The assignment didn't require any coding as such, just to produce a portrait and landscape layout and have it swap between the two when the phone was rotated.

The assignment did get me thinking, it had a very stong museum feel to it , very similar to the sorts of apps that museums produce, but theirs are so much more polished and professional, but here is me writing a very small and simple museum type  app. Would it be possible to use app writing as a way for visitors to engage with content.  Instantly I fell in the love of the idea of guerrilla museum apps. Visitors writing apps using the content available on museum websites . Distributing them on app stores for other people to use when visiting museums.

There is a big push at the moment for people to learn to code, to use computers to not just to consume content but to create it as well.  I decided to write a museum app to explore this idea and look at the the potential pitfalls of doing this both from a app writer ,visitor point of view and what benefits and problems it would cause a museum.

First thing pick a museum and collection. The Science Museum might seem an obvious choice as I have easy access to the collection and information. I also really like my job and The Science museum had just launched an official iPad app. Creating a guerrilla version of that app seemed a really bad idea if I wanted to keep my job.  I wanted to be a little subversive but I'm not stupid.

Around Christmas Time  Team Cooper launched a game little browser game  called Farter Christmas. It was silly, childish and great fun.  That gave me the idea, combine the childishness of a fart app with the high culture of the statues in the Victoria and Albert museum.

The concept was simple and didn't change. Pick around five or six statues, find out a few  facts for each one and reveal a random fact combined with a fart noise.

The first version of the app was really easy to write and operationally didn't change through the development. It had just one small problem. The app crashed a lot.  It took quite a lot of digging around the developer docs and Stack Exchange pages to find out how to cure the problem. hitting a problem like this instantly takes the app creation process from something that an absolute beginner could do to something that requires either great determination and time spent learning other app development skills and knowledge, or assistance from somebody more experienced.

Once I had solved that problem there wasn't really any other technical problems.

Finding Content 

The next part was to find the  statues and facts about each one. The finished app only has two statues from the V & A.  They are the Dacre beasts - Dolphin and the Bather by Albert Toft. The biggest problem with selecting statues was finding the Content.  I  really loved the Dacre beasts so was glad to find information  about them, but very little on the V & A website.  There was only really Rodin's The Thinker that had a lot of easily available information because it is such a famous piece.

 

The Dacre Beasts, The Dolphin
The Dacre Beasts, The Dolphin

So not only did I have to widen it out to to statues not only in the V & A I had to widen it out to statues outside of museums all together. That is why the Moai Statues of Easter island are included.

Morals and Ethics

Its a silly app with farting statues, it might not seem that Morals and Ethics would be a concern.  While walking around the V & A I realised that a lot of statues are of a religious nature. They have representations of Buddha, other Indian Gods and the Madonna and Child.  Using any of those in the app could potentially be offensive to people of any of those religions. I wanted to create a fun app not one that could cause serious offence, again i wanted to be a little subversive but i'm not stupid.

Copyright and Licensing

The two V & A statues that I used the Dacre Beasts Dolphin and the Bather are both photographs that i took myself, why? I couldn't find any appropriately licensed images to use.  All of the other photographs are from Wikimedia and either Creative Commons Licensed or released into the public domain. That was the reason for the prominent credits button on the front screen, I wanted to make sure that the licensing of the images  was clear and up front.

It was only near the end of the development process I realised the image I was intending to use for the Bather wasn't licensed for use, so had to take my own photograph.

One of the statues that I did consider using has a image available from Tate images. The cost of using it was prohibitive so wasn't chosen, looking at  the categories of products and media available they were all aimed at physical products, mousemats,mugs posters etc. nothing suitable for use in a digital product. It makes me wonder how museums will handle people wanting to use images in apps

Advertising and Distribution

The app has adverts in it. The are displayed on the individual statues but not on the front screen. This was something I hadn't done before so wanted to do it from a technical point of view to see how easy it is and to consider what happens when an app developer uses a museum content to make money.  I'm not sure how much the app will make. I'm not expecting to get rich from it.  Just as the museums has no control over people developing apps with its images I have realised I have no control over the content of the adverts. On the Play store the App is marked as suitable for all ages but looking at a few ads that have come through on my phone already, one is to download a 'virtual girlfriend' not the faintest idea what that is and don't plan on finding out, but not convinced it is suitable for 'all ages' or wouldn't end up creating a massive security hole on my phone.

Are museums set up to make money from apps that other people develop. I have not made any connection in my app between myself and the V & A or other museums.  If people were to write apps using museum content and distribute it would it be clear that it isn't an official app produced by the institution. What if there are mistakes or offensive content? what would happen then. How much trouble would it cause for the museum or gallery?

Conclusion

So do I still think that that writing guerrilla apps is a way for people to remix and engage with museum content while learning to code?  The barebones of this app were written in a single weekend but it took a lot longer to research the content for it. I am lucky to work next door to the V & A so popping across the road to take photographs wasn't a problem but if you aren't near a large national museum or the museum that you want to take photographs of doesn't allow them could cause problems.

It won't be straightforward and I can see  apps like these developing in two ways.  People who can already code will develop apps along similar themes to Farting statues. Hopefully not loads of clones of the this the world doesn't really need any more farting statues apps. But being creative and having fun. I have been careful to make sure the images were properly licensed. The majority of the content comes from wikipedia rather than museum websites, so is the information correct?   its as good as i can make it but i'm not a expert on any of the statues or the artists. I would rather have the information come from the  definitive source of the museum website but wasn't able to.

The other possibility is for museums to run coding workshops with visitors, start with part written apps or web pages and embed museum content into them.  Web pages can easily be converted into mobile apps.  This would give people an app they can take away with them and would hopefully be a springboard into finding out more about coding and app development.

Either way it needs museums to push out more content and information, the internet isn't limited to the space on a label.  Its a lot easier to find information on wikipedia than it is on a museum website.

In the same way that museums worried that putting content online  would reduce physical visitors to their institutions I have no doubt there will be similar worries to putting content online in a way for people to re-mix and develop. While developing this app I found myself  becoming more interested in the information than just reading it, having to find useful facts and  break down  the content down in to small chunks made me draft and read and re-draft the text several times.  This is something Museum exhibit developers have to do so why not break down the barriers and  give visitors this chance to get down to the nitty gritty with the content. After  all as its digital it can easily be changed, thats the beauty of it.

If museums want to stay relevant as hopefully their  visitors become not just consumers of digital content but creators as well a shift will be needed to make more content available online and encourage its use rather than creating barriers.  Guerilla apps and Farting Statues may not have all the answers but I think it could be a start

 

 

 

 

 

developer museums

You can't win the prize if you don't enter the raffle

I love winning a prize so when I saw an opportunity to win a Scholarship to attend SXSW2014 Interactive   it was definitely worth a go.

ImmediaTag.com were offering the opportunity for a museum professional to attend SXSW Interactive, if you haven’t heard of SXSW (South by South West) its a big conference held in Austin Texas, originally just music but has grown to embrace Film and Interactive media.

SXSW Interactive is where cutting edge technology and start ups demonstrate their new ideas and products,hoping to get noticed to secure funding or create buzz to bring their product to the wider public.

So when I found out about the chance to win a pass to go I jumped at it.  There were 4 passes been given away in two draws.  I had missed the first draw but could still enter the second.

There was a little bit more to it than just entering into the draw. I had to answer three questions.  The first was to describe my role in the museum.  For this I talked about how I work with other departments,creative agencies and developers to deliver New Media into our galleries and exhibitions.

Second was to explain why I would like to attend SXSW Interactive. On this i talked about how I am really engrossed in the museum world but trying really hard to learn all about how digital media and technology can be used in museums but also it is important to look around outside of museums at new ideas and ways of thinking.

Finally I had to think up an idea for a mobile app,this had to be completely new and not implemented anywhere else.   Rather than briefly describe itm, here is what I wrote in full:

I see a lot of people taking photos of our objects especially in the galleries that have the large objects, the aeroplanes,cars,space rockets. There are already plenty of social apps to share and tag these photos so that people can see them. What the social  photo sharing apps don’t do is connect the shared photos with the museum content.  

What I am proposing is an app that  has two modes of operation.

In the first mode  to be used in the museum, the app will be an augmented reality mode, it will recognise objects and display both photos that have been shared by other people and information about the object. The information will primarily be the museum written information but can also pull in from other sources such as Wikipedia, tagged tweets from visitors  or others as applicable.

Other features would also be possible,  take your own photo to share back for other people, tweet a comment or do a facebook ‘like’.

The second mode is designed for use outside of the  museum, working slightly different to the in museum mode,  and is intended to engage visitors with the collection before they visit.  It would start by presenting the potential visitor with an ‘official’ high quality photograph of an exhibit that a user can select they can then see the photographs that the gallery visitors have taken, see what people are tweeting about the object and again read the information written by the  museum and other sources.

Interesting things could be done to connect the pre-visit with the visit modes such as allow users to create trails for other to follow, or by measuring the number of tweets or photographs about an object create heat maps to allow potential visitors to see what other people are interested in.

 

From after answering those questions my application would be vetted and if suitable I would be entered into the draw. From the first round approx 40 people entered and about 10 of the applications were rejected.

At this point if you are probably expecting me to say I was entered into the draw,won the pass and will be attending SXSW Interactive. Sadly no. I passed two rounds of vetting and was into the draw but my name didn’t get pulled out of the hat. It was worth doing just to be challenged to think up an idea for a mobile app. Getting through the vetting gave me confidence that if something like that came up again it would be worth giving it ago and you never know next time I might get lucky.