# Drew an Unwanted Circle on Screen

**URL:** <https://discourse.processing.org/t/drew-an-unwanted-circle-on-screen/9889>\
**Category:** Coding Questions\
**Created:** [April 2, 2019, 8:00pm UTC](https://discourse.processing.org/t/drew-an-unwanted-circle-on-screen/9889 "2019-04-02T20:00:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirstee\_baxt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kirstee_baxt/32/4377_2.png) [@kirstee\_baxt](https://discourse.processing.org/u/kirstee_baxt)\
**Post date:** [April 2, 2019, 8:00pm UTC](https://discourse.processing.org/t/drew-an-unwanted-circle-on-screen/9889/1 "2019-04-02T20:00:24Z")

</div>

Hello! Writing some code based here, and for some reason it is generating an outlined coral colored circle. I believe this is coming from the line graph I drew (in the first begin shape) but not sure where in the code I went wrong. If it’s not blatantly obvious, I can attach data as well. Thanks in advance!!

PS this may be messy as I am just a beginner! 😄

```auto
Table myData = loadTable("screendata-small.csv", "header");
int numEntries = myData.getRowCount();
float screentime;
float day;
float pickups;
float notif;

size(800, 800);
background(#272932);

beginShape();
for (int i = 0; i < numEntries; i++) {
  screentime = myData.getRow(i).getFloat("Screen Time Decimal");
  println("Screen Time:", screentime);
  
  day = myData.getRow(i).getFloat("Day #");
  println("Day", day);
  
  day = map(day, 0, 8, 0, width);
  screentime = map(screentime, 0, 3, height, 0);
  
  float xCoord = day;
  float yCoord = screentime;
  
  vertex(xCoord, yCoord);
  noFill();
  stroke(#F05D5E);
}
endShape();

beginShape();
for (int i = 0; i < numEntries; i++) {
  pickups = myData.getRow(i).getFloat("Pickups");
  
  day = myData.getRow(i).getFloat("Day #");
  
  day = map(day, 0, 8, 0, width);
  pickups = map(pickups, 0, 80, (height-300), 0);
  
  float pickupsradius = myData.getRow(i).getFloat("Pickups");
  float xCoord = day;
  float yCoord = pickups;
  
  ellipse(xCoord, yCoord, pickupsradius, pickupsradius);
  fill(#6564DB,80);
  stroke(#6564DB);
}
endShape();

beginShape();
for (int i = 0; i < numEntries; i++) {
  notif = myData.getRow(i).getFloat("Notifications");
  
  day = myData.getRow(i).getFloat("Day #");
  
  day = map(day, 0, 8, 0, width);
  notif = map(notif, 30, 400, (height-300), 0);
  
  float notifradius = myData.getRow(i).getFloat("Notifications");
  float xCoord = day;
  float yCoord = notif;
  
  ellipse(xCoord, yCoord, notifradius, notifradius);
  fill(#7D387D,80);
  stroke(#7D387D);
}
endShape();

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 2, 2019, 9:44pm UTC](https://discourse.processing.org/t/drew-an-unwanted-circle-on-screen/9889/2 "2019-04-02T21:44:35Z")

</div>

you don’t use setup and draw atm, but are in static mode. You should go to write a Interactive program sooner or later.

see Hello mouse here:

[https://www.processing.org/tutorials/overview/](https://www.processing.org/tutorials/overview/)

the circle you are observing:

these lines

```auto
  fill(#6564DB, 80);
  stroke(#6564DB);

```

must be BEFORE ellipse to take effect

Because they are after the ellipse, the first ellipse you see in the 1st sections will be empty

and some colors are off

also: the ellipse command refers to the center of the corner

so these lines

`day = map(day, 0, 8, 0, width);`

should better be

`day = map(day, 0, 8, 20, width);`

so that we see the ellipse some 20 pixels right from the left screen side

Regards, Chrisir

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 2, 2019, 9:45pm UTC](https://discourse.processing.org/t/drew-an-unwanted-circle-on-screen/9889/3 "2019-04-02T21:45:21Z")

</div>

```auto

Table myData ;
int numEntries ;

float screentime;
float day;
float pickups;
float notif;

void setup() {
  size(800, 800);
  background(#272932);

  myData = loadTable("screendata-small.csv", "header");
  numEntries = myData.getRowCount();
}

void draw() {

  beginShape();

  noFill();
  stroke(#F05D5E);

  for (int i = 0; i < numEntries; i++) {

    screentime = myData.getRow(i).getFloat("Screen Time Decimal");
    println("Screen Time:", screentime);

    day = myData.getRow(i).getFloat("Day #");
    println("Day", day);

    day = map(day, 0, 8, 120, width);
    screentime = map(screentime, 0, 3, height, 0);

    float xCoord = day;
    float yCoord = screentime;

    vertex(xCoord, yCoord);
  }
  endShape();

  // -----------------------------------------

  fill(#6564DB, 80);
  stroke(#6564DB);

  beginShape();

  for (int i = 0; i < numEntries; i++) {
    pickups = myData.getRow(i).getFloat("Pickups");

    day = myData.getRow(i).getFloat("Day #");

    day = map(day, 0, 8, 20, width);
    pickups = map(pickups, 0, 80, (height-300), 0);

    float pickupsradius = myData.getRow(i).getFloat("Pickups");
    float xCoord = day;
    float yCoord = pickups;

    ellipse(xCoord, yCoord, pickupsradius, pickupsradius);
  }
  endShape();

  // -----------------------------------------

  fill(#7D387D, 80);
  stroke(#7D387D);

  beginShape();
  for (int i = 0; i < numEntries; i++) {
    notif = myData.getRow(i).getFloat("Notifications");

    day = myData.getRow(i).getFloat("Day #");

    day = map(day, 0, 8, 20, width);
    notif = map(notif, 30, 400, (height-300), 0);

    float notifradius = myData.getRow(i).getFloat("Notifications");
    float xCoord = day;
    float yCoord = notif;

    ellipse(xCoord, yCoord, notifradius, notifradius);
  }
  endShape();
  //
}//end of draw() 
//

```