Ubuntu 12.04: How to Install Processing

Processing can be downloaded and installed from Processing.org. As the supported platforms page in the Processing Wiki indicates, installation on Linux can be complicated.

In the following instructions, I’m going to assume you have a basic acquaintance with the Terminal and command lines, at least enough to get around the operating system. This is a really useful skill to acquire in Linux (and MacOS) and can improve your abilities as a programmer. In any case, if you can open a Terminal, you can probably get through the instructions here and on the pages I link to. You will need admin access to run some of the commands, specifically those that begin with sudo.

First, download Processing. On Ubuntu 12.04, the 64-bit architecture is appropriate. It downloads as a .tgz archive, typically into the Downloads folder in your Home folder. You can extract the archive by double-clicking in Ubuntu’s file system browser or extract it from the command line in a Terminal with tar -xf processing-2.2.1-linux64.tgz. Once you have extracted the folder processing-2.2.1, you’ll need to decide where to locate it. I created a new directory, Developer, in my Home Folder, and moved Processing to it just by dragging and dropping. You could also install Processing in the /opt/ folder, though this requires an admin account and use of the Terminal.

If Processing just ran out of the box, you could double-click and run the processing script in the processing-2.2.1 folder or point a Terminal to the folder and type ./processing and hit return (the latter is the approach I recommend). That is unlikely to work because of incompatibilities with the downloaded version of Java in Processing and the default Java environment on Ubuntu. You can resolve the incompatibilities in two steps: installing a new version of Java and adjusting Processing’s directory structure. After reading the supported platforms page in the Processing Wiki, I decided that it made the most sense to install Oracle Java 7.

Installing Oracle Java 7

Information on issues with Java can be found in Ubuntu Help. Take a moment to read the section on Oracle Java 7. Because of licensing issues, Java has to be downloaded and installed from Oracle. Fortunately, there is a tool to simplify this process at webupd8.org. The documentation is clear and simple, and I leave you to it. Once you’ve installed Java, run the Java environment variables installer, too. FWIW, here is my command history for this process:

35 java -version
36 sudo add-apt-repository ppa:webupd8team/java
37 sudo apt-get update
38 sudo apt-get install oracle-java7-installer
39 java -version
40 sudo apt-get install oracle-java7-set-default
41 update-alternatives --display java

Adjustments to Processing

Once you have Oracle Java 7 installed and set as the default version of Java in Ubuntu, you’ll still need to modify Processing to use the newly installed version instead of its own. First, copy Processing’s fonts to the newly installed version of Java. You’ll have to change the command lines to reflect the directory structure for your particular installation of Processing. Oracle Java 7 directories should be the same.

cd /usr/lib/jvm/java-7-oracle/jre
sudo cp -R '/home/ignotus_mago/Developer/processing-2.2.1/java/lib/fonts' lib

Next, in your Processing directory, rename the java folder.

cd '/home/ignotus_mago/Developer/processing-2.2.1'
mv java java_old

Now create a symbolic link (symlink) to Oracle 7 Java’s java binary:

ln -s /usr/lib/jvm/java-7-oracle/jre java

At this point, you should be able to run Processing from the Terminal with ./processing. It works for me. YMMV, but I suspect that it should work in most cases. Getting all of Processing’s libraries up and running and getting Processing to run in the Eclipse IDE in Ubuntu are topics I expect to tackle later.

GlitchSort for Processing 2.0

I am happy to announce the release of a new version of GlitchSort, 1.0b10, for Processing 2.0. GlitchSort is a versatile glitching application that began as a sorting algorithm demo for my class at SAIC, Code Sourcery. Up until a few weeks ago, Processing 2.0 suffered from a memory leak that prevented GlitchSort from working. Now that the leak is fixed, I have no excuse: here’s the update. See the GlitchSort Page for details.

Navigation Menu with current page disabled

In creating my new portfolio pages, I have relied on other people’s code. I’ve already mentioned the Photobox jQuery image gallery, which drives the slideshows on the new pages. From multiple sources, I figured out a better way of using CSS to create navigation menus than what I’ve been doing before. The core idea is that the link to the current page should show up in the navigation menu but should not be active. Typically, you’ll want to either pull it out visually, to flag the page you are on, or dull it it down, to indicate that it is not available to be clicked. Ideally, the cursor should not change to the active pointing finger over the inactive link.

I relied on multiple classes before, and had to do lots of markup editing. By adding some jQuery code to the CSS, you can get the menu working with minimal fuss.

CSS:

#navmenu a {
   color: #90c7fe;
   text-decoration: none;
}
#navmenu a:hover {
   text-decoration: underline;
   color: #fe596e;
}
#navmenu {
   color: #838390;
   padding-left: 1.5em;
   padding-top: 0.5em;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 0.8em;
}
#navmenu a.current-page {
   color: #fedc7b;
   text-decoration: none;
   pointer-events: none;
   cursor: default;
}

JavaScript (jQuery)

$('a.current-page').click(function() { return false; });

The JavaScript should be included either on a page load or at the end of the page, just before the <body/> tag. To use the markup, just enter something like this:

<div id="navmenu"> 	
<a href="glitchez.html">Glitch Nation</a> | 
<a href="gifz.html">GIFs</a> | 
<a href="datascapez.html" class="current-page">Datascapes</a> | 
<a href="birdz.html">Ornithology Suite</a> | 
<a href="studiez.html">Field Studies</a> | 
<a href="treez.html">Tree Scrolls</a> | 
<a href="noiz.html">Blue Noise</a>		
</div>

The key to it all is shifting the “current-page” class to the navigation link for whatever page you are on. The CSS takes care of the appearance of the disabled link and the JavaScript disables the cursor response. The code may not work in IE (but what did you expect?). Of course, you’ll have to include jQuery, probably with something like this in the header:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

GlitchSort

GlitchSort is a Processing application that uses interrupted pixel-sorting to create glitchy images. Since it has found an audience among glitch artists, I’m setting up this page as a point from which to download a current version and reference materials, as these become available. I’ll also post news or links to news about GlitchSort here.

GlitchSort 1.0b10, for Processing 2.0, is available as of June 7, 2013: GlitchSort_v01b10.zip. Processing 2.0 fixes the image memory leak that plagued previous releases. Note that GlitchSort for Processing 2.0 requires ControlP5 2.0.4, which is not bundled with the Processing application (it is bundled with the standalone applications).

There are bundled applications for Windows32, Windows64, MacOSX, Linux32 and Linux64: YMMV as far as running these. If you have Java installed, they should run, but I have only tested them on MacOS.

The bundled documentation is for version 0.1b8, but I describe new features below and in the source code.  Here is a higher resolution version of the manual (33M PDF) with much better image quality. The print version (60M PDF) offers the highest resolution, for printing. Online reference manual can be viewed here (1.6M PDF). Download or view the optimized high resolution version (33M PDF) here. Very high resolution print version (61.5M PDF) here.

GlitchSort2 Manual Cover

GlitchSort2 Manual Cover

Version 1.0b10 adds commands that use capital letters (shift key + key). These change the behavior of the save, revert, open and turn 90° commands. See the changes.txt file or comments in the code for details. 1.0b10 also allows you to set a percentage of zigzag sorting.

GlitchSort 1.0b9, the last version for Processing 1.5.1, is available here: GlitchSort_v01b9.

Version 1.0b9 revised the zigzag sorting by providing check boxes to set zigzag sorting to random angles, aligned angles,  or angles permuted in blocks of four. It also adds the scaledLowPass method, a low pass filter on each RGB channel with a different FFT block size (64, 32, 16) for each channel. The component order depends on current Component Sorting Order setting, when the RGB channels are used. If you are using HSB channels, a random RGB order will be selected.  Currently this command is only triggered by the ‘)’ (right parenthesis) key command. It works best when pixel dimension are multiples of 64. After it executes, you can immediately use the statistical FFT command (‘k’) to sharpen the image. Amazingly, most of the detail that was lost with the low pass filtering will be restored by the default statistical FFT setting (set by the command to operate on 16 x 16 pixel blocks). The command takes time to execute because it’s really a long series of commands bundled together. It was an experiment that proved very rich in the variety of images it could create. Here’s an example.

Version 1.0b8a fixed the denoise command to handle edge and corner pixels correctly, and changed the ‘_’ (underscore) hack to repeat the last command four times, with a 90 degree rotation between executions, when last command is in “gl<>9kjdGLKJD”.

Version 1.0b7, a substantial update, supported Fast Fourier Transforms on images. It also saves JPEGs using current Java libraries, instead of the deprecated com.sun.image.codec.jpeg. Version 1.0b8 fixes a bug in the audify command, and adds a “denoise” filter and spatial shifting of color channels: that was enough to justify the new version number. I discussed GlitchSort version 1.0b7 pre-release on December 7, at a Share Session at GLi.TC/H.

Version 01b5, released on August 23, 2012, was the first public release named  “GlitchSort” instead of “GlitchSort2.” Version 01b5 provided a new sorting tool that operates on zigzag-scanned blocks of pixels using any of the available algorithms, and a color quantizing tool.

Version 1.0b4, released on August 1, 2012, offered four different sorting algorithms, each of which has a different behavior that can be used to affect images in different ways. It added the “munge” feature that does glitchy compositing, and the “degrade” command that uses JPEG compression to degrade an image.

My own images created with GlitchSort can be found at http://www.flickr.com/photos/ignotus/sets/72157629445337238/.

Video TurtleBoids Demo

Video TurtleBoids Demo Applet

Video TurtleBoids Demo Applet

The Video TurtleBoids Demo Applet is a Processing applet that captures video, derives optical flow vectors from it, and then uses the vectors to change the velocity of a flock of “boids” that can also draw lines (i.e., behave like Logo turtles). You will need the IgnoCodeLib library (the .jar file is included in the Code directory) and the ControlP5 library (not included, available for download at http://www.sojamo.de/libraries/controlP5/)

Based on Flocking, by Daniel Shiffman, in The Nature of Code, a demonstration of Craig Reynolds’ steering behaviors (see also http://www.red3d.com/cwr/). Also adapts code from Optical Flow by Hidetoshi Shimodaira from http://www.openprocessing.org/sketch/10435.

Download the VideoBoidsDemo. It will not run in a browser, and it does require a video input to function.

 

Video TurtleBoids

The Video TurtleBoids installation on view at What It Is through May 2012 uses “optical flow” from a video camera to control the motion of a flock of “boids” that also know how to draw. The optical flow is visible as gray lines indicating the motion of people, vehicles, etc., seen by the camera. “Boids” is Craig Reynolds’ humorous name for the flocking behaviors he described in the 1990s. “Turtle” is a term from even earlier, from the Logo programming language that grade school children once used to make drawings with a “turtle” that carried a “pen” around the screen.

Video TurtleBoids installation

This software was written in the open source language Processing. I am using Daniel Shiffman’s adaptation for Processing of Craig Reynolds’ steering behaviors. The optical flow code is by Hidetoshi Shimodaira, from the OpenProcessing web site. The drawing code is my own adaptation of TurtleGraphics, available in my open source Processing library, IgnoCodeLib.

Work Journal | Feb 17 – Mar 24

Feb 17th, 7hrs | Programming: mysql, php.

Started the website.

-Prepare mysql database to interact with the website.

-Made basic queries to database to display a profile page from information pulled from a mysql database.

-Practiced echoing database  data to create html/css/javascript etc. Figured out that echos don’t work like println(java)/cout<<cplusplus  in that echo actually get incorporated into the code of your program so that you can subsequently echo chunks to write html.

Example:

echo “<img src='”;
echo $filename;
echo “‘/>”;
echo “<br><br>”;

 

Feb 21st 7hrs | Programming: domain setup, mysql, php.

-Bought a personal domain to temporary host the pyramid website.

-Set up website to use mysql database on the website. Had to actually give it instructions to connect and find it now. Also gave it a location to store sessions

This specific code was required for

session_save_path(“/home/users/web/b2289/moo.jackkoocom/cgi-bin/tmp”);
session_start();
mysql_connect(“jackkoocom.fatcowmysql.com”, “jack”, “password”);
mysql_select_db(“pyramid”);

-Set up ftp with filezilla and fatcow server

-Began working on features such as login, and upload.

 

Feb 24th 8hrs | Programming: domain setup, mysql, php.

-Lesson on advance sql queries, php troubleshooting, and some extra work afterwards.

-Fixed 90% of upload errors on filesize by editing the php settings on the server. Still sometime output errors on extra large files.

changed these values @ http://www.fatcow.com/member/cgiManagement/PHPplus.bml
php_value upload_max_filesize 10M
php_value post_max_size 10M
php_value max_input_time 300
php_value max_execution_time 300

-Finishing up features (login, upload)

-Added registration to input new users into database upon giving invitation codes matching the invitationCodes table in the database.

 

Feb 26th, 2hrs  | Programming: Java 

Lesson on java double buffering.

-Learned about double buffering to prepare for java application (the collage application).

Double buffering is basically to prevent seeing black flashes appear when the image has not finished being redrawn during. So you draw the image onto a “buffer” and switch it to the current displaylist when its done drawing. So the drawing process is behind the scene and the change of tearing is significantly reduced.

Jon Heard my tutor also showed me a useful java function to clip images to specific shapes.

Now I should have everything i need for the collage software (although the shape clipping don’t have any anti-alias, i might want to look into that issue)

 

Feb 28th,  7hrs | Printing, Programming: php

Paul had several big prints that he wanted printed. Everything he wanted printed was in an adobe bridge group so I could print them on my own. I setup the print and printed the fabulous photographs of Paul. The last print had extra space so Paul let me print one of my artworks . The output of my artwork isn’t setup for prints yet but it still came out great.

On the programming side, I was debugging an error that come upon login. Can’t recall the specifics of the error now.

 

March 2nd,  7hrs |  Programming: php, sql.

-Search feature done!

-Used sql  queries to return all matching searches and sort them into alphabetical order (wasted a lot of time writing a complex php code that did the same thing). I wrapped the echoed results in hrefs and put the matching id in the url. So then the profile page was editted to check for ids in the url first  and generate a page  based on that.

$IDsMatchingSearchText = mysql_query(”
SELECT ID, firstName, lastName FROM users WHERE firstName=’$searchText’ UNION
SELECT ID, firstName, lastName FROM users WHERE lastName=’$searchText’ ORDER BY lastName ASC
“);

-Slight tweaks everywhere. (homepage redirect, added about to registration, tested div capabilities etc)

-Was wondering why saic.edu seems to log me off when i close the tab even though everyone on the forums says that it’s impossible to know that you closed the tab. Actually the saic.edu log off is a illusion. If you copy the url, close the browser and paste it in. the session remains. So what it actually does is log you off when you enter the homepage, and is missing a specific element in the url. Paul wanted this feature for security so i know know how to add it.

Jack Koo

Hi this is Jack. I’m an intern at Ignotus Editions. This blog will help me keep track of what I’ve done!

 

Jan 27, Friday 10am-4    | Nozzle Check, Color Calibration, Printer Operations.

First day at Ignotus. My first surprise working with Paul Hertz is how much better color looked on print than on the screen. We set up the printer to clean the nozzles since Paul had been in Spain and we don’t want clogged nozzles. Printers need to be constantly in use to prevent the nozzles from being clogged up by dry paint. After the nozzles were cleaned, we went over basic concepts of Color Workflow. We calibrated the the monitor with colormunki to make sure the prints color looked almost identical to the monitor. Then we went over some basic steps to operating the digital printer. Loading/unloading paper, loading unloading inc, printer settings, printing etc.

 

Jan 31, Tuesday 10am-3    | Packaging Paper, Image Processing.

We were preparing for the opening of QuadCore exhibition. Learnt about packaging paper for transport. As always, Paul is very delicate with the paper. Each print has paper layered between to prevent friction damage. The paper is then put into a plastic bag to prevent rain damage, and then put into a hard cardboard case. Paul got called that he couldn’t install that day, so we went over Image Processing. Raw photo files had a lot of information that we could pull out and show details in monotone sections of the photo that we can pull out. We also sharpened areas for clearer print, and got rid of camera artifacts.

 

Feb 1, Wednesday 6pm-9    | Java Syntax, Eclipse Functions, Swing Layouts.

Paul wanted me to learn Java for the collage web application that he’s been planning to make. I’m very familiar with C++ and Processing, which made java a breeze to learn. I learnt about basic syntax, eclipse functions, and swing layouts.

 

Feb 3, Friday 8:30am-4    | Transporting Paper, Installing Prints.

Preparing more prints and transporting it to the QuadCore exhibition for installation. We printed an extra print to take to the exhibition (You should print daily to ensure nozzle hygiene). At the gallery we measured the space we had and calculated how many prints would fit with reasonable margins. The 36 inch print in the middle almost took three people to set up. Two people needed to hold it, and on person had to snap the magnets to the screws that we inserted into the walls.

IgnoCodeLib for Dorkbot

Thanks to everyone who came to Dorkbot this evening. It was a real pleasure to show pictures on paper and talk about the algorithms that produced them. Better than a gallery show, I said when I got home.

I promised I would post a development release of my code, so here it is: IgnoCodeLib. It should be pretty stable, though there are a few rough edges (bounds rectangle caching in BezShape and its subclasses seems shaky). Let me know how things go if you try it. I should have a new release version in a month, properly announced on the Processing forum, posted to Google Code, and available here.

BTW, the examples to try first (the newest ones) are Polygons, EllipsesAndCircles, and DrawMulti. Not all of them are commented yet–but y’all read code, n’est-ce pas?

Dorkbot Presentation

Thursday, October 27, at En3my Sound, 1550 N. Milwaukee Ave., 3rd floor, in Chicago: I’ll be presenting the newest version of my Processing library, IgnoCodeLib. I may even be so lucky as to have it online and ready to download. If not, expect an announcement soon. IgnoCodeLib provides a framework for 2D graphics using Bézier curves and straight lines. It can export its graphics to Adobe Illustrator. Moar information can be found on the Dorkbot Chicago site.

I’ll also hang some of my most recent work, created with my library. I’ve been posting much of it to Flickr, to the Sampling Patterns 55 set (a selection from the larger Sampling Patterns set) and recently to the Tree Jive set. This animated GIF, Not a Glitch, was created with the Tree Jive algorithm. My page on on Open Processing has some samples of the library used for animation.

 

Not a Glitch, animated GIF

Not a Glitch, animated GIF, created with Processing and IgnoCodeLib

 

Update: for those curious about the algorithmic technique behind the Tree Jive patterns, L-systems or string-rewriting systems, I recommend Prusinkiewicz and Lindenmeyer’s book The Algorithmic Beauty of Plants, available in a free, high-resolution version on the Algorithmic Botany web site.