Category: Processing

Processing is a beginner friendly programming ecosystem based on Java

Using maps and geocoding to follow the money

I do shows all over Durban and surrounds – but where exactly? And which areas are the most lucrative? To work that out I made an interactive Desktop app using Processing and the Modest Maps library. To get the points on the map I used Google Geocoding api.

Map details page

How it works

The process is quite simple, I create a csv file from our records, with the customer address and total invoice amount in columns (as well as blank latitude and longitude columns).

I created a start screen to choose which csv to use for the visualisation, with an option to fill in the locations using Google geocoding* api.

*geocoding is taking an address and turning it into location co-ordinates.

Menu page

Once the geocoding is done, there are two options, map or details. The details page is basically the same but the points are larger or smaller depending on the amount.

Google geocoding is not completely accurate, so there is a bit of csv editing still to be done – some addresses may appear in different countries for example. Luckily fixing this manually is quite straightforward, you just find the correct location on google maps and then copy the “lat” and “lon” parts of the url from the browser address bar (just after the @ symbol).

The “Modest Maps” library for Processing has many options for tiling – I switched to the satellite view for the screenshots above, to avoid giving away sensitive information. Usually I use a street map view of course.

Purpose and functionality

The purpose of this app is mainly to see where all of our customers are booking us. This information is useful for marketing. When the program is running, two boxes can be drawn around areas on the map, and the text at the bottom compares the total invoice amount within those boxes. The map can be zoomed and panned, and a total for the whole page (with percentage) is shown for reference.

Comparing two zones

More possibilities

Since the pandemic is effectively over and we are back to full strength in terms of bookings, these statistics are now valuable again for my entertainment business. I plan on extending this simple app with more statistical visualisations – perhaps a colour map of distance from my house, and also pairing it with a database and more fields, like dates and type of booking. I could also automate the data entry, although that is rather trivial with a bit of spreadsheet manipulation, and I only really look at this a few times per year.

K8 Virtual Juggling with working remote

K8 are my favourite type of LED juggling equipment. Recently I updated my virtual juggling web app to include a working remote control – just like the real thing.

The App

So the app consists of an animated juggler, a remote control and “Change your pattern” button.

While the juggler is juggling, you can press buttons on the remote to change the juggling ball colours (accurately emulating the actual K8 equipment settings)

The “Change your pattern” menu is a large list of different juggling patterns, which when selected will change the animation displayed.

How it works: back end

The back end is based on Flask. I am using the beautiful soup library to fetch the menu of juggling patterns from the awesome library of juggling website. Once selected, the gif of the pattern is fetched. It is then processed (a script inverts the colours and makes the juggling balls transparent) – if that hasn’t already been done for the particular pattern.

How it works: front end

The juggling animation and remote control are written with P5.js. The juggling ball colours are implemented as a background which shows through the transparent balls. The button co-ordinates are relative, so work on any size screen (looks best on Desktop)

Magic Poi 2022 update

Current state of Magic Poi – and some ideas for the future.

First of all, an announcement: Magic Poi is now available for ESP32, as well as ESP8266 architecture. This will bring improvements in performance. I plan on continuing support for both, and in the near future a combined code base will be provided.

I am going to list current features here, and improvements I plan to implement.

On-board images:

  • I have partnered with EnterAction, an awesome Sydney based fabrication company who are taking over the hardware development from now on. Improvements will include an SD card add-on for limitless on-board storage. This will require changes to the code, as currently the maximum is 52 images supported.

UDP streaming:

  • this is a defining feature of Magic Poi. The images are generated off-device, and “streamed” via UDP pixel by pixel. I plan to keep improving this functionality but change it to not be the default mode. Due to WiFi interference the UDP stream is sometimes interrupted, making the LED’s stutter, so work is being done to mitigate that.

“Timeline” – images changing in time to music:

  • currently there is a desktop app to generate the timeline (and associated images) and save as a zip file, which needs to be uploaded to the Android app in order to be “streamed” to the poi. I plan on changing this functionality to rather happen in the poi code, thus avoiding the WiFi interference problem. The timeline editor will be made into a web app, with the option to download directly to the poi.

Station mode:

  • poi connected to a router provides more stable WiFi than the current AP mode. I have made a start on providing a way to use this mode.

Online account:

  • like a PlayStation or Kindle, there is a benefit to having a cloud aspect to any product that consumes media. The Magic Poi website is going to be a place where you can upload and share images and timelines, as well as interact with other poi owners. All uploaded images will be private of course, unless shared. I have made a start on this cloud aspect, with an option in testing to download images directly from your cloud account to the poi. The ultimate goal is to be able to sync any two pairs of poi with two clicks!

Android app:

  • Still not working: text to image (stream words directly to the poi).
  • Once the online portal is finished, this will be added to the app, so shared images and timelines can be viewed without need for a web browser.

The above is a small part of the list – thanks to EnterAction taking over the hardware development side, I will have more time to devote to the software improvements. We also plan on adding a battery level indicator, and a higher power battery for more play time.

Thanks for reading!

Keep an eye on this blog, and sign up to the newsletter (if you haven’t already) for more updates as Magic Poi moves forward towards it’s inevitable crowd funder launch!

UPDATES:

Sign up for our update alerts:

Whatever happened to processing.js

I have mentioned this before, Processing is the greatest tool to code for me because it provides easy access to so many creative coding options. The main reason I love it so much is because it is cross-platform. I use the same code on the web, desktop and mobile apps (Android).

Now one of those options is less accessible for many new coders. Namely, processing.js.

What is processing.js?

If you don’t know, processing.js is simply a way for your processing (JAVA) code to be translated into JavaScript and run in a browser canvas window.

Why is it cool?

I love processing.js because it’s the easiest way to use the same code and get web-based sketches running on my own server. Just include a processing.js file and the processing sketch (with a tiny bit of html) and it works.

What to do now?

Processing wants us to start using P5.js which is the functionality of Processing but using JavaScript syntax. I am mainly an Android and Java programmer, so for me this is an unnecessary step (mainly involving changing all int’s and floats to var) and I personally will continue using processing.js.

But they took the website away!

Now we come to the reason for this post: they took away the website! If you try and go to processingjs.org website now you will find it’s been taken down by the maintainers. Only the github code is left for posterity. Well luckily there is always the wayback machine: https://web.archive.org/web/20180510071709/http://processingjs.org

Processing.js is alive and well. It’s still working on my site, you can see a load of them all over this site, and on my cv even.

Legal Animation

A friend who is a graphic artist contacted me, he has a client who is looking for some complex animation of legal transaction history, to illustrate corrupt dealings I imagine.

Anyway, here is the work I’ve done so far.

Hypothetical scenario: There are some terrible things going on at Google, FaceBook and Monsanto. Not to mention the USA, what are they doing with their finances? Check out the attached video to find out!

Corrupt Companies and dodgy dealings

Think I am going to get the gig? At this point I am enjoying creating this program enough not to care.

For those who are interested, the data comes from .csv files – transactions and accounts. Also there are different types of transactions, indicated by a different coloured line. Still a lot to do, but I’m quite proud of this one.

Smart Poi Emulators

Two emulators are featured here, the first takes all images in a folder and shows them in sequence, as they would look on the spinning poi:

 

The second program receives RGB values from serial connected poi chip and displays on screen. This is showing what is actually being sent out to the LED strip, useful for testing – I was getting a bit tired of spinning the poi whilst programming them and the Android transmitter app at the same time.

The image below is of the computer generated default offline patterns, but if wifi sent images are available it looks somewhat similar to the above. Colour is not yet optimized.

 

For the serial sending to work on the poi, a fairly large change in code is needed. The serial necessarily slows everything down drastically, so it’s for testing only.

Android Development Overview

For Android I started off using MIT’s app inventor:

http://ai2.appinventor.mit.edu/

This was fun and I had some success with a few projects, however as a touch typist I am always more comfortable using the keyboard. As I was already using the amazing Processing IDE for desktop Java apps,  Processing for Android was the next step:

https://processing.org/

Of course there is no substitute for the real thing, which is what I am using most often now, Android Studio. Processing for Android provides a handy tool for exporting sketches as they are called, so the transistion is pretty seamless. Android Studio is a huge IDE with bells, whistles, mags and stickers attached. Learning how to use this beast is going to take a long time, especially with Google pulling out the rug (ie changing everything with each new release) every couple of months.