This is part 7 of an N part series detailing how I make . my animations Prev Next Now we have reached the limits of what we can display in our 500x500 so we will need to change the to fit the plot for the full 58 years of data. animation scale So once x is greater than 500 we can start reducing the x scale along with the y. Let’s do that: float xScale = 1.0;  
float yScale = 40.0;  
  
if(frameCount > width)  
{  
  xScale = float(width) / float(frameCount);  
}  
  
float x = frameCount \* xScale;  
float y = (co2 - 313.04) \* yScale;  
  
ellipse(x, height - y, 1, 1); What’s with the ? Because and are integers when you divide them the result is an integer. Unfortunately 500/501 as an integer results in 0, not 0.998 so we have to convert the integer values into floats. You’ll also note that when I am using a constant value, like I include the decimal point, this causes the computer to do floating point arithmetic and not integer arithmetic. For example the result of 1/10 would equal 0 while the result of 1.0/10.0 would be 0.1 as expected. Be aware that 1.0/10 would also result in 0! float() width framcCount 40.0 Huh? Oh, I forgot to clear the frame for each draw! Simply add to the first line of . Now we get: background(0); draw() Lovely. Now let’s do the same to the y axis. This’ll be a tad different as the y value doesn’t increase linearly so we’ll keep a running maximum value and scale according to that. As we already multiply our y-axis by 40 already it naturally leads to us setting: float yScale = 40.0; Place that line just before the definition so that is remembered between executions. void draw() yScale draw() Now each time we calculate a new y value we need to check if this exceeds the previous value, if so then calculate the new : height yScale if(y * yScale > height){yScale = float(height)/y;} Resulting in: Here’s the entire code: import java.time.*; FloatDict _data = new FloatDict();LocalDate _startDate = LocalDate.of(1958, 3, 29); void setup(){loadData();size(500,500);background(0);stroke(255,255,0);} float yScale = 40.0; void draw(){background(0);float xScale = 1.0; if(frameCount > width){xScale = float(width) / float(frameCount);} for(int dataIndex = 1; dataIndex <= frameCount; dataIndex++){int daysFromStart = (dataIndex - 1) * 7;LocalDate frameDate = _startDate.plusDays(daysFromStart); if(\_data.hasKey(frameDate.toString()))  
{  
  float co2 = \_data.get(frameDate.toString());  
          
  float x = dataIndex;  
  float y = (co2 - 313.04) ;  
    
  if(y \* yScale > height)   
  {  
    yScale = float(height)/y;  
  }  
    
  ellipse(x \* xScale, height - (y \* yScale), 1, 1);  
} }} void loadData(){String[] lines = loadStrings("weekly_in_situ_co2_mlo.csv"); for (String line : lines){if( line.startsWith("\"") ) continue; String\[\] values = split(line, ',');  
String date = values\[0\];  
float co2 = parseFloat(values\[1\]);  
\_data.set(date, co2); }} Join me next week when we play with speed and add some text and axis and stuff… Edit: When I first published this I had a more complicated way of calculating , this is now simpler. yScale

Different

Keep

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Change your scales

Too Long; Didn't Read

Companies Mentioned

Kevin Pluck

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Change your scales

Too Long; Didn't Read

Companies Mentioned

Kevin Pluck

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES