This is part 8 of an N part series detailing how I make . my animations Prev Next We don’t want to bore our audience with a long slow so let’s speed things up a bit. Currently we are drawing one dot per frame so the simplest way to go is multiple dots per frame by creating a variable called, say, and setting it to five times the frame count: animation deltaX int deltaX = frameCount * 5; Then replace all references of to resulting in: frameCount deltaX Just like that. Here’s the whole 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 = 20.0; void draw(){background(0);float xScale = 1.0; int deltaX = frameCount * 5; if(deltaX > width){xScale = float(width) / float(deltaX);} for(int dataIndex = 1; dataIndex <= deltaX; 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); }} But, I feel it’s too fast at the start yet not fast enough at the end. This means we should vary the during the animation. One approach would be to use the to vary the rate but this gets complicated very quickly. rate frameCount This sort of thing is very common in animations and conveniently clever types have made libraries that simplify this. These libraries are called “easing libraries” and we will be using one called written by Benedikt Groß. Ani To install go to Processing’s menu and select In the Libraries tab search for and click install. Ani Tools Add Tool... Ani What this library does is to change the value of a particular variable over the course of an animation using a chosen algorithm. We would like to change the speed of the animation from slow to fast in a steady fashion. To do this we replace the constant value in the code above with a variable. I’m calling this variable and setting its initial value to . 5 _change 1.0 float _change = 1.0; void draw(){int deltaX = int(frameCount * _change); Clearly this doesn’t do much by itself. Now let’s activate . First we import it: Ani import de.looksgood.ani.*;Ani _ani; is the variable that will be containing the object. _ani Ani Then we set it up in : setup() Ani.init(this);Ani.setDefaultTimeMode(Ani.FRAMES);_ani = new Ani(this, 1032, "_change", 3.0, Ani.EXPO_IN); is a reference to our Keeling animation letting the library know where to find things. By default the TimeMode is based on seconds but I find it to be more accurate to use frames as we can be dealing with many thousands of data points and each frame can take a while to render. this Ani So the meat and potatoes of the library is contained in the line: Ani _ani = new Ani(this, 1032, "_change", 3.0, Ani.EXPO_IN); What this is saying is over 1,032 frames¹ modify the value in the variable to end up with the value 3 exponentially. Remember we defined to start with the value above so this slowly increases this value until it reaches after 1,032 frames. _change _change 1.0 3.0 The full documentation is available . here Running this we get: As you can see it starts of nice, slow and easy then rapidly increases in speed. Here is the full code: import java.time.*;import de.looksgood.ani.*;Ani _ani; FloatDict _data = new FloatDict();LocalDate _startDate = LocalDate.of(1958, 3, 29); void setup(){loadData();size(500,500);background(0);stroke(255,255,0);frameRate(30); Ani.init(this);Ani.setDefaultTimeMode(Ani.FRAMES);_ani = new Ani(this, 1032, "_change", 3.0, Ani.EXPO_IN);} float yScale = 20.0;float _change = 1.0; void draw(){int deltaX = int(frameCount * _change); background(0);float xScale = 1.0; if(deltaX > width){xScale = float(width) / float(deltaX);} for(int dataIndex = 1; dataIndex <= deltaX; 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); }} Next week we’ll be adding text and a bit of polish! ¹ I came up with 1,032 through trial and error. I’m sure there was a way of calculating it but life’s too short. is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising & sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories
![10 Best Anime Websites to Stream & Download [Free + Paid]](https://hackernoon.imgix.net/images/TggSxk7kWsMlczkuVtR0LstDzEG3-1993oxm.jpeg?auto=format&fit=max&w=3840)
