Real time graph plotting using Processing - graph

Question

I have to plot a graph in processing by the feedback from encoder motors of the bot. so I have two variables basically left motor encoder and right motor encoder. I planned to vary on in x-axis and another in y-axis. While I went through some of the code on internet I found that, almost everyone has written the graph part code in serial event itself?
So my first doubt is why do they write it in serial event() function rather than void draw()? Another thing is when I tried to write my code for graph in void draw() it had a pseudo code something like this:
xpos1=0,ypos1=height;
void draw():
line(xpos1,ypos1,xpos,height-ypos);// obviously the data(xpos,ypos) is mapped with the width and height of the processing ide window.
xpos1=xpos;
ypos1=height-ypos;
if(xpos1>=width)
{
xpos1=0;
}
if(ypos1>=height)
{
ypos1=0;
}
So I get to see only a small dot traversing on processing ide window and I cannot see the older path that my line has travelled which in the case of the sites which I described when wrote the similar piece of code in serial event() they had a whole graph getting made on the processing window.
Where am I getting wrong? Also is there any alternative to plot the graph using void draw()? I want to vary both xpos as well as ypos as i get two feedbacks form left motor and right motor.
Screenshot of my attempted graph in different frames!
Image
Screenshot of one of the graphs made by somewhat the similar code displayed above but written in the serial event() available on the internet:

Answer 1

As stated in the comments, there are too many subquestions here.
Regarding the question relative to the code, there is one main line that is making the code much more complex than it has to be. You are trying to draw a line between each and every couple of numbers received by the two encoders. There is no need to do that. When plotting a graph, I personally use the point(x,y) function. It's much easier to implement for prototyping purposes, and adjusting the frameRate() at which the sketch is running, you won't notice the difference.
void draw() {
point(encoder1, encoder2);
if (encoder1 >= width) {
encoder1 = encoder1 - width;
}
if (encoder2 >= height) {
encoder2 = encoder2 - height;
}
}
A simple sketch like this one will do the job.
The other thing that is not quite clear is the initialisation of the variables. Usually you initialise a variable if it's continuously increasing, like time, but from your description you want to plot on the X axis one encoder, and on the Y axis the other encoder. So wouldn't it be better to map the values to start with in order not to have them go out of the canvas range?
Please edit the question so that the code is clear and concise, following these guidelines, and try to ask one question per post.