GDV P.1.2.2 Color palettes from images

During the past weeks I went through the P.1.2.2 Color palettes from images chapter. The pixels of a loaded image are scanned using the mouse position in a specific grid spacing, one by one and row for row, to define the color value. These values are stored in an array and can be sorted by hue, saturation, brightness, or gray value. The original program is here.

I started with selecting my own 3 images. Could have selected more but I thought it would be more interesting to select 3 because than you could see the different modifications better. You can found them here:
Rotterdam, Iceland, StuwDriel.

I also changed the size of the display window. Went through the program and tried to understand what it was doing and how it was doing it. The first variations were not really variations because I only replaced the images which were already in the original Generative Design code.
P_1_2_2_01_GDV_01

The basic things I did for all variations of the program is to put an extra layer on top of the image layer. The program variations display simple shapes like rectangles or ellipses on top. Here I just placed black rectangles on top of the original picture using the original code.
P_1_2_2_01_GDV_02

In this variation I placed smaller white rectangles on top of the black rectangles.
P_1_2_2_01_GDV_03

Replaced the rectangles by ellipses.
P_1_2_2_01_GDV_04

Repositioned the ellipses on top of each other. Used some transparency and put the rectangles on top.
P_1_2_2_01_GDV_05

Using only ellipses this ones displays (for me much too interesting) patterns. What I really mean is that they are too complex.
P_1_2_2_01_GDV_06

Here is a variation with noFill () and ellipseMode set to (CORNER). Also used some transparency.
P_1_2_2_01_GDV_07

Used noFill () and replaced the ellipses with rectangles. The color of the rectangles are now depending on the image which is below.
P_1_2_2_01_GDV_08

This sketch is the same as the previous one except the increased strokeWeight.
P_1_2_2_01_GDV_09

Here is the strokeWeight connected to the point where your x-mouse is located. The mouse-position far left gives a thin stroke. Far right gives a thick stroke.
P_1_2_2_01_GDV_10

I will not comment on all sketches I have made. But there were a few things which I found out and which I did not now when I started with this chapter. I went to the generative design library page and noticed that there were a few more functions which I could use. Check the reference page for this. Beside of hue, saturation, brightness and grayscale there is also a possibility to sort on red, green and blue. Another option is alpha.

There was a new issue (for me). Which is that not all Processing libraries can be ported to JavaScript. I was not aware of that. I just converted the Processing files to JavaScript. When displaying those in the browser I noticed that sorting was not working. But it worked in the Processing files. Checked http://wiki.processing.org/w/JavaScript. At the bottom of the page there is an issue about libraries. So I think it is a kind of drawback that you cannot use all Processing libraries in JavaScript. Because I would like to show also the sorting process on-line. And because I also liked some of the sorted images I have put them on a flickr page. These pages are not interactive. But you can have an impression what kind of images can be generated when sorted in Processing. The flickr page you can find here.

Advertisements

Comments? Leave a reply.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s