# Lines don't draw when using custom "zooming" - can't see why

**URL:** <https://discourse.processing.org/t/lines-dont-draw-when-using-custom-zooming-cant-see-why/16051>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [December 2, 2019, 6:44pm UTC](https://discourse.processing.org/t/lines-dont-draw-when-using-custom-zooming-cant-see-why/16051 "2019-12-02T18:44:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![C-Level-Increment](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/c-level-increment/32/7359_2.png) [@C-Level-Increment](https://discourse.processing.org/u/C-Level-Increment)\
**Post date:** [December 2, 2019, 6:44pm UTC](https://discourse.processing.org/t/lines-dont-draw-when-using-custom-zooming-cant-see-why/16051/1 "2019-12-02T18:44:12Z")

</div>

Hey there,  
since this is my first post here I’ll quickly introduce myself:  
I am an material sciences engeneering student with a hobby level experience in some  
coding matters (like arduinos, tinkering with physics engines etc.). So far i have used C++, Java and very recently Python. I usually get around any problem through googling or trying out things long enough, but since i use processing more and more recently, why not finally join a forum. I beg for your understanding right upfront: Don’t expect sleek, nice looking codes by me, since i am a self educator and it’s a hobby. But i always like to listen to advice by people who are pros in coding and like to share their knowledge. That’s why i am now here.

Now to the topic:  
I’m trying to build a serial data grapher and i can already display data with it, so far, so good. GUI is not a thing yet, at the moment i’m trying out different approaches to scale/zoom into the canvas and the graph. For the graph itself i use PGraphics, since i’ve read it’s best for resetting shapes (or a very convenient way of doing it), the rest of the canvas is normal draw() code like “transform” etc.

It works as i expect it to, until i zoom in far enough, then i suddelny get only a half-drawn graph. My suggestion is, it has to do with transforming (“scaling”) the normal canvas and the PGraphics things (something is moving out of sight?), but i tinkered with different settings and operations and i think i do not well enough understand what is happening.

When you run the code, you should see a sine function developing. If you zoom in with mouse scroll/wheel, you can see the bottom half(ish) part of the graph not beeing drawn anymore. Can you spot what’s wrong? Thanks in advance.

```auto
  import processing.serial.*;

  PGraphics pg;

  Serial myPort; // The serial port
  int[] serialInArray = new int[1]; // Where we'll put what we receive
  int ts, txtsz; // textsize dynamic, static
  int serialCount = 0; // A count of how many bytes we receive
  int scroll=0; // X-scroll counter
  //int a; // new data
  //int temp; // old data
  float a; //debug only
  float temp; //debug only
  int scalX, scalY, maxdat; // dynamic scaling factors, maximum data size

void setup() {//SETUP-------------------------------------------------------------------------------------------------------
    
  size(1900, 1100);
  pg = createGraphics(width, height);

  String portName = Serial.list()[0];
  myPort = new Serial(this, portName, 115200);
  
  //initial setup
  scalX=1;
  scalY=4;
  scroll=width;
  maxdat=255; //originated from 8 bit serial data
  txtsz=5;
  
  ts=txtsz*scalY;
  
  textSize(ts);
  
}//SETUP END---------------------------------------------------------------------------------------------------------------

void draw() {//DRAW--------------------------------------------------------------------------------------------------------
    
//CANVAS-------------------------------------------------------------------------------------------------------------------

  background(0);
  
  //for dynamic changes:
  ts=txtsz*scalY;
  textSize(ts);
  //offset to middle of window:
  translate(0,(maxdat*2)-((scalY)*(maxdat/2)));

  for(int i=0; i<(scalY*maxdat); i=i+(10*scalY)){ //line generator every 10 steps
    stroke(100,50,50);
    line(0,i,width,i);
  }
  
  for(int i=0; i<maxdat; i=i+10){ //text needs different steps, non scaled increment
    text(i,0,(ts+(i*scalY)));
  }    
  
  stroke(200,0,0);
  
  line(0,0,width,0); //zero line
  text(0,0,(ts));
  line(0,scalY*(maxdat/2),width,scalY*(maxdat/2)); //middle line 
  text((maxdat/2),0,(ts+(scalY*(maxdat/2))));
  line(0,scalY*(maxdat),width,scalY*(maxdat)); //max line
  text((maxdat),0,(ts+(scalY*(maxdat))));

//DATA--------------------------------------------------------------------------------------------------------------------

  int inByte = myPort.read();
  // Add the latest byte from the serial port to array:
  serialInArray[serialCount] = inByte;
  serialCount++;

  if (serialCount > 0 ) {        
    //real signal:
    //a = -serialInArray[0];
    //println(a);
    
    //debug sine test signal:
    a = -(60*sin(millis()/100.0)+127);
        
    // Send something not -1 to request new sensor readings:
    myPort.write(1);
    // Reset serialCount:
    serialCount = 0;     
  }

//LINE DRAW & SCROLLING---------------------------------------------------------------------------------------------------

  pg.stroke(255);
 
  if (scroll<((width)/scalX)){ //adapt scrolling to scaling
    pg.beginDraw();
    //pg.translate(0,maxdat*scalY); 
    pg.line(scalX*scroll,-scalY*temp,scalX*(scroll+1),-scalY*a); //first point old pos; second point 1 scroll ahead, new pos
    pg.endDraw();
    scroll++;
  }
  else{
    pg.beginDraw(); 
    pg.clear(); //clear canvas when graph reaches right window border
    pg.endDraw();
    scroll=0;
  }
  image(pg,0,0);
  //make old pos out of current pos:
  temp = a;     
  
}//DRAW END----------------------------------------------------------------------------------------------------------------
  
void mouseWheel(MouseEvent event) { //ZOOM---------------------------------------------------------------------------------
   
   float e = event.getCount();
  
   if (e>0) {
     scalY++;
     scalX++;
     pg.beginDraw(); 
     pg.clear(); //reset graph after zooming operation
     pg.endDraw();
     scroll=0;
   }
   else if (e<0){
     scalY--;
     scalX--;
     pg.beginDraw(); 
     pg.clear();
     pg.endDraw();
     scroll=0;
   }
   //zoom range setting:
   if (scalY<1){
     scalY=1;
   }   
   if (scalX<1){
     scalX=1;
   }
   if (scalY>8){
     scalY=8;
   }   
   if (scalX>8){
     scalX=8;
   }
   
}//ZOOM END----------------------------------------------------------------------------------------------------------------
 

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 3, 2019, 12:28am UTC](https://discourse.processing.org/t/lines-dont-draw-when-using-custom-zooming-cant-see-why/16051/2 "2019-12-03T00:28:53Z")

</div>

Welcome to the community!

Try this:

```auto
pg = createGraphics(width, 2*height);

```

For this graph was able to go as low as:

```auto
pg = createGraphics(width, int(1.4*height));

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e1c6278dd76898e8c43a4144e55fe17fda20de81.png)

🙂

---

<div class="post-metadata">

**Author:** ![C-Level-Increment](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/c-level-increment/32/7359_2.png) [@C-Level-Increment](https://discourse.processing.org/u/C-Level-Increment)\
**Post date:** [December 3, 2019, 7:37pm UTC](https://discourse.processing.org/t/lines-dont-draw-when-using-custom-zooming-cant-see-why/16051/3 "2019-12-03T19:37:50Z")

</div>

Oh thanks, now it works! 💪