Drew an Unwanted Circle on Screen

Processing Coding Questions
1

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! :smile:

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();
1 Like
2

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/

the circle you are observing:

these lines

  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

1 Like
3 


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() 
//
1 Like