Using Kuler in Processing with colorLib

Posted by Jan Vantomme on 16 November 2010.
Tags: , ,

Update: Adobe is no longer issuing Kuler API Keys anymore, so you can’t use the Kuler functionality in colorLib anymore.

colorLib makes it easy to use color palettes from Adobe Kuler in your Processing sketches. If you want to use Kuler, you’ll need an API key. You can get one on the Kuler website. You’ll need to import the colorLib library to your sketch and declare a Kuler and a KulerTheme variable.

Kuler k;
KulerTheme[] kt

Inside the setup method, you need to create a Kuler object and set the API key right after that. To query Kuler for color palettes you can use a lot of different methods. In the example below, I’m using the getPopular() method to fetch results from Kuler in the KulerTheme array.

void setup()
{
    size
(450400);
    
= new Kuler(this);
    
k.setKey("YOUR-API-KEY-HERE");
    
kt k.getPopular();

To draw the palettes to the screen, you’ll need to add a for-loop in the draw() method.

for (int i 0kt.lengthi++) {
    
for (int j 0kt[i].totalSwatches(); j++) {
        fill
(kt[i].getColor(j));
        
rect(j*90i*209020);
    
}

Below are a screenshot of the most popular themes on the Kuler website and an image from the Processing sketch you just created. You’ll see that the palettes in each image are the same.

Screenshot of the Most Popular Themes on the Kuler website.

The Most Popular Themes from Kuler used in Processing.

As you can see in the screenshot, there are four ways to look for themes on the Kuler website: Newest, Most Popular, Highest Rated and Random. The list below shows you how to access these standard collections.

  • kt = k.getRecent();
  • kt = k.getPopular();
  • kt = k.getHighestRated();
  • kt = k.getRandom();

Searching for Colors

The Kuler API makes it easy to search for color palettes. You can search for a general query, but it’s also possible to add a filter to get better results. The code example and image below shows you a generic search for the word ‘strawberry’.

void setup()
{
    size
(450400);
    
= new Kuler(this);
    
k.setKey("YOUR-API-KEY-HERE");
    
kt k.search("strawberry");

Colors for the searchterm 'strawberry' in our Processing sketch.

If you want to narrow down search results, you can use one of the filters. You only need to add an extra parameter to the search method. The possible values are listed below.

  • kt = k.search("tag", "rainbow"); Get all palettes tagged with the word ‘rainbow’.
  • kt = k.search("title", "forest"); Get all palettes with the word ‘forest’ in the title
  • kt = k.search("hex", "32948a"); Get all palettes which contain the hexadecimal color ‘32948a’.
  • kt = k.search("themeID", "16524"); Search Kuler for a specific color palette.
  • kt = k.search("userID", "16524"); Get all colors for a specific user, based on the user ID.
  • kt = k.search("email", "name_AT_domain.com"); Get all colors for a specific user, based on the e-mail address.

Download

Download the example sketch for using Kuler with colorLib.

Tweet this article

Oldskool Comments (2)

Gravatar for Mark Webster

From: Mark Webster
Date: 18.11.2010

Hi there Jan, Great post again. This is a really helpful tool for working with colour. Thanks for sharing your knowledge. I'll get some tests up on Flickr and a post on OpenProcessing at some point. regards Mark

Top · Permanent link to this comment

Gravatar for Jan Vantomme

From: Jan Vantomme
Date: 18.11.2010

You can post your work in the "colorLib pool":http://www.flickr.com/groups/colorlib/ on Flickr. Connecting to the Kuler API from an applet probably won't work. You'll need to fetch the results from Kuler with a PHP script running on your server. Andreas added a setserverPage( ) method to the library so you can add the link to to the page. I usually use colorLib in apps.

Top · Permanent link to this comment