I'm currently building an interface that allows a user to draw a waveform into a box in realtime which will be used MAX/Msp over Osc to generate sound. I've got the waveform drawing bit working more or less how I want, but I'd like to make it look much prettier than it does (which is the whole point of using Processing rather than just the standard Max interface!). At the moment the waveform edge is covered with jaggies, and I want it to be antialiased so it looks smoother. I'm no graphics programmer and I'm slightly at a loss as to how to achieve this.

At the moment I'm drawing the curve using a quad for each position of the waveform which gives some antialiasing from the smooth() function, but, since there are so many data points it's still very jaggy; I'm sure there must be a better way to do it (line 22 2nd tab). I need to store the data for the waveform in the array in this way as this is the format I need for the audio, but it could be displayed in any way. The important thing is that the waveform display changes in realtime.

Any suggestions are welcome - I'm new to Processing so I may well be missing something really obvious!

Code posted below - I've removed a lot of extraneous stuff to keep it clear.

Many thanks,

Tim

Main:

2. //Opens a wave drawing window that interfaces with a MAX buffer over OSC
3.   
4.   //general variables
5.   int drawWidth;
6.   int drawHeight;
7.   WaveBox[] waves = new WaveBox[1];
8.   
9.   void setup ()
10.   {
11.     size(480, 240, P2D);
12.     drawWidth = 440;
13.     drawHeight = 200;
14.     strokeWeight(1);
15.     fill(255);
16.     smooth();
17.     waves[0] = new WaveBox(20,20,drawWidth, drawHeight);
18.   }
19.   
20.   void draw()
21.   {
22.     background(255, 250, 229);
23.     waves[0].drawWave();
24.   }
25.   
26.   void mousePressed()
27.   {
28.     waves[0].writeMouse(false);
29.   }
30.   
31.   void mouseDragged()
32.   {
33.     waves[0].writeMouse(true);
34.   }
35.   
36.   void mouseReleased()
37.   {
38.     waves[0].mouseEnd();
39.   }

WaveBox tab:

2. public class WaveBox {
3.   private int x, y, bHeight, bWidth;
4.   private float[] wave = new float[441];
5.   private boolean inBounds = false;
6.   
7.   WaveBox(int xPos,int yPos,int boxWidth,int boxHeight){
8.     x = xPos;
9.     y = yPos;
10.     bHeight = boxHeight;
11.     bWidth = boxWidth;
12.   }
13.   
14.   public void drawWave (){    
15.     rect(x, y, bWidth, bHeight);    
16.     pushMatrix();
17.     translate(x, y + (bHeight/2));
18.     line(0, 0, bWidth, 0);
19.     fill(0);
20.     
21.     //draw quad for each wave position to use antialiasing
22.     for (int i=0;i<440;i++){
23.       quad(i, (wave[i]*(bHeight/2)), i, 0, i+1, 0, i+1, (wave[i+1]*(bHeight/2)));
24.     }
25.     popMatrix();
26.     fill(255);
27.   }
28. 
    
29.   public void writeMouse(boolean drag)
30.   {
31.     int mouseDiff;
32.     int absMouseDiff;
33.     float mouseValDiff;
34.     int inc, count = 0;
35.     int adjMouseX, adjPMouseX, adjMouseY, adjPMouseY;
36.     float yVal;
37. 
    
38.     adjMouseX = mouseX - x;
39.     adjPMouseX = pmouseX - x;
40.     adjMouseY = mouseY - y;
41.     adjPMouseY = pmouseY - y; 
42.     
43.     //if it is mousepress then write value if within bounds
44.     if ((drag == false) && (withinBounds(mouseX, mouseY))){      
45.       inBounds = true;
46.       yVal = float((adjMouseY)-(drawHeight/2))/(drawHeight/2);
47.       wave[adjMouseX] = yVal;
48.       
49.       //if it is a mousedrag then write however many values are needed
50.     } else if ((drag) && (adjPMouseX != adjMouseX) && (inBounds)){
51.       
52.       //calc whether mouse has moved more then one pixel
53.       mouseDiff = adjMouseX - adjPMouseX;
54.       absMouseDiff = abs(mouseDiff);
55.     
56.       //determines whether the increment value is positive or negative
57.       //i.e. whether the mouse is moving right or left
58.       inc = mouseDiff / absMouseDiff;    
59.       mouseValDiff = float(adjMouseY - adjPMouseY) / absMouseDiff;
60.       
61.       // loop through each position between the two mouse positions and
62.       //interpolate values between them so every pixel has a value
63.       while(count != mouseDiff){
64.         count = count + inc;
65.         if (((adjPMouseX + count) >= 0) && ((adjPMouseX + count) < (drawWidth))){
66.           yVal = ((adjPMouseY + (mouseValDiff * abs(count))-(drawHeight/2))/(drawHeight/2));
67. 
    
68.           //limit values between -1 and 1          
69.           if (yVal > 1){
70.             yVal = 1;
71.           } else if (yVal< -1) {
72.             yVal = -1;
73.           }
74.           
75.           wave[adjPMouseX + count] = yVal;        
76.         }
77.       }      
78.     }
79.    wave[440] = wave[439]; 
80.   }
81.   
82.   public void mouseEnd(){
83.    inBounds = false;
84.   } 
85.   
86.   //test if mouse position is within the box
87.   private boolean withinBounds(int posX, int posY){
88.     if ((posX >= x) && (posX < (x + bWidth)) && (posY >= y) && (posY < (y + bHeight))){
89.       return true;
90.     } else {
91.       return false;
92.     }
93.   }  
94. }