This is part 9 of an N part series detailing how I make . my animations Prev Next I have discovered that there is a in to plot a point instead of drawing a small ellipse like I have done! I had looked to see how Processing sets pixels which it does with the command but the pixels were too small. Processing also has a command which I disregarded as it looked the same. The difference is that plots a circle using as the size! command Processing [set()](https://processing.org/reference/set_.html) [point()](https://processing.org/reference/point_.html) point() strokeWeight() strokeWeight(10);stroke(255,255,0);point(50,50); Produces: Woohoo, now back to our regularly scheduled program… My maths teacher drummed into my head “always label your axes” so let’s do that along with the actual axes themselves. Oh, but our scale is continuously changing. This makes it trickier but not impossible… First we had better make some room for them, currently our plot is shown hard up against the edges of the window. I was going to just create a variable and then simply add it to the and values but that turned out to be trickier than I thought as I then had to modify the scale algorithms in a non intuitive manner (what actually happened is that I failed to scale it correctly at all and gave up in disgust). margin x y So a far simpler way is to pull out the code into a function and pass in the new position and the width and height. Sounds like a lot of work but it isn’t. First rename the function to . Create a new function and put in the body like so: draw() drawGraph() draw() drawGraph(); void draw(){drawGraph();} void drawGraph(){...} Now add , , , integers to . xPos yPos graphWidth graphHeight drawGraph() void drawGraph(int xPos, int yPos, int graphWidth, int graphHeight) I think that a margin of 60 pixels is a good starting point. So let’s make a global constant with that value. Add this line just before : draw() final int MARGIN = 60; Marking something as means it cannot be modified and by convention these variables are named using all caps. final Now all we do is to call from with the following: drawGraph() draw() drawGraph(MARGIN, height - MARGIN, width - MARGIN, height - MARGIN); So let’s start using those values in : drawGraph() First replace all uses of and with and respectively. width height graphWidth graphHeight Then replace the function with the newly discovered function: ellipse() point() point(xPos + x * xScale, yPos - (y * yScale)); And you’re done. Drawing with also seems a lot faster! Oh yeah, add to otherwise your points will be 1 pixel in size. point() strokeWeight(3) setup() Ok, let’s draw some axes. Simple lines from top to bottom using so in the function: MARGIN draw() line(MARGIN, 0, MARGIN, height);line(0, height - MARGIN, width, height - MARGIN); Hmm, that didn’t work first time for me. This was due to leaving in the function which was clearing the drawn lines. Move that to the first line of and it will all work. background(0) drawGraph() draw() Result should look like this: The line thickness is inherited from the command in . So let’s move that to the first line of and add to the first line of . That will make a thin line for the axes and heavy points for the graph. strokeWeight setup() drawGraph() strokeWeight(1) draw() So now we need to add tick marks. As the tick marks need to be scaled to the same as the graph then they’ll need to be drawn from inside the function. Let’s do the x axis first by marking each year. drawGraph() Yikes. This isn’t as easy as I thought it would be. Because each data point is recorded on a Saturday and we are simply multiplying our by 7 to get the number of days from the start date to find the date to get the data it makes working out the tick marks non trivial. dataIndex After a fair bit of experimentation I was able to reduce the complexity to the following function: void drawXAxis(int xAxisMaximum, float xScale){int yPos = height - MARGIN;float xAxisTick = 279.0 / 7.0;int axisYear = 1958; while(xAxisTick <= xAxisMaximum){int tickLength = 5;int xPos = MARGIN + int(xAxisTick * xScale); if(axisYear % 5 == 0) { text(axisYear, xPos, yPos + 22); tickLength = 10; } line(xPos, yPos, xPos, yPos + tickLength); xAxisTick += 365.25 / 7.0; axisYear++; }} Where the starts off as the width of the plot and then as the scale increases the scaled max x value. The initial value of the is the number of days left in the year after 29/3/1958 (279) converted to weeks by dividing by 7. xAxisMaximum xAxisTick Here I am introducing a loop. This type of loop keeps executing while the contents of the parenthesis is true. In this case while the current position of the tick is less than the maximum x value on the axis. while The line makes use of the modulus operator to make a longer tick mark and display the year every fifth year. We then simply draw a line for the tick followed by incrementing the tick position by the average number of weeks in a year. if(axisYear % 5 == 0) % This results in: Which I’m rather pleased with. Here’s the complete 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);textAlign(CENTER); Ani.init(this);Ani.setDefaultTimeMode(Ani.FRAMES);_ani = new Ani(this, 1032, "_change", 3, Ani.EXPO_IN);} float yScale = 20.0; boolean _coda = false;int _codaCount = 0; float _change = 1.0;final int MARGIN = 60; void draw(){background(0);strokeWeight(1); line(MARGIN, 0, MARGIN, height);line(0, height - MARGIN, width, height - MARGIN); drawGraph(MARGIN, height - MARGIN, width - MARGIN, height - MARGIN);} void drawGraph(int xPos, int yPos, int graphWidth, int graphHeight){int deltaX = int(frameCount * _change); float xScale = 1.0; int xAxisMaximum = graphWidth; if(deltaX > graphWidth){xAxisMaximum = deltaX;xScale = float(graphWidth) / float(deltaX);} drawXAxis(xAxisMaximum, xScale); strokeWeight(3); 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 > graphHeight) { yScale = float(graphHeight)/y; } point(xPos + x \* xScale, yPos - (y \* yScale)); } }} void drawXAxis(int xAxisMaximum, float xScale){int yPos = height - MARGIN;float xAxisTick = 279.0 / 7.0;int axisYear = 1958; while(xAxisTick <= xAxisMaximum){int tickLength = 5;int xPos = MARGIN + int(xAxisTick * xScale); if(axisYear % 5 == 0) { text(axisYear, xPos, yPos + 22); tickLength = 10; } line(xPos, yPos, xPos, yPos + tickLength); xAxisTick += 365.25 / 7.0; axisYear++; }} 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); }} That was a whole lot more complicated than I was expecting. I intended this post to cover both the x and y axis along with titles etc! I guess that’ll be next week then…
