{"id":2040,"date":"2016-05-21T15:13:03","date_gmt":"2016-05-21T14:13:03","guid":{"rendered":"http:\/\/johnjohnston.info\/106\/?p=2040"},"modified":"2016-05-21T15:14:13","modified_gmt":"2016-05-21T14:14:13","slug":"accidental-allure","status":"publish","type":"post","link":"https:\/\/johnjohnston.info\/106\/accidental-allure\/","title":{"rendered":"Accidental Allure"},"content":{"rendered":"

In the past I’ve made a few experiments with randomly layering and combining images: Glen Finlas -evaluate-sequence subtract<\/a> and Averages<\/a> (The Prisoner) for example.<\/p>\n

A couple of weeks ago I started playing with combining images in the browser. There are several ways to go about this, I found a nice script to blend two images on a canvas<\/a> and gave that a shot. It worked well and gave interesting results.<\/p>\n

I though that using the Flickr API<\/a> I could gather a list of images and randomly blend them two at a time.<\/p>\n

Flickr’s API will return a json list. I started using the flickr.interestingness.getList<\/a> which produced some interesting (sic) combinations. However when I started to get the license of the photos most were not labled for reuse.<\/p>\n

I switched to using a standard search (flickr.photos.search ) which allowed me to search for license that allowed reuse.<\/p>\n

I also switched to using CSS and background-blend-mode, this allows you to have multiple images set on a background and blend them.<\/p>\n

For example using these images:
\n<\/p>\n

And this code:<\/p>\n

<div style=\"border:solid 1px;width:500px;height:400px;background-image:url('https:\/\/c2.staticflickr.com\/8\/7587\/26482589423_daa3bbdbd1.jpg'),url('https:\/\/c2.staticflickr.com\/8\/7012\/6677861899_ef6e012bc8.jpg');background-blend-mode:multiply;\"><\/div><\/code><\/p>\n

give me this:<\/p>\n

<\/div>\n

With this in my toolbag I could pull in a flickr feed, extract image URLs and info about each photo and randomly combine them. They are displayed for 10 seconds each.<\/p>\n

This gave me this:<\/p>\n

Random Flickr Blendr<\/a><\/p>\n

Here are a few random blends, screen captured:<\/p>\n