Chunk 74 - Draft Java/Processing code

The objective of chunk 74 is to explain the difference between bit-mapped and vector graphics and illustrate this difference by applying pixel gradients to bit-mapped (raster) images.

I will be using the code reproduced below to illustrate this chunk. Copy/paste into a word processor (e.g. MS-WORD) and from there into your sketchbook window and hit run. Do not copy direct into your sketchbook as you will have text formatting problems.

You can experiment with smaller size images where you will see that the algorithm is only able to sample color spectral values within a band - leading to greater band delineation. The program isn't designed to handle images larger than 510,510.

void setup()
{
  size(510, 510);
  background(0);
  smooth();

int radius = (width/2);
int normalize = ((255/(radius))*5);//displays over spectrum range

createGradient(radius, normalize);
} //close setup()

void createGradient(int radius, int normalize )
{
float px = 0, py = 0, angle = 0;
float gapFiller = 16.0;
color c = color(int(255), int(0), int(0));

for (int i=0; i<radius; i++) {
   for (float j=0; j<360; j+=1.0/gapFiller) {
    px = radius+cos(radians(angle))*i;
    py = radius+sin(radians(angle))*i;
    angle+=1.0/gapFiller;
  
    if(i<radius/5) {//conditional statements for each of the 5 spectral bands
      c = color(int(255), int(0+normalize*i), int(0));
      }
    if(i>radius/5 && i<(2*radius/5)) {
      int adj = radius/5;//offset to restore count value to 1 for band
      c = color(int(255-((i-adj)*normalize)), int(255), int(0));
      }
    if(i>(2*radius/5) && i<(3*radius/5)) {
      int adj = int(2*radius/5);
      c = color(int(0), int(255), int(0+((i-adj)*normalize)));
      }
     if(i>(3*radius/5) && i<(4*radius/5)) {
      int adj = int(3*radius/5);
      c = color(int(0), int(255-((i-adj)*normalize)), int(255));
      }
    if(i>(4*radius/5) && i<radius) {
      int adj = int(4*radius/5);
      c = color(int(0+((i-adj)*normalize)), int(0), int(255));
      }
               
   set(int(px), int(py), c);
  }
 }
}

Here is a second piece of code that I will use to illustrate this section.
Randomization of wedge shape and colour are combined to give some interesting
colour gradient designs.

void setup()
{
  size(510, 510);
  smooth();

int j = 0; //publicly accessible counter
int[] x = {0,1,2,3};//setGradient case values
//randomly & progressively select all case values
 for (int i=0; i<=x.length; i++) {
   int index = int(random(5));//random colorBand
int wedgeChoice = int(random(x.length));
int choice = x[wedgeChoice];
setGradient(choice, j, index);
x = removeArrayElement(choice, x);
//for (int k=0; k<x.length; k++) {
//println("Array X contains: "+x[k]);
//}
}
} //close setup()

void setGradient(int choice, int j, int index)
{
//println("Choice is: "+choice);
float px = 0, py = 0;
switch(choice) {
case 0:                                    //***
for (int i=0; i<=width; i++) {             // **
    px++;                                  //  *
    py = 0;
for (j=0; j<=i; j++) {
      py++;
      color c = setColor(j, index);
      set(int(px), int(py), c);
  }
}
break;
case 1:                                   //*
for (int i=0; i<=width; i++) {            //**
    py++;                                 //***
    px = 0;
for (j=0; j<=i; j++) {
      px++;
      color c = setColor(j, index);
      set(int(px), int(py), c);
  }
}
break;
case 2:                                  //  *
for (int i=width; i>=0; i--) {           // **
    py++;                                //***
    px = width;
for (j=0; j<=width-i; j++) {
      px--;
      color c = setColor(j, index);
      set(int(px), int(py), c);
  }
}
break;
case 3:                                   //***
for (int i=0; i<=width; i++) {            //**
    px++;                                 //*
    py = 0;
for (j=0; j<=width-i; j++) {
      py++;
      color c = setColor(j, index);
      set(int(px), int(py), c);
  }
}
break;
}
}

color setColor(int j, int index) {
color c1 = color(int(255), int(j), int(0));
color c2 = color(int(j), int(255), int(0));
color c3 = color(int(0), int(255), int(j));
color c4 = color(int(0), int(j), int(255));
color c5 = color(int(j), int(0), int(255));
color[] colors = {c1,c2,c3,c4,c5};
color colorBand = color(colors[index]);
return colorBand;
}

int[] removeArrayElement(int n, int[] oldArray){
   int[] newArray = new int[oldArray.length-1];
   int newIndex = 0;
   for (int oldIndex=0; oldIndex<oldArray.length; oldIndex++)
      if (oldArray[oldIndex] != n)
            {  
                newArray[newIndex] = oldArray[oldIndex];
                newIndex++;
            }
   return newArray;
} 

Chunk 76 - Draft Java/Processing code

The objective of chunk 76 is to load, tile and otherwise manipulate images. I will be using the code reproduced below to illustrate this chunk.

Before you can run the following code, make sure you download and install Andreas Schegel's custom Processing library, see http://www.sojamo.de/libraries/controlP5/

Then copy/paste into a word processor (e.g. MS-WORD) and from there into your sketchbook window and hit run. Do not copy direct into your sketchbook as you will have text formatting problems. You can play with your own images. I have tried to render repaint times as fast as possible but they are of course correlated to your image file size.

Have fun! Any suggestions for improving the code, without making it much longer, most welcome!

import javax.swing.*;
import controlP5.*;//Andreas Schlegel's Controller library

public ControlP5 controlP5;
public ControlWindow controlWindow;
int myColorBackground = color(0,0,0);

public int colorValue = 0;//default tool values
public int pixelValue = 1;
public int noTiles = 4;
public Numberbox myNumberbox;

// create a file chooser 
public JFileChooser fc = new JFileChooser();
public File file; //Must be jpg, gif, tga or png image file 

public PImage img;//image holders
public PImage origImg;


void setup() {

 try {
int returnVal = fc.showOpenDialog(this);    
if (returnVal == JFileChooser.APPROVE_OPTION) { //1
  file = fc.getSelectedFile(); 
  // see if it's a Processing supported image 
  String fileName = file.getName().toLowerCase();
  if (fileName.endsWith("jpg") || fileName.endsWith("gif") || fileName.endsWith("tga")
       || fileName.endsWith("png"))
  {
    // load the image using the given file path
    img = loadImage(file.getPath()); 
    if (img != null) {
     origImg = createImage(img.width, img.height, RGB); //make copy of original image
     arraycopy(img.pixels, origImg.pixels);
     // size the window and show the image
     size(img.width,img.height); 
     image(img,0,0); 
     frameRate(25);
    controlP5 = new ControlP5(this);
  controlP5.setAutoDraw(false);
  controlWindow = controlP5.addControlWindow("controlP5window",100,100,400,300);
  controlWindow.setBackground(color(myColorBackground));
  ControllerGroup infoTextarea = controlP5.addTextarea("label",
  "To use any of the three program widgets below, you must \n"+
  "place the cursor over the widget and keep the left button \n"+
  "pressed down. Both sliders must be returned to their left- \n"+
  "most default values before using the numberBox tiling tool. \n"+
  "Placing the cursor over or near the number in the numberBox \n"+
  "will cause the row/col value of number of tiles to change.  \n"+
  "NOTE, repaint times can be several seconds.",50,0,300,100);
  infoTextarea.setColorValue(#FFFFFF);
  infoTextarea.moveTo(controlWindow);
  Slider mySlider1 = controlP5.addSlider("colorSlider",0,255,0,50,100,200,20);
  Slider mySlider2 = controlP5.addSlider("pixellateSlider",1,20,1,50,150,200,20);
  mySlider1.setWindow(controlWindow);
  mySlider2.setWindow(controlWindow);
  myNumberbox = controlP5.addNumberbox("numberboxTilingTool",4,50,200,100,14);
  myNumberbox.setWindow(controlWindow);
   } 
  } 
  else { 
    println("Unsupported file selected by user."); 
    System.exit(0);
   } 
}  

} catch (Exception e) { 
  e.printStackTrace();  
}
}


void draw() {
 
  background(img);
  colorChange(pixelValue);
  controlP5.draw();
  noLoop(); //stops continuous screen repaints
}

void colorChange(int detail) {
  
    arraycopy(origImg.pixels, img.pixels);
    noStroke();
    detail = pixelValue;
    for (int i=0; i<width; i+=detail) {
      for (int j=0; j<height; j+=detail) {
        color c = img.get(i,j);
        fill(c+colorValue);
        img.set(i, j, c+colorValue);
        rect(i,j,detail,detail);
      }
  } return;
}  

void setTiles() {
    
    int w = width/noTiles;
    int h = height/noTiles;
    for (int i=0; i<height; i+=h) {
      for (int j=0; j<width; j+=w) {
      image(img,j,i,w,h);
      }
    } return;
}  

void colorSlider(int colValue) {
  colorValue = colValue;//sets sliderValue = value of "slider"
  redraw();
}

void pixellateSlider(int pixValue) {
  pixelValue = pixValue;//sets pixelValue = value of "pixellate"
  redraw();
}

void numberboxTilingTool(int theColor) {
  noTiles = theColor; 
  setTiles();
  redraw();
}