Tip for those interested in programming graphics

[shawnlau]

I've seen more than a few questions from people asking how to get started in programming graphics. The thing about programming graphics is not just knowing how to program, but knowing the structure and algorithms involved in computer graphics. You could be and expert in C++ but if you didn't know the algorithm to create a convolution matrix or how to create a median filter, you can't do those things. So expertise in a c or c derivative language is only one piece of the puzzle. Another piece is finding articles on image processing. I t was in that search that I found this beautiful site.

https://processing.org/

Simply it cuts to the chase. Whatever you want to experiment with graphically, it is so easy to do in this environment. The most tedious part of graphics programming is setting things up and monitoring events. This environment does it all for you and puts you in the main room to hack out your idea.

And its free. And the site is loaded with tutorials from beginning to advanced.

Check it out. I'm so happy I stumbled onto it.

[shawnlau]

Here's an example. I wanted to try a separable median filter algorithm from a book I am reading
and this is all the code it took. This runs under the Processing environment. Displays the image with the manipulations. Notice the lack of setup and the cut to the chase.

// separable 2-d median filter

PImage img;
PImage pass1;       // horizontal pass
PImage pass2;  // vertical pass

int dim =5; // dimension of filter - needs to be an odd number
void setup() {
  size(1024, 768);   // this is all hard coded because the idea is the filter not interface
  img = loadImage("c:/Lighthouse.jpg"); // windows 7 stock image moved to c:\ - use the unix form c:/
  pass1= createImage(img.width, img.height, RGB);
  pass2= createImage(img.width, img.height, RGB);
}

void draw() {
  float []red = new float[dim];
  float []green = new float[dim];
  float []blue =  new float[dim];
  float temp,mred,mgreen,mblue;
  loadPixels(); 
  // Since we are going to access the image's pixels too  
  img.loadPixels(); 
  for (int y = dim/2; y < height-dim/2; y++) {           //walk through all the y rows
    for (int x = dim/2; x < width-dim/2; x++) {          //walk through the  x columns
      int loc = x + y*width;
      int ip = 0;    //index of pixel array where values are stored
      for(int p = -(dim/2);p < dim/2;p++){ // this is the offset where pixels before and afer the x,y pixel are gathered
        int locp = p+ x + y*width;
        red[ip] = red(img.pixels[locp]); //put the red, green and blue compnents into their proper array
        green[ip] = green(img.pixels[locp]);
        blue[ip] = blue(img.pixels[locp]);
        ip++;
      }
      for(int i = 1; i <dim; i++){  // these for loops sort the red , blue and green 
                                    // array in order by value
          temp = red[i];
          int j = i-1;
          while(j >=0 && red[j]>temp){
              red[j+1]=red[j];
               j = j-1;
          }
          red[j+1]= temp;
        }
        mred = red[dim/2];  // once sorted, the middle index should hold the median value
              
              
      for(int i = 1; i < dim; i++){ // do this for green and blue
          temp = green[i];
          int j = i-1;
          while(j >=0 && green[j]>temp){
              green[j+1]=green[j];
               j = j-1;
          }
          green[j+1]= temp;
        }
        mgreen = green[dim/2];
        
      for(int i = 1; i <dim; i++){
          temp = blue[i];
          int j = i-1;
          while(j >=0 && blue[j]>temp){
              blue[j+1]=blue[j];
               j = j-1;
          }
          blue[j+1]= temp;
        }
        mblue = blue[dim/2];
        
  
      pass1.pixels[loc] =  color(mred,mgreen,mblue); //finally, paste the pixel value into our image that will hold
                                                      // the first pass
      }
  }


  
  for (int y = dim/2; y < height- dim/2; y++) {   // now do the same thing for the verticle direction
    for (int x = dim/2; x < width-dim/2; x++) {
      int loc = x + y*width;
      int ip = 0;
      for(int p = -2;p < dim/2;p++){
        int locp = x + (y+p)*width;   // this is the only different line, rest is cut and paste.
        red[ip] = red(pass1.pixels[locp]);
        green[ip] = green(pass1.pixels[locp]);
        blue[ip] = blue(pass1.pixels[locp]);
        ip++;
      }
      for(int i = 1; i <dim; i++){
          temp = red[i];
          int j = i-1;
          while(j >=0 && red[j]>temp){
              red[j+1]=red[j];
               j = j-1;
          }
          red[j+1]= temp;
        }
        mred = red[dim/2];
              
              
      for(int i = 1; i <dim; i++){
          temp = green[i];
          int j = i-1;
          while(j >=0 && green[j]>temp){
              green[j+1]=green[j];
               j = j-1;
          }
          green[j+1]= temp;
        }
        mgreen = green[dim/2];
        
      for(int i = 1; i <dim; i++){
          temp = blue[i];
          int j = i-1;
          while(j >=0 && blue[j]>temp){
              blue[j+1]=blue[j];
               j = j-1;
          }
          blue[j+1]= temp;
        }
        mblue = blue[dim/2];
        

      pass2.pixels[loc] =  color(mred,mgreen,mblue);  // I lied, this is different also        
    } 
  } 
  pass2.updatePixels();
  image(pass2,0,0); // display the separable 2d median filter
  
  // need more work as it leaves a border = to the filter size around image.
}

[shawnlau]

It got more interesting. You would need this to run it:

https://processing.org/

And I probably need to write a tutorial on why I think my program is important and unique.
But its in its infancy, and if you do Processing 2, check it out:

https://gist.github.com/shawnlau/57b98a4d10110a74a6ea