Cubomania revisited

A while back I did the daily create for 6 January 2014 Create a Self Portrait Cubomania Style. And knowced up a couple of quick web pages to make cubomania images and gif.

The other day I was messing about with some web pages inspired by the Universe app and was reminded of the cubomania stuff.

I’ve updated the Cubomania Gif! page so that you can, choose the number of slices, speed of the gif and the ability to add a frame of the original image. You can also make static jpg versions on the same page.

 

5secondsapp_498425234-099759

 

img_6817

I am attracted to the random nature of cubomania, interestingly if you search for images online many look as if they have been rearranged with some taste as opposed to randomly.

Featured image on this post was from a tweet by Theo created with the webpage.

One more, this time including the original

5secondsapp_498428475-561321

A Short Intermission

We see a deluge of media dumped into twitter, Facebook, tumblr with no context. Fwooooooooooom it goes, down the stream, with no context. Wheeeeeee.

Too bad, because I think you are missing out if you are not narrating your work.

from: The Good, The Bad, and The Puppy (and some pondering on Making / Making of)

Alan reminds us of the importance of narrating our work and learning, so here is a short story about mine at the weekend.

Over on twitter I was pointed to The Walk of Life. This is a amusing site playing with the idea the The Walk of life works with any movie ending as background music. The creator has carefully edited a spectrum of movie endings to prove his point.

A nice wee twitter chat bubbled up, until Mariana asked David what he though would be a better tune. He proposed, intermission, from the end of the Monty Python movie.

A this point I though that is might be easy and fun to make a webpage that could show a variety of videos with that music behind it.

First I needed the music. As I was reading twitter on my phone at the time, I copied the url to the intermission clip on youtube and passed it to Workflow.app. There is a workflow to convert YouTube videos to mp3s and save them to your phone. I put it in dropbox.

I then search YouTube for movie endings. Searching for ‘movie endings’ found collections of 10 best movie endings and the like, but changing the search to particular movies title and ending indicated there were enough to play with.

Moving to my computer I had a look through old projects to see if I had youtube player code handy. I did, but found out pretty quickly (these were broken) that the YouTube API had changed. Over to Google and I got this:
YouTube Player API Reference for iframe Embeds  |  YouTube IFrame Player API  |  Google Developers

The plan was to get one movie playing with intermission in the background then change it so that different movies could be used instead.

I created a empty html page and put the intermission mp3 in the same folder. I was not intending to do anything fancy like turn the audio on and off when the movie played or paused (I don’t think that would be too hard). so I just created an audio tag: No controls so that the player would not show; autoplay and looping on.

<audio src="monty_python_and_the_holy_grail-_intermission_music.mp3" id="intermission" looping></audio>

Next I copied the example player code from the API page. I now had a page that played the movie and the audio at the same time in an appalling fashion.

Digging round the api pages, I found out how to mute the video, start it playing as soon as it loads and hide the controls.

Starting it and hiding the controls is done in script that loads up the iframe, autoplay: 1, & controls: 0.

Muting is just player.mute();

One of the problems with using google for this, is that there is often more information and answers that point to older and unsupported APIs. Sometimes it is better to look through the docs than type questions into the address bar.

Loading other movies. You can load movies into a player with:

player.loadVideoById(videoid);

Using the movie ID, the movie ID is easy to find from a youtube page URL:

https://www.youtube.com/watch?v=O0wOD9TWynM

So I could hard code a few buttons to load some different movies.

Next I want to allow folk to use their own choice of movie, so I added a field to paste in a YouTube URL. From that I would need to extract the v parameter, google took me to: javascript – how to get youtube video id from url – Stack Overflow that worked a treat.

Finally after a tweet from Alan suggesting a movie I added the ability to pass the webpage a youtube ID in the url:

http://intermission.surge.sh?v=Mwq0mgvC1eY.

Of course all of the code can be viewed in the source of Sounds Bad!.

I decided, for ease and fun to use Surge to publish the page. Surge is very neat for this sort of project, it allows, for free, the publishing on static web content from the commandline.

So what have a learned. I didn’t end up with anything earth shattering. I’ve got a couple of new snippets of JavaScript that could be used elsewhere. I’ve had a bit more practise in simple JavaScript and html. I enjoyed the process.

The featured image on this post is a gif ripped carelessly from the Monty Python and the Holy Grail- Intermission Music youtube video with MPEGStreamclip and stuck together with Fireworks.

GifDub

gif-dub-screenshot

GifDub

Using Neocities who say We provide free web hosting and tools that allow anyone to make a website. and Neocities will never sell your personal data or embed advertising on your site..

GifDub is a sort of sound and gif mashup using the Giphy Api and Freesound API. The idea is to play several random gifs and audio files at the same time. You can toggle sounds on and off, replace gifs and sounds.

It is fairly silly but has been a lot of fun to put together. I suspect it will not work in Internet Explorer.

A work in progress, I’d like to add some more features and get it working in Internet Explorer.

This is not part of any ds106 assignment but it feels like DS106 to me, and it has gifs #wejamecono.

A #DS106 DailyCreate Twitter Bot

dailycreate-botThe DailyCreate Bot

I’ve always liked random and automated random things. While these are not strictly part of storytelling I’ve managed to bring them into DS106 whenever I can.

A while back I set up @DailyCreateBot for some reason or other. Obviously a Twitter bot of some kind to do with the Daily Create. I do remember having trouble with the OAuth requirements of the more recent Twitter API and giving up.

Last weekend, on a rainy day I blew the dust of my raspberry pi and got it online and set up as a server. I was not too sure what to do with it at the time.

During the week I did revisit a project to use the pi to flash some lights depending on a Twitter search. I don’t have hardware for that but I was interested in how simple the project was. There seems to be plenty of libraries that can sort out Authentication to Twitter for you now. A bit of googling and thinking, mostly googling and I have a Twitter bot set up.

The @DailyCreateBot will reply with a suggestion of a photo challenge of you mention him on Twitter. I am using the same list that Alan Levin provided for me for the photoblitz.

The @DailyCreateBot runs on Python. This is where the pi comes in I would not even know where to begin to find out how to host a python app but the pi lets me do that easily.

I am not proposing to write a step-by-step guide here but it is worth mentioning that several things went wrong or did not work as expected. All were beyond my 2 weeks worth of Python on the mechanical mooc . All were solved by a wee bit of googling and sometime just repeating things till they worked. The delight of working on a pi is that I knew I’d I totally messed up I could just reformat the SD card, install an so again and be back to square two.

I had already:

  • installed one of the basic OS FOR THE PI
  • Set up SSH access so that I can get ‘on’ to the pi from the terminal application on a mac and via SSH apps on iOS.
  • set up the pi as a web server and sorted out the DNS

Next:

*I found a python library and example code that replied.
*I added logic to reply with a random string taken from a list of challenges.
*Tested it a bit.

Then I posted to the DS106 Google + group and a few kind folk tested it a bit. Rochelle asked:

That is cool +John Johnston . It worked for me right out of the bot box. Do we upload to Twitter, tag them DailyCreateBot? I’d like to see what others have done. 🙂

Which got me thinking. A quick google found a php/JavaScript solution to showing tweets with the hashtag #dailycreatebot and I’ve got this up and running.

All very much a work in progress. There are few things to be ironed out:

  • the Python bot falls over every now and again complaining about UTF8 I need to google that some more.
  • the web page showing images just uses the styles used in the demo of the code. I need to tidy it up and perhaps skip tweets with the hashtag but no images.
  • there is also the problem Rochelle pointed out that if you reply to the bot you get another prompt. I wonder if I could turn off replies if there is an image in the tweet?

Anyway if your expectations are low you can join in:

  1. Tweet @DailyCreateBot and get a prompt.
  2. Tweet your photo with the hashtag #DailyCreateBot
  3. See what other folk are doing.
  4. Let me know of any interesting problems.

Colour of the Wire

After the last post I’ve watched a few more episodes and have arrived in Season 3 of the wire. I though it might be interesting to see the overall colours of different episodes or seasons and compare them.

Following the same path1 as in the previous post I created a montage of screenshots from Episode 1 of season 3. I sort of expected it to be a bit brighter but:

out-1000

A bit of googling took me to Image Color Summarizer – RGB and HSV Image Statistics and:

Image Color Summarizer – RGB and HSV Image Statistics Season 1 Episode 1

Image Color Summarizer – RGB and HSV Image Statistics Season 3 Episode 1

Both described as dark faded red.

colours-of-the-wire

I wonder if it would be interesting to expand this to other episodes and series or if everything looks dark.


Footnotes:

1. I had a few problems with Storyboard this time as the .srt file I downloaded didn’t work, a quick google found one that did. I also noticed that the montage code I posted last time was missing a parameter --geometry +0+0 to remove padding