subpixels.com | SPXL.TVblog | contactgallery | videoflash | processingmyspace | facebook

Category / Web Development

VNTZ | Event Listings 31 July, 2015 at 4:37 pm

For a long time now there has not been a decent resource listing events in Sydney. InTheMix had officially shut down its WHATSON section. Time Out, Resident Advisor, and even SPRACI are currently hopeless, and Facebook keeps you in an information bubble where you can only see stuff you are more or less directly connected to (eg by invitation, and now Facebook is limiting the number of invitations people can send to their own list of contacts!). What is one to do?… Roll your own!

VNTZ is my contribution. Currently a simple website with links to events pages elsewhere (could be any site, but currently linking to public events on Facebook).

Link submissions are made by simply posting a link to the corresponding VNTZ Event Listings page on Facebook. Easy peasy.

Site: VNTZ.info

fontburner 23 July, 2009 at 3:08 pm

sIFR fonts delivered by www.fontburner.com

What is this about?.. A neat little service allowing you to use any of over 1000 freely available fonts for the heading elements on your website by means of including a line of “code” in the <head> section of your page. Sweet beans. :o)

It works by using Javascript to replace each heading element (<h1>, <h2> and so on) by a little box of Flash. If Javascript or Flash is unavailable, the original text/font is displayed. Win-win!

-spxl

Go, go, Google Gadget 23 December, 2008 at 7:18 pm

Just above this there should be a “Google Gadget”. This is, of course, just a test.

-spxl

Go with the flow 9 November, 2008 at 8:09 am

A lone voice in the emptiness of web-space called out to me, asking about how I posted a Processing sketch to my blog. Gabriel’s comment:

Hi

first off, love the sketch. I am looking for a dead simple way to post my sketches on a blog. For the image above, are you doing a screengrab and then cleaning it up? Is there a ‘tool’ out there for grabbing one without the tedium of either adding code to the sketch itself or having to go into photoshop and crop out all the unwanted stuff?

what’s your workflow?

I can’t take the credit for the coolness of the sketch – it was written by David Pena and came as part of the processing-0144.zip download from Processing.org – I only tinkered with it a bit.

In any case, I don’t know exactly what I did, and I know that I rearranged the files on my webserver some time after the original post, but here’s the general idea (with a note that I’m running under Windows XP):

Export from Processing

Get the sketch up and running in the Processing Development Environment. Cool (thanks Davin Pena and the people who built Processing, the Open GL engine, et al). I think the sketch needs to be saved before doing an export, so do that if you haven’t already, and do an export [File > Export (Ctrl+E)]. This creates a folder called “applet” in the same location as the saved sketch (where the .pde file is). In this folder are all the files that are needed to run (or might be needed, such as the system-dependent JOGL files for various operating systems), and which you somehow need to get on to your webserver later.

Grab a screenshot

In my case, I used IrfanView to take a screenshot whilst the sketch was running. IrfanView, if you don’t already know it, is a small, fast and free (to use, for non-commercial purposes; not open source) image viewing application for Windows. it has a bunch of basic editing features built in, like screen/window capture, which I use quite often, so am familiar with the shortcuts and how it is set up.

Not necessary to understand, but since the question asked about things being easy… Note that once you’ve done the following a couple of times, it becomes easy enough and fast enough for most purposes.

  1. Open IrfanView. For me, this means three keystrokes (Windows Key, i, i) because I have an “Image” program folder in my main “Start menu” and “Irfanview” is the only entry starting with “i” in that folder. It might take 5-10 seconds on my machine the first time, but note that this is a 4-years old install of Windows XP on a laptop running  (still “working”, amazingly enough, despite several chances to die horribly installing service packs and possibly hundreds of applications going in and out besides!). Still, better than waiting for Photoshop for a small job.
  2. Start screen capture [Options > Capture/Screenshot… (C)]. I use the “Foreground window – Client area” option with hotkey (Alt+Z), showing the captured image in the main window… these options will be obvious when you’re running IrfanView.
  3. Give focus to the running sketch, hit the hotkey (Alt+Z in my case)… easy.
  4. Cleanup (optional): I wanted to give more prominence to the ball, so a crop was in order. Create a selection – you can left-click-drag a rectangle, or, as I wanted a certain size, I used [Edit > Create a custom crop selection… (Shift+C)]. There are plenty of options; I wanted 4:3 aspect, and entered 450 for the width, which automatically set 337 for the height. You can also specify the top-left corner of the selection, however I usually leave this as (0,0) and after the selection is made use right-click-drag to position the crop selection. Once you’re happy with the selection, [Edit > Crop selection (Ctrl+Y)] performs the crop.
  5. Save the image: [Edit > Save as… (S)] (note that, unusually, (Ctrl+S) is for Save and (S) on it’s own is Save as, however since this image is from the clipboard and not a file it doesn’t make any difference). There are many image formats you can save out to (I think you need to install the IrfanView plugins to get some of them; I recommend the plugins for the JPEG lossless rotate if nothing else). I’ve decided to use the same base filename as the sketch and put it in the “applet” directory with all the other files needed to run the sketch. (This probably isn’t what I did in the first instance, but could be in future!)

Get it online

For me, this meant using FTP to upload all the files in the “applet” directory to my web host. My original plan involved creating a “processing” subdirectory from my web root, with a separate “applet” directory for each sketch, renamed from “applet” to the name of the applet.

eg. web_root/processing/Esfera_mod_by_spxl

I created a new blog entry (I’m using self-hosted WordPress) and inserted an image (specifying the full URL http://subpixels.com/processing/Esfera_mod_by_spxl/Esfera_mod_by_spxl.png for the image src), hyperlinked to the “applet” directory (using the full URL).

This worked just fine.

It bothered me that the library files were so big – not because of the space required, since I have some 500 gigabytes available…), but because of how long it takes me to upload even a few megabytes. Yes, I am impatient; around 20k/sec is not a speed I am happy with, but I digress. I also had the intention of, at some time in the near future, to upload a bunch of sketches, and realised the burden of downloading the libraries every time isn’t something anyone needs. It might be possible, but I couldn’t figure out how to get a sketch running that referenced libraries in another folder.

What’s the answer? Put everything in the same folder, of course!

(2009-01-06 edit: the everything-in-one-folder solution wasn’t working out so well, so I have rearranged my Processing content into separate folders for each sketch. The following notes are therefore no longer accurate, nor recommended!)

So the file structure was as follows:

http://subpixels.com/
processing/
Esfera_mod_by_spxl.html – sketch’s web page
Esfera_mod_by_spxl.jar – applet archive
Esfera_mod_by_spxl.java – Java source
Esfera_mod_by_spxl.pde – Processing source
Esfera_mod_by_spxl.png – screenshot image
..and all the other required files…

The hyperlinked screenshot HTML looked (almost) like this:

<a title="subpixels.com: processing applet | Esfera_mod_by_spxl"
   href="http://subpixels.com/processing/Esfera_mod_by_spxl.html">
<img src="http://subpixels.com/processing/Esfera_mod_by_spxl.png"
     alt="Processing sample: Esfera mod by spxl" /></a>

Of course, a linked image caption costs extra. ;o) Something else I did was create a symbolic link named “index.html” which I’ve pointed to “Esfera_mod_by_spxl.html” so that anyone navigating to http://subpixels.com/processing for a poke around didn’t get a directory listing. I could have just renamed (or copied) the Esfera_mod_by_spxl.html file, but that would be too easy…

And for your edification, the result, with the updated Processing code, executible, Java file and screenshot. I’m uploading the new files now. Okay, maybe not now, but soon. (This reminds me of a scene from Spaceballs…).

Processing sample: Esfera_mod_by_spxl

Esfera_mod_by_spxl
based on Esfera.pde by David Pena

Source code: Esfera_mod_by_spxl.pde

Something I didn’t note earlier, is that I put in a mousePressed() callback to start/pause the animation when the mouse is clicked. I’ve put in some new comments about that, modified the code slightly to be clearer for people new to programming, and added/updated various other comments.

I probably wouldn’t recommend embedding the applet itself into your blog posts, since several posts on one page means several applets, and if anyone else’s system is like mine and takes aaaages for the Java runtime to load for the first time, people are going to leave your blog possibly before even seeing any of your content… probably not what you’re hoping for!

I’m sure putting everything in the same directory will come to bite me on the arse when I want to start using a data directory, but that could be solved by the sketches having their own named subdirectories I suppose.

(2009-01-06 note: my arse was bitten when Processing 1.0 was released as the OpenGL libraries changed!)

Perhaps I should stop concerning myself with such things until I actually publish another sketch… That’s right, I put one sketch online and stopped right there!

I have half a mind to create a WordPress plugin to handle some of the details nicely. The other half of my mind is saying, “What do you know about creating WordPress plugins?!” :o)

And now to test the multiple-sketches-in-one-directory theory… Stay tuned!

-spxl

Open your mind 8 October, 2008 at 8:12 pm

The MIND! London (MINDlondon.com) website is now open for business! I registered the domain yesterday evening, and a reasonably productive creative flurry last night has given rise to the new site. Hurrah!

There are some screenshots of visuals for (and at) Mind! gigs, and I’ve also posted a video of some new Mind! title graphics I’ve been working on.

Since the night is called ‘Mind!’, the entries might be called ‘thoughts’ (Initial Thoughts – the first post). In case you were wondering, yes, this is a test of the cross-referencing features of the blogs. :o)

-G.

pb-embedflash tests 18 August, 2008 at 3:34 pm

This post is for testing the pb-embedflash plugin for WordPress. Expect nothing to work, be surprised if it does. At the moment it seems that IE can display stuff and Firefox can’t… maybe a version problem. I’ve had issues with the Adobe Flash Player install, and there are possibly issues with Firefox 3.

-G.

Test #1 – Locally hosted SWF file

Tag contents: flash http://subpixels.com/flash/pigeon_patrol.swf w=400 h=400preview={http://subpixels.com/flash/pigeon_patrol_screenshot.jpg|400|400}

This should show an interactive flash animation below.

test 1 start

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

test 1 end

Test #2 – YouTube video

Tag contents: flash http://www.youtube.com/watch?v=HXBhR2OgzVk

This should display a YouTube video with a turtle in it below.

test 2 start

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

test 2 end

Test #3 – Vimeo video

Tag contents: flash http://www.vimeo.com/1360800

This should display a Vimeo video of a vjlondon.org meetup.

test 2 start

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

test 2 end

Site upgrades, photo galleries and more 17 August, 2008 at 8:33 pm

There should be an image gallery just above this: some still captures of the visuals I mix. There should also be a couple of random images in the sidebar.

Over the past few days I’ve been tidying up the contents of my webserver. The other day I noticed that the gallery was broken, and it took a little while to sort out whatever the problem was. Changed some directory permissions and server settings, and upgraded to the latest version of the software. I’ve deleted some unused CMS’s and their databases, made some database backups, and upgraded WordPress. I’ve had a play with some WordPress settings, like running a second blog off the same content folder (containing plugins and themes, etc), changing themes, using Widgets, and installing some new plugins, most notably a gallery plugin – something I really needed to get sorted to be able to post photos in some sort of nice manner. I managed to wreck the second blog for a while, and delved into some PHP programming to see what was going wrong. It sorted itself out in the end.

I’ve also revised some tags and categories for existing posts in this blog: the Subpixel category should now take you to all posts that are about me, gig’s I’ve performed at (subcategory Subpixel’s Gigs), or that have creations (subcategory Creations) to show such as photos, graphics, videos, and software (eg Flash, Processing).

There is something wrong with the Flash plugin I’m testing out (pb-embedFlash), which I was rather hoping to use to embed videos and Flash animations. I might try working on a filter to embed (or at least link to) Processin sketches… but one thing at a time – first I need to create some more Processing examples! I’ve come up with a simple solutions for what to do with multiple hosted sketches (applets) to get around the problem I mentioned earlier of there being a heavy download for the OpenGL libraries: just have everything in one directory, with the index.html file from the generated applet folder renamed to have the sketch name. So simple it might just work.

-G.

10 Years on the Web 16 January, 2008 at 1:05 am

I think I must be getting old. Nostalgic. Back in the day, when I was a long-haired uni student, a lot of my friends knew me as ‘Bill’, the nickname I used online. Being a regular kind of name name, people often thought it was my real name, or just remembered it more easily. Anyhoo… I had a Geocities website (now Yahoo! Geocities), as was the trend at the time which hung around for a while. I guess it was the day’s MySpace. I have a copy of the main graphics dated early to mid 1998, and pages that were updated on 25/Jun/2001 for a reappearance at the time. The index page was last modified on 09/Aug/2001, and now the site reappears once again!

Original Banner Graphic from “Bill’s Website” circa 1997-98
Original Banner Graphic from “Bill’s Website” circa 1997-98

The graphics were hand-crafted by me – a result of playing with Photoshop (3?) for a few days – and aren’t actually half bad. Well, they weren’t at the time! :o) The Nine Inch Nails discography pages were absolute hell to make, especially the Tracks page – hand crafted list of every track, listed in order of track name, hyperlinked to the album/release it is from on one of the other pages. Probably written using Notepad or maybe even the EDIT.COM DOS text editor! Dreamweaver, eat your heart out!

Link: Bills Website

-G.

Halos icon Other tracks icon