Tag: fun

Posted on
by

I’ve been having a wee play with the p5.js web editor.

p5 .js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web. Using the original metaphor of a software Sketchbook, p5 .js has a full set of drawing functionality. However, you’re not limited to your drawing canvas, you can think of your whole browser page as your sketch! For this, p5 .js has addon libraries that make it easy to interact with other HT ML5 objects, including text, input, video, webcam, and sound.

I’ve occasionally dipped my toe into processing and found it good fun.

Over the summer I’ve seen a stream of tweets and instagram posts from Tom Smith which got me interested in p5.js.

I don’t really have much of a clue but have had a bit of fun. Especially when I found you can use a library with p5.js to export gifs. The feature image on this post is one made by my sketch: Classy bramble skulls 4. This one has a background image, some animation, the mid-ground, the sleeper and computer and then the window frame which are drawn. If I had though I’d have used 3 image layers sandwiching 2 animation ones. Early days.

There seems to be a ton of learning material available and it is easy to duplicate interesting p5.js sketches to edit and play around with. (The school holidays are not long enough;-))

Posted on
by
Replied to Bryan Mathers on Twitter: (twitter.com)

(@BryanMMathers)

points to his blog post The way of the remix.

Where he asks:

Do you remix?
If so, how do you remix? What is your remix trigger? Is it curiosity or simply joining the dots as you see them? Do you like to layer-up? Or strive to simplify? Is it a tickly thought? Or a random one from left field?

Well yes, I think I do, although my definition of remix might be widened to include mashup. but of course, Everything is a Remix.

How, is a long story. I guess I prefer DIY approaches. I use baby steps, image editors (Fireworks is my fav), JavaScript, php, commandline tools (ffmpeg, imagemagick, gifsicle) and anything else that seems interesting.

The why is harder, I am not a developer or an artist, I don’t make anything as polished as the remixes that scale on social media. I like to think it is because I nearly can. That is I am going to learn something in the process.

DS106 was a major trigger, the people involved, especially @cogdog, @jimgroom and @mvdfunes The daily creates from DS106 often led to remixing.

Wouldn’t it be cool is another trigger, or I wonder, or will it be funny, or impress someone(Usually only me). Or I learn about a new, to me technology and try it out.

Here are a selection remixes & mashups I am quite please with:

Featured image, a remix of a gif that I made as a remix of an image in the Tate. using The way of the remix by @bryanMMathers is licenced under CC-BY-ND.

Quoted Cubomania – Theo Kuechel – Medium by Theo Kuechel (Medium)

…the wood amongst the trees…..

By deconstructing images into random regular elements it enables us to see the wood amongst the trees, the hidden details we may have missed, the texture of the paint, the stories within stories, the sub plots.

Theo is using a ds106 toy I made a while back. I don’t think I’d really though much about the use of cubomaina images.

Cubomania Gif! makes still jpgs too. I just changed it a little to keep the still images fullsized but resizing gifs to a more sensible 400 pixels wide.

The images in Theo’s post are a lot more illustrative of his ideas that the one here.

Posted on
by

Veering off into territories where I am out of my depth a bit of fun in the last days of the holiday.

I’ve been playing with the new WordPress REST API using ideas from API Nirvana – Functional Details, then I remembered CogDog’s WordPress search javascript bookmarklet.

Multi WP Blog search allows you to search across a few blogs.

I doubt if this is actually a practical way to do things but it hints of ways of joining different blogs, small parts loosely joined?

Posted on
by

A couple of years ago I made a video of all my flickr videos in the style of the now dead pummelvision service.

I dug out the script tidied it up a little, and made the above video with my 2016 photos.

I uploaded the script in the unlikely event that someone else would want to do something like this. It is not a thing of beauty, I am well out of my depth and just type and test. The script need ffmpeg on your computer (I’d guess mac only as it used sips to resize images) and a Flickr API key.

The script also leave you with up to 500 images in a folder. Before I deleted them I made a montage and averaged them using imageMagick

montage -mode concatenate -tile 25x *.jpg out.jpg which is the featured image on this post.

and

convert *.jpg -average aver.jpeg

aver

I guess all that the average proves is that most of my photos are landscapes, given the hit of a sky…

Posted on
by

A few years back I used pummelvision to make a video of all of my flickr photos. Pummelvision was an online service where you pointed it to your flickr stream and it built a video for you and posted to vimeo. It could also take input from tumblr and facebook.

I though it might be interesting to make a similar video for my photos this year. However going to look for pummelvision drew a blank, the company had closed. I then though It might be interesting to try to create a similar video. From my memory and looking at my old video, pummelvision made a video with no transitions and very fast. As far as I remember it just used one tune. I downloaded my old video from vimeo and extracted the audio file using QuickTime pro. I took a guess that the frame rate was about 6 photos per second.

Grabbing the images

I guess there a few ways to grab all your photos from flickr, but this is how I did it. If I was doing it frequently I’d look into automating it, but this was a once off, or once a year if I do it again.

Flickr’s api would allow you to do this, but it seemed a bit excessive to try and write a pile of code. The Flickr API has a section to test all of the command so I headed to: Flickr Api Explorer – flickr.photos.search. There I put my own user ID in, set the min_date_taken and max_date_taken, increased the per_page to 500 and added the large photo url to the extras field.

This produced an xml file will all the information:

Flickr xml

I then extracted the 397 urls from the text. There will be many ways to do this, but I am experimenting with the Sublime Text application at the moment, it found & selected all of the https: occurrences and the with cmd-shift-right arrow expanded the selection to the quotes. One copy got all of the files!

Once I had a list of urls I edit those so that each line was:

curl "https://farm4.staticflickr.com/3897/14598292323_ae6462fa07_b.jpg" > image_183.jpg

With the numbers out the image sequential and padded to 3 characters, eg image_001.jpg, image 002.jpg etc. I also numbered then in reverse so the oldest photo would be first.

I saved this text as a file, dl.sh and moved into the terminal:

cd path/to/thefolder
chmod +x dl.sh
./dl.sh

This code set the dl.sh file to executable and then ran it, the terminal filled with text and the folder with images. Curl is the command-line tool for downloading files.

Sizing images

Downloading the large size gave a folder full of images but some where landscape and some portrait, ie 1024 × 768 or 768 x1024 I need the images to all be the same size. So i used the sips utility to first resize them, sips --resampleHeight 768 *.jpg, then to pad the portrait ones: sips --padToHeightWidth 786 1024 *.jpg

Which gives me pictures like this for the portrait ones:

Img 076 toad

Making the movie

I discounted using iMove, moviemaker or the like as I wanted something quick (not necessary quick this time…) and that could be automated. I am also not sure in iMovie can show as fast as 6 per second. (Update, a quick look shows iMove can set speed to fractions of a second per frame.)

I though of a couple of ways to make the move, using Quicktime pro or ffmpeg. Quicktime pro proved the easiest option, opened the app and File -> Open Image sequence…, choose 6 frames per second, then all I had to do was save the movie.

Unfortunately Quicktime pro has been replace by Quicktime and it is a bit of a bother to get your old QT pro working if you had paid for a license. So I though I’d figure out ffmpeg too.

With great power comes great complexity

FFmpeg is A complete, cross-platform solution to record, convert and stream audio and video. It is a command line application and has a lot of variables. I can usually find out the right command with a bit of google. This one took quite a lot of google and failures. Most of these failures came from me trying to set a framerate, which lead to skipped frames. Eventually I dropped the idea of using the framerate options and got a very (too) fast video with this:

ffmpeg -f image2 -i IMG_%03d.jpg -c:v libx264 -pix_fmt yuv420p out.mp4

Note to self, in the -i, iput option IMG_%03d.jpg means all the images with 3 numerals, eg 001, 002… 375

I then slowed it down a little with this:

ffmpeg -i out.mp4 -filter:v "setpts=4.0*PTS" 2014-flickr-show.mp4

And added the audio:

ffmpeg -i 2014-flickr-show.mp4 -i pum.mp3 -map 0 -map 1 -codec copy -codec:a aac -strict experimental -b:a 192k -shortest 2014-flickr-show-audio.mp4

It took a fair bit of google to get the audio right too, the -codec:a option seems to sort things out.

Whys and Wherefores

As noted above, I could have done most of this with iMovie. But by using ffmpeg or QT pro, I’ve the opportunity to play, learn and possibly end up with an automated system. It would seem well within the realms of possibility to have a script that used the flickr api to download a bunch of images, perhaps for a year or with a tag and make a movie from them.

I’ve now figured out how to do most of this by piecing together the above fragments and finding out a bit about loops and renaming files, but I’ve no idea of how to create a bash script that will replace my hard coded tags, usernames ect with input, more to learn.

Once you have a lot of jpgs

You might as well do other things with them: Flickr 2014

Posted on
by

Chad Final

Week two of the teachtheweb mooc starts with a challange: Explore the awesome makes from last week, choose one, and remix it.. At lunch today I though I’d take a very quick stab at this using Chad’s Webmaker Profile, as Chad is a fellow ds106er and I though he would enjoy the play.

The First shot

Given I was on my lunch break, I though I’d just flip the profile: Chad’s Webmaker Profile. I went to Chad’s original profile and added edit after the url, this opened thimble for me to edit his profile. I know that you can flip, turn and rotate elements of a webpage via the css transform. A quick google and I came up with:
transform: rotateY(0.5turn);-webkit-transform:rotateY(180deg);
This rotates content 180 degrees around the y axis. I added it to the css section in thimble, changing this:

body { font-family:Open Sans, "Helvetica Neue", Helvetica, sans-serif;width:1000px;margin:0 auto; }

to this:

body { font-family:Open Sans, "Helvetica Neue", Helvetica, sans-serif;width:1000px;margin:0 auto; transform: rotateY(0.5turn);-webkit-transform:rotateY(180deg);}

I think you need to use both transform: rotateY(0.5turn) and -webkit-transform:rotateY(180deg) to get cross browser support, but I might be wrong.

Quite please with 3 minutes work I posted to the G+ Community.

Looking out

Between a comment and an image I made for ds106 a while back, I started thinking about the page being a view out of the computer, so it should be looking at Chad:Chad’s Webmaker Profile.

On this edit, I’ve added Chad’s photo, hotlinked from his g+ images as a background image. All this took was adding a wee bit nmore css to the body:

background-image:url('fullimageURL.jpg');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center;

In the bloc above I’ve shortened the url, I used the full url to the image. The code first adds the iamge as a background to the page, ensures it does not repeat, fixes the position to the window and lastly centres it.

Itterating

What is probably irritating for my fellow MOOCers is that I am posting these and as I post geting more ideas, this means a lot of space is taken up on the G+ group.

As I post the last one, I irritate myself as the background picture does not fill the screen. Google again and I get this:

	webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

All 4 lines do the same thing for different browsers.

I also notice a new post with an audio mashup, this reminds me of Freesound where I find: Freesound.org – “computer-noise_desktop_quadcore_2009.wav” by matucha, I know Freesound supply low quality mp3 and ogg files so add an audio tag to my page, just after the body tag:

<audio autoplay>
	  <source src="http://www.freesound.org/data/previews/160/160465_739478-lq.ogg" type="audio/ogg">
	  <source src="http://www.freesound.org/data/previews/160/160465_739478-lq.mp3" type="audio/mpeg">
	  Your browser does not support the audio tag.
	</audio>

As I don’t have any controls in the tag, the player does not show, but autoplay gets it going when the page loads.

Finally I remember that Chad suggested a gif, so I download his image and make a gif of him rolling his eyes. Upload that to google and hotlink instead of the original jpg as a background. finally I have: Here’s iterating at you, Chad, I had to save twice as I needed to attribute the audio which is share under a Creative Commons — Attribution 3.0 Unported — CC BY 3.0 license.

So here is the Final version:

Here’s iterating at you, Chad.

Musing about Making

So like a lot of the things that I do for fun, this sort of bumbled along with one shot leading to the next. What was great about doing this inside the #teachtheweb community was there were lots of ideas to bounce off. This blog post was started after a comment on the final link I posted. Does that make this connected learning?

One of the lovely things about html is, if you know sometinhg is possible the method is just a quick google away. I wonder if that makes web editing a more accessable way of encouraging creativity?

Thimble thoughts

I’ve made between 6 and 10 experiments with Mozilla Thimble now, which makes me an expert;-)

I’ve found it a wee bit slow on older computers, so I’d think about that before using it in a class.

The split screen view is really good for seeing the changes made to the code take effect. I would however like the option of a tabbed screen so that I could see the whole of the preview without needing a huge screen. I’d also like the forthcoming ability to re-edit a page rather than having to save with a new url. The trail of urls is good for reviewing the process and blogging about it.

I would also like thimble to keep a track of my creations, I am pretty sure I’ve lost track of a few.

The most powerful features of thimble are, for me the templates which have great comments and the way you can easily edit someone else’s creation.