Using processing to render knobs version 2.

by

Yeah, I got a new version, this is the one I’m really using for my plugins, it does not use any premade images or stuff. Just pure processing.org power.



If you wanna have it here’s the source

//Large image to hold all our frames
PImage GRANDE;

//the start and stop angles of the knob
float StartAngle = 40;
float StopAngle = 360-StartAngle;

//how many frames we want, remember that if you are using this for a VST-GUI you're limiting the resolution of the
//parameter by settig this to something low
float NumberOfFrames = 20;

//working variables
float myFrameCount =0;
int grandecounter =0;
float angle = StartAngle;

//how much rotation we should do between each frame
float delta = (StopAngle-StartAngle)/(NumberOfFrames-1);

//larger circle's variables
int largeCircleGrow = 15;
float largecircleDelta =  largeCircleGrow / (NumberOfFrames-1);
float largeCircleSize=1;

PGraphics handleBuffer; // a buffer we use to draw the handle in

void drawHandleBuffer()
{
  handleBuffer.beginDraw();	     // start drawing the objects
  handleBuffer.background(255, 0);  // on a transparent background
  handleBuffer.smooth();           //antialiasing ftw!
  handleBuffer.strokeWeight(5); //nice and fat
  handleBuffer.ellipse(width/2, width-25, 10, 10); //middle lower part is where we want the original handle
  handleBuffer.endDraw();
}

void setup()
{
  //setting the size of the window to the same size as our background image
  size(120,120);  

  //creating a large image to keep all our frames
  GRANDE = createImage(width, (int)(height*NumberOfFrames), ARGB);
  handleBuffer = createGraphics(width,height, P3D);

  drawHandleBuffer(); // drawing our handle in a buffer

}

void draw()
{ 

  //conversion of the angle to radians, since the rotate function wants that
  float radang=radians(angle);
  smooth();

  //painting the background image
  //  image(bg, (width/2)-(bg.width/2) ,(height/2)-(bg.height/2));
  background(255, 0);

  noFill();
  stroke(0, 0, 0); //black is default
  strokeWeight(largeCircleSize);  //whit changing the size of the larger circle we can indicate in one more way that we have a large value
  ellipse(width/2, width/2, width-(largeCircleGrow+5), height-(largeCircleGrow+5)); 

  largeCircleSize+=largecircleDelta;

  pushMatrix(); //cant really explain this on one line, has to do with how you draw in the cordinate system.
  translate(width/2, height/2); //sets everything we draw to be centerd
  rotate(radang); //rotates our stuff
  image(handleBuffer, -handleBuffer.width/2 ,-handleBuffer.height/2);//drawing the handle
  popMatrix(); //se above comment on pushMatrix

    angle = angle + delta; // increasing the angle

  if(  myFrameCount >= NumberOfFrames)
    delta =0;

  myFrameCount++;
  if(delta==0) //if we are done we set delta to 0 to be able to call noLoop and stop executing
  {
    GRANDE.save("0000000aaaaaaaaa.png"  ); //saving the frames we've collected to a png file
    //this will not take place until next loop, so we will have one visible
    //frame more then we want, this is not saved though, so no worries
    noLoop();
  }
 else if(delta!=0)
 {
 for (int lw=0;lw<width;lw++)
 {
 for (int lh=0;lh<height;lh++)
 {
 GRANDE.pixels[grandecounter]= this.get(lh,lw); //here we get the pixels in the current frame and adds them to our GRANDE pixelbuffer
 grandecounter++;
 }
 }
 }

}

Should have found this before though, and if I was on win32

Leave a Reply