Blog: [Blog Home] [Archives] [Search] [Contact]

Archive for the ‘Computing’ Category

Artsnova Digital Art Gallery – Mobile Friendly At Last

Thursday, September 25th, 2014

Artsnova Digital Art Gallery responsive design for Smartphone
Artsnova Digital Art Gallery responsive design for Smartphone

One of the projects that I’ve been working on – off and on as time permitted – over the last few months has been to recode my Artsnova Digital Art Gallery web site in order to improve the site’s usability for mobile users. Specifically I was working to create a responsive web design version of my web site.

My old design (which this WordPress blog still uses) used a fixed-size layout so that no matter what your device’s form factor (screen size), the relative size and placement of images and the flow of text was identical across the board. This made design and maintenance a simple matter. Pages would look the same to everyone. This approach works great for the desktop.

As more surfers spend more time using their mobile devices to surf the web, it becomes more important that web sites migrate to a design methodology that is friendly to mobile users. This is because of the way in which mobile device browsers display traditional web pages. If you pull up this blog post on your smart phone’s browser, the entire page will be displayed on your screen – but everything is going to be so small that you won’t be able to read anything or click any of the links without first manually resizing the content. In addition, my site was using the hugely popular CSS dropdown menu method for site navigation. It works great on the desktop but not on mobile devices.

The percentage of traffic my site gets from mobile users is in the teens – up from the mid-single digits of just a couple years ago. As I expect that trend to continue, I felt it was time for me to sit down and create a web site that would be friendly to mobile users.

I opted to go with a responsive web design solution as that would require only a single code base – as opposed to maintaining one code base for desktop users and one or more additional code bases for mobile users. What is responsive web design? Responsive web design uses HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) to create a web page whose layout is dependent on (responsive to) the size of the screen it is being viewed in. That’s it. The main benefit is that responsive web design allows me to create a single web page that gets delivered to all users – as opposed to creating one version of a web page for desktop users, another version of the page for smartphone users, and another version of the page for tablet users. My web site currently has 329 HTML pages (not counting the pages associated with my blog). Responsive web design means 329 pages and one set of CSS definitions. The non-responsive alternative would mean 987 pages and three sets of CSS definitions. That’s a lot of work and means a lot more maintenance in the future. And it’s worth pointing out that I don’t use a CMS (Content Management System) for my site. I’ve coded everything by hand as static HTML pages.

In addition to developing the necessary CSS code to implement a responsive web design, I had to recode and test each of my site’s existing web pages. While for most pages these changes were fairly standard, I have a number of pages that presented particular challenges due to their content.

Another aspect of my design is that it does not use Javascript. Everything is done using HTML and CSS3. I’ve avoided Javascript for two reasons. First and foremost, not using Javascript makes for a faster page load – particularly for mobile devices. Second, not using Javascript means that there is one less component of my site’s code base that I have to maintain. Of course not using Javascript means that my web site lacks the dynamics and interactivity features that Javascript makes possible. However, hopefully you are coming here for the content and not visual bells and whistles.

Last night I put the finishing touches on my new design and took the plunge of rolling it out – even though I haven’t tested as thoroughly as I should. However, my schedule over the coming months has little spare time so better to act now and deal with issues as they arise.

To see a full side by side visual comparison of my standard vs responsive design home page as seen on my Android smartphone, clip on the image below.

Artsnova Digital Art Gallery site comparison image

What About My Blog?

If you’re reading this on a mobile device, you can see that I have not converted my blog to a responsive web design. Converting my blog to a responsive design would take almost as much time as it took me to convert my web site. Fortunately (or unfortunately) I created my web site and blog separately. Later on I created custom WordPress templates in order to visually integrate my blog into my web site. This approach has worked quite well but it means that the two are designed and maintained separately. For the foreseeable future, I will not have the time to spend on converting my blog to a responsive design.

References

In learning about responsive web design and in coding up my design, the two books that I made the most use of were:

Closing Thought

As a parting shot, I’ll leave you with this quote by Microsoft’s Bob Herbold: "It’s not the technology, folks, it’s the people. When we trace [the errors] back, it’s always human error." Of course what he doesn’t say is that for the most part the people making those errors are Microsoft’s programmers.

Bookmark it:  Stumble It  Bookmark this on Delicious  Digg This  Technorati  Reddit Tweet It


Image Processing and Telling RGB/HSB Color Lies

Thursday, May 8th, 2014

Squashed Blue Man Statue
Squashed version of Blue Man Statue digital painting for testing

As a practitioner of digital art and image processing, and with a background in both math and computer programming, I regularly create my own graphics programs using the Processing programming language. Pictured at the top of this post is a squashed version of a digital painting I did using Adobe Photoshop and some custom brushes I had created. Pretty straight forward stuff.

Recently I’ve been exploring the world of generative art creation by writing my own generative art programs. For some of these programs, rather than starting with a blank canvas I provide an initial image from which to work. The image may be a photograph or a work of digital art. For example in one instance I took a selfie (a self-portrait photograph), created a painted version of that photograph and fed that into one of my generative art programs. (Note: you can see the resulting artwork Generative Selfie at Artflakes.com.)

Unfortunately with large size images complex generative programs can take quite a while to run. Consequently I use whatever tricks I know to speed up program execution. One common ‘trick’ is to avoid using Processing’s canned color routines and to use bit-shifting instead. Bit-shifting allows for very speedy access to an image’s color information which is encoded in an RGB (red,blue,green) format. This means that color is defined by the three values of red, green, and blue. Bit-shifting works because the four individual values for red, green, blue, and alpha (transparency), are all stored in a single 32-bit integer field.

The other night I thought of a cool modification that I could make to one particular generative art program I’ve been working on. However that change would require that I work in HSB (aka HSV) mode. With HSB/HSV, a color is defined by the three values of hue, saturation, and brightness (sometimes referred to as value). Working programmatically in RGB has several drawbacks when compared to the competing HSB color model. HSB provides much more flexibility when it comes to creatively manipulating color.

There is just one problem with the HSB approach. The color information in images is stored in RGB format. The bit-shifting method that works so nicely is not an option for working with HSB. There are standard routines that allow you to extract HSB information from the RGB color format but you pay a penalty in terms of the amount of processing time it takes to do that. And if you are working with an image that has tens of millions of pixels and you are performing a lot of color sampling, let’s just say that your computer is going to be tied up for a while. My back of the envelope calculation leads me to believe that working with HSB would result in an additional 50 million-plus program statement executions in my code and an unknown number of additional statement executions in the underlying Processing and Java code.

By nature I’m an impatient person so for me all this additional program overhead was unacceptable. And then it dawned on me – I could LIE! You see computers are stupid and will believe whatever you tell them. As supporting evidence I offer up the views of science fiction author Arthur C. Clarke:

…the fact is that all present computers are mechanical morons. They can not really think. They can only do things to which they are programmed.

The LIE that came to me was to write a Processing program that would take all the RGB color information from an image file and replace it with HSB information. I could then use that modified version of the image file as input to my HSB generative art program and it would run just as fast as the original RGB version because I would be able to use those very efficient bit-shifting operations. While I was at it I also wrote a utility that converted the file from HSB back to RGB. This allowed me to visually compare the original image with an image after it had undergone the RGB to HSB and back to RGB conversions.

Of course the downside of stuffing HSB data into the RGB field is that every other program on my or anyone else’s computer is going to read that image file and expect that the color information is in RGB format. Take a look at Image 2 below. It’s a copy of the file shown above except I’ve put HSB information into the RGB field. Kind of cool.

Appearance to RGB-reading software
Image 2. How the image looks to RGB-reading software when the file actually contains HSB information.

Taking this whole lying idea a step further, what if I lie to my color converting utility? What if I do the same RGB-to-HSB conversion multiple times while throwing in a few HSB-to-RGB conversions as well? What you can wind up with is one confused picture. Image 3 is an example of the kind of image you can get. In fact you could argue that Image 3 is more artistic than the original painting.

multiple random RGB-to-HSB and HSB-to-RGB conversions
Image 3. Running multiple, random RGB-to-HSB and HSB-to-RGB conversions.

Pablo Picasso once observed that art is a lie that makes us realize truth. That may be but in this case a lie was simply the most expedient way to achieve an artistic objective. Having spent all this time coming up with a nice RGB-to-HSB color conversion utility, it’s now time to get to work on the HSB version of that generative art program.

References

For those of you who would like to know more about RGB, HSB, and Processing, you can check out the following references.

Bookmark it:  Stumble It  Bookmark this on Delicious  Digg This  Technorati  Reddit Tweet It


Mobile Processing Conference at UIC Innovation Center

Thursday, October 31st, 2013

Mobile Processing Conference, UIC Innovation Center
Mobile Processing Conference, UIC Innovation Center

Tuesday night I returned from a 9 day trip to Arizona and tomorrow morning I’ll be heading out to attend the Mobile Processing Conference being held at the University of Illinois – Chicago Innovation Center. The Mobile Processing Conference runs November 1 – 3 from 10:30am to 5:30pm. It’s rare for events like this to be held here in Chicago so I’m indeed fortunate to be in a position to attend. From the web site:

The 2013 conference features artists, digital humanities scholars, and software developers in a series of presentations, panels, and workshops… The event is free and open to the public.

Note that there is a single track of programming. With one program per time period, I’ll be able to attend every program offered. Following is the scheduled programming.

Title: Seeing Sound
Description: Workshop on how to build a sound visualization system and "discuss why it’s completely useless."
Presenter: Lucas Kuzma
Comment Having written my own sound visualization programs and as a presenter on the subject (see Live Art – Interactive Audio Visualizations) I am very anxious to hear Mr. Kuzma’s take on the subject.
Title: Do You Need A CS Degree To Build Apps?
Description: A presentation dealing with whether or not a college degree in computer science is really necessary to be a successful software designer and programmer.
Presenter: Brandon Passley
Comment I will say this: in terms of the knowledge of specific programming languages I obtained in college, I’ve used none of that knowledge since graduating. The skills I learned while in college that have served me well are those associated with how to go about writing a program and how, in general, programming languages work. Mindset and experience is really what I gained from my college computer science classes. FYI – I received my masters in computer science
and was just one class shy of also qualifying for a bachelors degree in computer science.
Title: Breaking Barriers With Sound
Description: A presentation by Stanford Professor and Smule Co-founder Ge Wang about computer music, mobile music, laptop orchestras, and apps.
Presenter: Ge Wang
Comment Another must see for me – especially since I am current enrolled in the Coursera class Introduction to Programming for Musicians and Digital Artists in which I am learning to use the ChucK programming language to create electronic music. In fact one of the instructors for the class is Ge Wang, the creator of the ChucK programming language.
Title: Off-The-Grid: Create Peer-To-Peer Collaborative Networks
Description: A discussion on collaboration using peer-to-peer wireless networks (WiFi, Bluetooth, and NFC technologies) with the Ketai library for Processing
Presenter: Daniel Sauter/Jesus Duran
Comment This is a new topic area for me.
Title: Drawing Machines
Description: A workshop on Processing coding techniques for creating customized "drawing machines".
Presenter: JD Pirtle
Comment Another one I must attend as I have used Processing extensively creating quite a few of my own drawing machines.
Title: The Technology Landscape For Women And Issues Of Gender
Description: A panel about women in computing and why there are a smaller proportion of women in the field today than there were in the 80s.
Presenter: Amanda Cox, Marie Hicks, Lisa Yun Lee
Comment I must say I’m curious as to where these ladies are coming from and what they’ll have to say on the subject. According to a Wikipedia article on women in computing, In the United States, the number of women represented in undergraduate computer science education and the white-collar information technology workforce peaked in the mid-1980s, and has declined ever since. In 1984, 37.1% of Computer Science degrees were awarded to women; the percentage dropped to 29.9% in 1989-1990, and 26.7% in 1997-1998. Of course percentages can be deceiving. Left unanswered is the
percentage of the female population so engaged in the 80s vs today. Also from the same article:
A study of over 7000 high school students in Vancouver, Canada showed that the degree of interest in the field of computer science for teenage girls is comparably lower than that of teenage boys. The same effect is seen in higher education; for instance, only 4% of female college freshmen expressed intention to major in computer science in the US. I am curious to here how this issue is addressed.
Title: Seeing Sound
Description: A workshop for developing sonic visualizations including various methods for converting audio into images using openFrameworks.
Presenter: Lucas Kuzma
Comment From the description: Participants are expected to have a working copy of Xcode, as well as well as working knowledge of C++. Oops, Xcode is the IDE (Integrated Development Environment) for the Apple OS. I’ve played with openFrameworks before but found it to be more code heavy than Processing due to OpenGL issues. Unfortunately I do not currently have an appropriate IDE installed for openFrameworks on my Windows laptop.
Title: Fast And Slow: Mobile Aesthetics And Civil Liberties
Description: Described as a discussion on how to empower a new generation of makers to participate in shaping the technological artifacts that shape us socially and culturally.
Presenter: Daniel Sauter
Comment This could go either way – we’ll see what happens.
Title: Sketching The News
Description: A look at some data visualization projects at the New York Times.
Presenter: Amanda Cox
Comment Another subject area in which I have interest and have done some work.
Title: Processing Shaders, The Sunday Sessions
Description: A workshop about GLSL shaders in Processing 2.0 with the main objectives being to present advanced applications of the shader API, specifically post-processing image filters and blending, procedural generation of 3D objects using fragment shaders, iterative effects with the pframe buffer, and shading of large-scale geometries.
Presenter: Andres Colubri
Comment Major changes were made between the Processing 1.xxx and 2.xxx versions. Most significant was the move towards OpenGL integration. This caused me some real headaches as Processing 2 just wouldn’t work properly on my computer. However upgrading my graphics card drivers did solve the problem (though it took some doing and hurdle jumping to accomplish). For more, see Shaders in Processing 2.0.
Title: Creative Coding on the Raspberry Pi with openFrameworks
Description: Like the title says, Creative Coding on the Raspberry Pi with openFrameworks. Raspberry Pi Hardware will be provided for use during the workshop. Participants are encouraged to bring a laptop.
Presenter: Christopher Baker
Comment If you have never of it, you can find out all about Raspberry Pi here and read the Raspberry Pi FAQ.

The Mobile Processing Conference is being held at the UIC Innovation Center located at 1240 W Harrison St in Chicago, IL. For information about the conference, visit the Mobile Processing Conference web site

Bookmark it:  Stumble It  Bookmark this on Delicious  Digg This  Technorati  Reddit Tweet It


Barrington Cultural Arts Center Internet Class for Artists and Photographers

Thursday, August 29th, 2013

Building an Online Presence: The Internet for Artists and Photographers Class
Building an Online Presence: The Internet for Artists and Photographers Class

On September 21, the Barrington Cultural Arts Center will be hosting my seminar on Building an Online Presence: The Internet for Artists and Photographers. My presentation covers a broad array of issues facing the artist and/or photographer who is looking to either create their initial presence on the Internet or to improve their existing presence. Topics I cover include:

  • planning your online strategy
  • identifying a web site solution
  • blogging for your art
  • using social media to promote yourself
  • using SEO to improve your search engine ranking
  • strategies and alternatives for online selling
  • options for email marketing
  • advertising online
  • understanding web analytics

The formal length of the class is one hour. However past offerings of this class have run as long as 2 hours as I encourage the audience to both ask questions and participate in discussions during the course of my talk. While the class is supposed to last one hour, it will run as long as it takes to insure that attendees have their questions answered – or until they kick us out of the theater.

If you have general questions about course content, please feel free to post your question in the form of a comment below. If you have questions about registration, location, or the Barrington Cultural Arts Center, please contact the Barrington Cultural Arts Center.

Class Registration for Building an Online Presence: The Internet for Artists and Photographers

Registration for this class is required. It is also worth noting that seating is limited. The class fee is $15 for Barrington Cultural Arts Center members and $20 for non-members. The class will be held on Saturday September 21 and will begin at 2:00pm. The class will be held at:

The Garlands Of Barrington – Theater At The Garlands
1000 Garlands Lane, Barrington, IL 60010

TO REGISTER:
contact Doris Kucik by phone (847-561-6211) or email

Please enable JavaScript to obtain my email address.

Resource Links

About Barrington Cultural Arts Center

The Barrington Cultural Arts Center provides a physical space for artists to perform and teach their craft at their Ice House Mall Gallery and Art Center, located at 200 Applebe Street in Barrington, IL. The BCAC hopes to collaborate on public art offerings (i.e. murals, painted benches, plays). Gallery opportunities are available to members.

Bookmark it:  Stumble It  Bookmark this on Delicious  Digg This  Technorati  Reddit Tweet It


OpenSCAD, 3D Objects, and 3D Printing

Tuesday, August 20th, 2013

OpenSCAD 3D Object as Art
OpenSCAD 3D Object as Art

I recently joined the Workshop 88#1 Google group after attending one of their meetings. In going through some of the group discussions, I came across one regarding 3D printing and the choice of software that people made in order to create 3D objects for printing. One of the software selections mentioned was OpenSCAD, an open source product that I have been aware of but never used.

The software is described on the OpenSCAD web site as follows:

OpenSCAD is software for creating solid 3D CAD models. It is free software and available for Linux/UNIX, Windows and Mac OS X. Unlike most free software for creating 3D models (such as Blender) it does not focus on the artistic aspects of 3D modelling but instead on the CAD aspects.

OpenSCAD is not an interactive modeller. Instead it is something like a 3D-compiler that reads in a script file that describes the object and renders the 3D model from this script file.

The power, and weakness, of OpenSCAD is its use of a programming language (script file) to build models. This is in contrast to a traditional 3D modeling program digital artists use, like Lightwave, that supports an interactive mouse-driven style of object creation.

The OpenSCAD user interface is pretty straight forward. Of course that is because the work of creating 3D objects is done via coding. One of the most common complaint about traditional 3D programs is the complexity of the user interface – which makes sense when you consider the variety and complexity of the operations users are performing interactively.

With OpenSCAD, I was able to create simple 3D objects fairly quickly by getting a handle on the scripting language’s syntax. In fact I have illustrated this article using a 3D model I created. The object is composed exclusively of cylinders on which I executed a series of translations and rotations. I should point out that for the illustration of the model I used a Photoshop adjustment layer to alter the hue of the image as rendered in OpenSCAD and used a Photoshop layer style to add a drop shadow to the image.

I do own Adobe Photoshop Extended. Photoshop Extended is the version of Photoshop that supports working in 3D with 3D objects. OpenSCAD saves 3D objects in the STL (Standard Tessellation Language – for more see the Wikipedia STL entry) format. Unfortunately STL is not a 3D format that Photoshop Extended CS4 recognizes. Also unfortunately the selection of 3D file formats that CS4 supports is extremely limited. Surprisingly neither the CS5 or CS6 upgrades have added support for any additional 3D file types. That means that if I want to work with the 3D objects created by OpenSCAD, I will either have to use software other than Photoshop or I will have to use an intermediary program to convert the STL file into one of the very few formats Photoshop recognizes. My preference is to not use Photoshop.

Will I Use OpenSCAD?

There are a plethora of 3D programs available today. Some, like OpenSCAD, are designed for the CAD market. Most aren’t. However, the explosion of 3D printing has generated new interest in CAD programs – especially within the hacker and maker community. For my part, I expect that I will continue to explore OpenSCAD and will attempt to find opportunities to make use of it. I must confess that I do find the programmatic nature of the 3D object creation process appealing.

Note #1: Workshop 88

Workshop 88 hackerspace in Glen Ellyn
Workshop 88 hackerspace in Glen Ellyn

Located in Glen Ellyn IL, Workshop 88 is a hackerspace – also referred to as a makerspace. On their web site, Workshop 88 is described as being focused on science, technology, mechanics, culture and the digital arts and offering a space where people with diverse backgrounds can socialize, collaborate and learn. For more, see the Workshop 88 web site. While my principle interest in investigating the group is to potentially teach a Processing class for them, my secondary interest is in learning more about 3D printing. Given that they have a 3D printer and I don’t, this provides an excellent opportunity to learn more about that aspect of digital creativity.

References

If you are interested in learning more about OpenSCAD and 3D model making, you may want to check out the following.

On the subject of models, I’ll leave you with a quote from John von Neumann: The sciences do not try to explain, they hardly even try to interpret, they mainly make models. By a model is meant a mathematical construct which, with the addition of certain verbal interpretations, describes observed phenomena. The justification of such a mathematical construct is solely and precisely that it is expected to work.

I’ll close by recommending that if you are interested in creating 3D models then give OpenSCAD a try – it’s free so you’ve got nothing to lose.

Bookmark it:  Stumble It  Bookmark this on Delicious  Digg This  Technorati  Reddit Tweet It


An Art Review and Party Lines Update

Tuesday, July 16th, 2013

Party Lines App screen capture
Party Lines Sequel screen capture

A Review of Arts Organizations and Digital Technologies

I just added a review of the Pew Research Center’s Internet and American Life Project report Arts Organizations and Digital Technologies to my website. The report, released at the start of 2013, is a survey of how arts organizations use the Internet and digital technologies. The focus of my review is on the sections dealing with websites and social media. You can read my review here:

A Review of Arts Organizations and Digital Technologies

I expect to spend some time integrating some of the more interesting information into my presentation/class Building an Online Presence: The Internet for Artists and Photographers which I will be giving on August 2 at Musecon which is being held at the Westin Chicago Northwest in Itasca IL.

Party Lines Sequel Processing.js Program

I’ve made major upgrades to my original Party Lines Processing.js program. The upgrades were done to satisfy my final programming assignment for the Creative Programming for Digital Media & Mobile Apps Coursera class. My changes were to add a nicer GUI, add two additional painting modes (curves and ellipses) and add an additional coloring mode that pulls colors from Vincent van Gogh’s painting Field with Poppies.
Check it out: Party Lines Sequel Processing.js Sketch

That’s all folks, Jim

Bookmark it:  Stumble It  Bookmark this on Delicious  Digg This  Technorati  Reddit Tweet It