Yam Big Richard

Video

Tue, 29 Jan 2013 13:09:57 -0500

Echo Lake - Even The BlindDead Berlin - HipnosisOmbre -...

Tue, 15 Jan 2013 17:10:27 -0500

Echo Lake - Even The Blind
Dead Berlin - Hipnosis
Ombre - Tormentas
Ssaliva - AVE
Will Stratton - Who Will
Jacaszek - White Wind Dance
The XX - Fiction (Kid Smpl Remix)
Black Sabbath - Planet aravan (Poolside Rework extended intro)
Monomono - Water Pass Gari (Pts 1 & 2)
Free Association - Purple Mikes
Fela Kuti - No Possible (Joystick Jays Vu Remix)

Finding the Centroid of Non Intersecting Polygons

Sun, 13 Jan 2013 10:14:00 -0500

I answered some questions on the Processing forum which led to me writing this small function to determine the centroid of a polygon it uses this formula to determine the position of the centroid, Cx and Cy:

where

it might be useful for someone.

class pPoint {
 int x, y;
 
 pPoint(int x, int y) {
  this.x = x;
  this.y = y;
 } 
}

void setup() {
 
 size(400,400);
  
 noFill();
 rect(10,10,200,200);
 pPoint[] pArray = new pPoint[4];
 pArray[0] = new pPoint(10,10);
 pArray[1] = new pPoint(210,10);
 pArray[2] = new pPoint(210,210);
 pArray[3] = new pPoint(10,210);
  
 
  
 pPoint pp = getCentroid(pArray);
 
 println(pp.x + "," + pp.y);
 ellipse(pp.x, pp.y, 2, 2);
  
} 

pPoint getCentroid(pPoint[] pArray) {
  
  int X = 0;
  int Y = 0;
  int A = 0;
  
  int numPoints = pArray.length;
  println(numPoints);
  
  for (int i = 0; i < numPoints-1; i++ ) {
        
   X = X +  (pArray[i].x + pArray[i+1].x) * 
             (pArray[i].x*pArray[i+1].y - 
              pArray[i+1].x*pArray[i].y);
     
   Y = Y +  (pArray[i].y + pArray[i+1].y) * 
             (pArray[i].x*pArray[i+1].y - 
               pArray[i+1].x*pArray[i].y);
               
   A = A + ((pArray[i].x * pArray[i+1].y) - (pArray[i+1].x * pArray[i].y));
               
  }
  
  A = A/2;
  
  X = X/(6*A);
  Y = Y/(6*A);
  
  pPoint pp = new pPoint(X,Y);
  return pp;
  
  
}

BMXing

Mon, 07 Jan 2013 13:18:38 -0500

BMXing

Edge Detection Video

Mon, 07 Jan 2013 13:17:48 -0500

Edge Detection Video

Gaussian Blur in Processing

Mon, 07 Jan 2013 10:21:00 -0500

imContinuing on with the image processing theme I looked at blurring an image. Gaussian Blur is similar to the Sobel edge detection algorithm insomuch that for each pixel you are processing it looks at the surrounding pixels to determine what change needs to be done. Each pixel becomes the average of the pixels around it, except that it is a weighted average, this means that the pixels closer to the centre are of more importance.

To what importance we need to give each pixel surrounding and including the centre, we need to use this equation:

Where x is horizontal distance from the centre pixel, y is the vertical distance from and sigma is the blur value (the higher the value the more the blur).

In processing the equation would look like:

weightingValue = 1/(2*PI*sigma*sigma) *
exp(-1*((x*x)+(y*y))/(2*(sigma*sigma)));

By plugging in the x,y and sigma values for each pixel we end up with 9 weighting values that I store in an array. These values need to be normalised before they can be used to change the colour values of a pixel, to do this is simple, add up all of the current weighting values and then multiply by 1/total, this ensures that the total of the new values will add up to 1.

Now you have the weighting values you can step through every pixel to determine the colour intensities of the surrounding values and then multiply them buy the weighted value which are then added together to create a new value.

Working out the top middle value and adding together would look like this:

      //top middle
      //get colour of top middle pixel
      px = pixels[((y-1)*width)+x];
      // get r,g and b values for top middle pixel and multiply by weighting
      redvalue = red(px)*kernelWeightings[1];
      bluevalue = blue(px)*kernelWeightings[1];
      greenvalue = green(px)*kernelWeightings[1];
      // add weighted r,g and b values together
      redIntensity += redvalue;
      greenIntensity += greenvalue;
      blueIntensity += bluevalue;

Once all of the colour values of the surrounding pixels have been weighted and added together we can then plug them back into the orignal pixel, note that I have used a array of pixels to do this as we don’t want to change the original values until everyone of them has been modified.

pixelarray[x+(width*y)] = color(redIntensity,greenIntensity,blueIntensity);

After this we can use the array of pixels to create a new image.

   for(int i = 0; i<width*height;i++) {
       pixels[i] = pixelarray[i];
   }
background(0);
   updatePixels();

Passing through the pixels more than once will produce an image that looks something like this:

Full code:

float sigma = 3.5;  //The blur factor

float returnWeightingValue(float x, float y) {
  
  float weightingValue;
  
  //Gaussian Equation
  weightingValue = 1/(2*PI*sigma*sigma) *
                        exp(-1*((x*x)+(y*y))/(2*(sigma*sigma)));
  return weightingValue;
}

void gaussBlur() {
  float p = returnWeightingValue(0,0);
  float[] kernelWeightings =  new float[9];
 
  float normVal = 0;
  
  //top left
  kernelWeightings[0] = returnWeightingValue(1,1);
  normVal+= kernelWeightings[0];
  
  //top middle
  kernelWeightings[1] = returnWeightingValue(0,1);
  normVal+= kernelWeightings[1];
  
  //top right
  kernelWeightings[2] = returnWeightingValue(1,1);
  normVal+= kernelWeightings[2];
  
  //mid left
  kernelWeightings[3] = returnWeightingValue(1,0);
  normVal+= kernelWeightings[3];
  
  //middle
  kernelWeightings[4] = returnWeightingValue(0,0);
  normVal+= kernelWeightings[4];
  
  //mid right
  kernelWeightings[5] = returnWeightingValue(1,0);
  normVal+= kernelWeightings[5];
  
  //bottom left
  kernelWeightings[6] = returnWeightingValue(1,1);
  normVal+= kernelWeightings[6];
  
  //bottom middle
  kernelWeightings[7] = returnWeightingValue(0,1);
  normVal+= kernelWeightings[7];
  
  //bottom right
  kernelWeightings[8] = returnWeightingValue(1,1);
  normVal+= kernelWeightings[8];
  
  for (int i = 0; i<9; i++) {
    kernelWeightings[i] = (1/normVal)*kernelWeightings[i];
  }
  
  loadPixels();
  int[] pixelarray = new int[width*height];
  
  float redvalue, bluevalue, greenvalue;
  float redIntensity, greenIntensity, blueIntensity;
  
  color px;
  
  for (int x = 1 ; x < width-1; x++) {
    for (int y = 1; y < height-1; y++) {
  
    //top left Pixel
      px = pixels[((y-1)*width)+(x-1)];
      redvalue = red(px)*kernelWeightings[0];
      bluevalue = blue(px)*kernelWeightings[0];
      greenvalue = green(px)*kernelWeightings[0];
      redIntensity = redvalue;
      greenIntensity = greenvalue;
      blueIntensity = bluevalue;
      
      //top middle
      px = pixels[((y-1)*width)+x];
      redvalue = red(px)*kernelWeightings[1];
      bluevalue = blue(px)*kernelWeightings[1];
      greenvalue = green(px)*kernelWeightings[1];
      redIntensity += redvalue;
      greenIntensity += greenvalue;
      blueIntensity += bluevalue;
      
      // top right 
      px = pixels[((y-1)*width)+x+1];
      redvalue = red(px)*kernelWeightings[2];
      bluevalue = blue(px)*kernelWeightings[2];
      greenvalue = green(px)*kernelWeightings[2];
      redIntensity += redvalue;
      greenIntensity += greenvalue;
      blueIntensity += bluevalue;

      
      //middle left pixel
      px = pixels[(y*width)+(x-1)];
      redvalue = red(px)*kernelWeightings[3];
      bluevalue = blue(px)*kernelWeightings[3];
      greenvalue = green(px)*kernelWeightings[3];
      redIntensity += redvalue;
      greenIntensity += greenvalue;
      blueIntensity += bluevalue;

      //middle
      px = pixels[(y*width)+x];
      redvalue = red(px)*kernelWeightings[4];
      bluevalue = blue(px)*kernelWeightings[4];
      greenvalue = green(px)*kernelWeightings[4];
      redIntensity += redvalue;
      greenIntensity += greenvalue;
      blueIntensity += bluevalue;
      
      //middle right
      px = pixels[(y*width)+x+1];
      redvalue = red(px)*kernelWeightings[5];
      bluevalue = blue(px)*kernelWeightings[5];
      greenvalue = green(px)*kernelWeightings[5];
      redIntensity += redvalue;
      greenIntensity += greenvalue;
      blueIntensity += bluevalue;

      
      //bottom left
      px = pixels[((y+1)*width)+(x-1)];
      redvalue = red(px)*kernelWeightings[6];
      bluevalue = blue(px)*kernelWeightings[6];
      greenvalue = green(px)*kernelWeightings[6];
      redIntensity += redvalue;
      greenIntensity += greenvalue;
      blueIntensity += bluevalue;

      //bottom middle
      px = pixels[((y+1)*width)+x];
      redvalue = red(px)*kernelWeightings[7];
      bluevalue = blue(px)*kernelWeightings[7];
      greenvalue = green(px)*kernelWeightings[7];
      redIntensity += redvalue;
      greenIntensity += greenvalue;
      blueIntensity += bluevalue;

      //bottom right
      px = pixels[((y+1)*width)+x+1];
      redvalue = red(px)*kernelWeightings[8];
      bluevalue = blue(px)*kernelWeightings[8];
      greenvalue = green(px)*kernelWeightings[8];
      redIntensity += redvalue;
      greenIntensity += greenvalue;
      blueIntensity += bluevalue;

      pixelarray[x+(width*y)] = color(redIntensity,greenIntensity,blueIntensity);              
    }
  }

 for(int i = 0; i<width*height;i++) {
  pixels[i] = pixelarray[i];
 }     
  
 background(0);    
 updatePixels();

  
  
}

void setup () {
  
  size(375,500);
  PImage img = loadImage("richard2.jpg");
  image(img,0,0);
   
}

void draw() {
  
  if (mousePressed == true) {
    gaussBlur();
  }
  
}

Edge Detection in Processing Using the Sobel Operator (Code)

Fri, 04 Jan 2013 14:13:00 -0500

Here is a quick run through of the code used to do an edge detection in Processing. First up I create an array that can contain all of the values of the screen intensities, place an image on the screen and load the image pixels into the system Pixels[] array:

int[] pixelarray = new int[width*height];
PImage img = loadImage(“image.jpg”);
image(img,0,0);
loadPixels();

Iterating through each individual pixel, I get red, green and blue intensity values for that pixel add them together and depending on the values in the Sobel operator I have multiplied and added them to the overall intensity. For example the top left pixel in the Sobel matrix:

      px = pixels[((y-1)*width)+(x-1)];
      redvalue = red(px);
      bluevalue = blue(px);
      greenvalue = green(px);
      intensity = redvalue + greenvalue + bluevalue;
      Gx += -intensity;
      Gy += intensity;

Once I have worked out values for all of the surrounding pixels I work out using Pythagoras the overall gradient length.   Then I normalise it so that it can be used as a output value.

      //calculate normalised length of gradient
      glength = sqrt((Gx*Gx)+(Gy*Gy));
      glength = (glength/4328) * 255;

I load this new information into the array of intensities which is used to create the image of the outline. I have also used a threshold value to remove the detail from within the picture.

    if (glength > 10)
        pixelarray[x+(width*y)] = color(glength);
      else
        pixelarray[x+(width*y)] = color(0);

Finally I load the array into the system array of pixels which is used to display the new image.

   for(int i = 0; i<width*height;i++) {
     pixels[i] = pixelarray[i];
   }

Full code - https://github.com/bigrichardc/sketchbook/blob/master/sobelImageDetection.pde

Edge Detection in Processing Using the Sobel Operator (Theory)

Fri, 04 Jan 2013 13:15:00 -0500

I’ve been doing some experiments with altering colour values of digital images and video depending upon their initial values, this led me to looking into how edge detection worked, doing a quick web search led me to pages about the Sobel operator. Back in the mists of time I did a mathematics degree but after many years of not using any of the hard (or even easy) maths I was taught, I have forgotten it all, and so was left scratching my head looking at the various matrices and equations and words like convolution that I came across.

After a bit more head scratching and considering putting on the too hard to do file, I found this Python/C++ tutorial on the which allowed me to work out what was going on and realise that the maths stuff just looked scary.

In basic terms the Sobel operator is used to determine the intensity of colour of a pixel and of it’s neighbours then using a method called convolution approximates the difference in intensity along the x and y axis. A bit of a mouthfull I know but basically it does this:

Get the intensities of pixel x,y and of it’s 8 surrounding pixels.
Work out the change in intensity of the pixels across the x-axis.
Work out intensity change in the y-axis.
Use Pythagoras to work out overall change for those pixels.

As seen in my bad diagram.

If you do this for each pixel on the screen you will get an intensity change level for each will allow you to build a picture showing the outlines like so:

Another thing you need to know is that the Sobel operator consists of two matrices that look like this:

Basically these are the values you multiply the intensity of each pixel surrounding the pixel you are working out the change in intensity for, going left to right (Gx) and from top to bottom (Gy). So when working out the change across the x-axis the position in the matrix corresponds to the value you would multiply the intensity of the pixel by, for example the pixel intensity in the top left hand corner by -1 and the intensity of the bottom right by +1.

That really is all you need to know in order to be able to detect edges in an image, there are other types of operators that can be used to determine edges each with their own properties but as yet I have not looked at them.

For more formal information including scary looking maths here’s the Sobel operator Wiki page - http://en.wikipedia.org/wiki/Sobel_operator

If that is not making too much sense my next post will look at the code I used to produce the above image which hopefully makes things clearer.

Colour detection on BMX video.

Wed, 02 Jan 2013 12:50:10 -0500

Colour detection on BMX video.

Experimenting with pixel colours.

Wed, 02 Jan 2013 11:04:36 -0500

Experimenting with pixel colours.

comicsansmustdie: z

Thu, 06 Dec 2012 13:33:40 -0500

comicsansmustdie:

z

Screen shot of the rotating squares sketch below.

Thu, 06 Dec 2012 13:10:00 -0500

Screen shot of the rotating squares sketch below.

Translate, Rotate, Draw. (More Pushing and Popping)

Thu, 06 Dec 2012 13:08:00 -0500

Experimenting a bit further with matrix co-ordinates, I realised that its quite easy to forget which order that you are supposed perform the order of things, so I (badly) drew an easy to follow diagram that shows me how to do it.

Step 1. The initial step, the matrix 0,0 co-ordinate starts at the top left hand corner of your window. If you are using more than one it is here that you will pushMatrix().
Step 2. The translation step, the matrix is moved along the x and y axis to your desired spot.
Step 3. The rotation, the matrix is rotated through the z axis.
Step 4. Drawing, you can now draw whatever you want on the matrix. It is here that you would call the popMatrix() if you needed to draw on another matrix.

This sketch uses the translate, rotate and push and pop matrix functions to rotate rectangles held in an ArrayList as the mouse hovers over them.

class Square {
  
  int x, y;
  int sideLength = 50;
  int pen = 1;
  int r = 120;
  
  
  Square() {
    x = (int)random(width-sideLength);
    y = (int)random(height-sideLength);
  }
  
  Square(int x1, int y1) {
    x=x1;
    y=y1;
  }  
    
  void drawSquare() {
    strokeWeight(pen);
    fill(r,0,0);
    pushMatrix();
      translate(x,y);
      rect(0,0,sideLength, sideLength);
      line(-sideLength/2,-sideLength/2,sideLength/2,sideLength/2);
    popMatrix();
  }
  
  void drawRotatedSquare() {
    strokeWeight(pen);
    fill(r,255-r,r);
    pushMatrix();
      translate(x,y);
      rotate(90*PI/180);
      rect(0,0,sideLength, sideLength);
      line(-sideLength/2,-sideLength/2,sideLength/2,sideLength/2);
    popMatrix();
  }
  
  boolean mouseOver(int mx,int my) {
    if ( mx  >= x-sideLength/2 && mx < x+sideLength/2) {
      if ( my  >= y-sideLength/2 && my < y+sideLength/2) {
      return true;
      }
      else return false;
    } else return false;
  } 
}

Square sq;
ArrayList sqs = new ArrayList();
int rotCount = 0;


void setup()
{
  rectMode(CENTER);
  size(500,500);
  for (int y = 0; y<height-50; y+=100) {
    for (int x = 0; x < width-50; x+=100)
    {
      sq = new Square(x+50,y+50);
      sqs.add(sq);
    }
  }
}

void draw() {
  rotCount = 0;
  background(190,0,0);
  int listSize = (sqs.size());
  Square s;
  for (int i = 0; i<listSize; i++)
  {
    s = (Square)sqs.get(i);
    if (s.mouseOver(mouseX,mouseY)) {
      s.pen = 6;
      s.r = (int)random(255);
      s.drawRotatedSquare();
    }
    else {
      s.pen = 1;
      s.drawSquare();      
    }
  }
}

Output from sketch in previous post.

Wed, 05 Dec 2012 10:56:33 -0500

Output from sketch in previous post.

Pushing and Popping

Wed, 05 Dec 2012 10:44:00 -0500

Being a bit lazy it’s taken me quite a while to work out how pushMatrix() and popMatrix() actually work and why I would need them. Whenever I have tried to rotate things around point before they’ve just gone whizzing off around the screen and in no apparent order whatsoever so I went off in a huff and did something else instead. Today I decided to sit down and actually see where I was going wrong.

With the help of these three helpful pages:

1. Daniel Shiffman’s Learning Processing
2. Tlll Nagel’s Creative Coding
3. Critical Zero

The rotate() function in Processing rotates the entire co-ordinate matrix which means that everything rotates around the same centre point. A co-ordination matrix is like a glass surface with images drawn onto it which can then me moved around or rotated. Calling the pushMatrix() function adds another co-ordinate matrix which would be similar to placing another glass surface over the original, this can also be moved and rotated and drawn on without effecting the original. The popMatrix() function then returns you to the previous matrix and allows you to work on that.

This is a simple sketch that fills the screen with rectangles and using pushing and popping rotates each of them around their centre points:

float angle = 0;

void setup () { 
  size(500,500);
  rectMode(CENTER);
}

void draw() {
  background(0);
  angle+= 0.05;
  for (int y = 0; y < height-50; y+=50)
  {
  
    for (int x = 0; x < width-50; x+=50)
    {
  
    pushMatrix(); 
    translate(50+x,50+y);
    rotate(angle);
    rect(0,0,50,50);
    popMatrix();
    }
  }
}

Surreal!

Fri, 30 Nov 2012 09:48:56 -0500

Surreal!

Linked Lists in Processing

Sat, 17 Nov 2012 09:19:01 -0500

I’ve been playing around with using a linked list to create a slideshow in Processing. I know that in Java you can use the LinkedList item and methods to do this but I decided to experiment with using “pointers” (alright they don’t really exist in this language) to create the data structure myself.

It’s very stripped down and there is not error checking but the code is fairly self explanatory:

class LLink {

// This is the object that contains the data i.e. the filename
// and the node which points to the next item in the list
  
    public String filename;
    //This will point to the next item if any in the list.
    public LLink nextLink;
  
  
  //Link Constructor
  public LLink(String fn) {
    filename = fn;
    
  }  
}


class LinkList {
  
  //This is the structure for the linked list.
  
  //This will contain the first item of the list.  As it is a
  //stack type data structure every time a new item is added
  //to the list it becomes the first item.
  private LLink first;
  
  //current here is used to point to the next item from the list
  //which can be retrieved.
  private LLink current;
  
  //create an empty list
  public LinkList() {
    first = null;
  }
  
  //add an item to the list;
  public void insert (String fn) {
    //create a new node item
    LLink llink = new LLink (fn);
    //point new node to the current first item in list
    llink.nextLink = first;
    //set new item as first item
    first = llink;
    
    //if this is the first item added then it becomes the first
    //item that can be retrieved
    if (first.nextLink == null)
      current = first;
      
  }
  
  public String getNext() {
    //as long as there more items to be retrieved
    if (current.nextLink != null)
    {
      //grab the next item
      current  = current.nextLink;
    } //otherwise grab the first item again.
    else {
      current = first;
    }
    return current.filename;
  }  
}

PImage bg;
LinkList llist = new LinkList();

void setup() {
  size(640, 480);
  
  
  //add some filenames to the list
  llist.insert("E1.jpg");
  llist.insert("E2.jpg");
  llist.insert("E3.jpg");
  
  bg = loadImage(llist.getNext());
  
  
}

void draw () {
  image (bg, 0,0);
  bg = loadImage(llist.getNext());
  delay(500);
}

Animated Shigeto (GIMP changed the JPEGs to indexed colour) at...

Mon, 29 Oct 2012 16:36:02 -0400

Animated Shigeto (GIMP changed the JPEGs to indexed colour) at TodaysArt.nl

http://soundcloud.com/shigeto

The excellent Roll the Dice at TodaysArt...

Mon, 29 Oct 2012 15:21:23 -0400

The excellent Roll the Dice at TodaysArt 2012.

http://soundcloud.com/roll-the-dice

This is another automatically uploaded file

Thu, 25 Oct 2012 10:56:41 -0400

This is another automatically uploaded file