This is part 11 of an N part series detailing how I make . my animations Prev Next So you’ve made a but how do you show it off? data visualisation To do that we need to output the to some sort of video file and then find some site willing to host it. animation I found Processing’s default video creation somewhat underwhelming so I used a slightly more tricky but far superior technique. You will need to download two things, a video creation tool called and a library that plugs into which uses that called . ffmpeg Processing Video Export First download from f . I use windows so merely unzip it somewhere (I have a folder called for such things where I unzipped it and renamed the folder to . Put into the user path — I use for this — and you’re good to go). ffmpeg fmpeg.org c:\tools\ ffmpeg c:\tools\ffmpeg\bin eveditor.com Now install by running and open the by going to the menu. Select the tab and search for . Click install and you’re done. There’s more info on . Video Export Processing Contribution Manager Tools/Add Tool... Libraries Video Export funprogramming.org To use you first need to import it into your sketch so add these lines to the top of the file: Video Export import com.hamoid.*;VideoExport videoExport; is the github user id of the developer (check out his ) so I guess he named all the libraries with that as a prefix. The second line defines a variable called of the type . Looks confusing until you get used to it. hamoid github account videoExport VideoExport Next thing we need to do is tell about our sketch so in add the following: Video Export setup() videoExport = new VideoExport(this);videoExport.setFrameRate(30);videoExport.startMovie(); creates an instance of the type providing the current sketch denoted by so that it can access the frames. new VideoExport(this); VideoExport this We are now ready to save individual frames to the video so at the end of add: draw() videoExport.saveFrame(); It is important to execute when the animation finishes as the video file may get corrupted, if the video doesn’t play then check that this command is executed. videoExport.endMovie() This creates a video file called in your sketch folder which you can play in your favorite video player. processing-movie.mp4 On your first run of a sketch using a window will show asking for where you installed Video Export ffmpeg. Check the end of the post to see the full source code of the Keeling animation including the commands. Video Export So now how do you create a gif? By using of course! ffmpeg You can simply open a dos prompt¹ or terminal and execute: ffmpeg -i processing-movie.mp4 processing-movie.gif This will work most of the time but if you create a video with more than 256 colours you’ll find the quality drops considerably in which case things get a tad more tricky. In this case you need to execute two commands. First is to find out all the colours used in your video and then create the gif using that palette by using these two commands: ffmpeg ffmpeg -i processing-movie.mp4 -vf "palettegen" -y palette.pngffmpeg -i processing-movie.mp4 -i palette.png -lavfi "fps=50,paletteuse" -y out.gif For the full gory details read . I turned the above into a batch script file called : pkh’s blog makegif.bat ffmpeg -i %1 -vf "palettegen" -y palette.pngffmpeg -i %1 -i palette.png -lavfi "fps=50,paletteuse" -y out.gif Simply executed by and it creates a gif called . makegif processing-movie.mp4 out.gif Now we have an and a file! What do we do with it? We need to host it somewhere so it can be shared. So here are your options: mp4 gif : Simply attach your file to a tweet. If it’s longer than a certain amount a trimming dialog appears but if you move the start and stop indicators to the beginning and end of the video twitter will happily host it. Twitter mp4 : Upload and go, can add music from YouTube’s free music library, which is nice. YouTube Simply attach your to a post. FaceBook: mp4 (Pronounced “imager” apparently) is a perfect place to host gifs so you can then post to sites like ², add the link to emails or perhaps write stories on some site called medium.com. I find that sharing with the imgur community is highly worthwhile too. When hosting there you can either link to the gif directly or to a faster loading simply by adding a to the end of the URL. imgur.com : reddit.com gifv v Here’s the complete source code of the Keeling animation using : Video Export import com.hamoid.*;VideoExport videoExport; 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, 530, "_change", 6, Ani.EXPO_IN); videoExport = new VideoExport(this);videoExport.setFrameRate(30);videoExport.startMovie();} float yScale = 20.0; boolean _coda = false;int _codaCount = 0; float _change = 1.0;final int MARGIN = 60;final float CO2MIN = 313.04; void draw(){if(_change >= 6.0){if(!_coda){_coda = true;_codaCount = frameCount;}if(frameCount - _codaCount > 120){videoExport.endMovie();exit();}videoExport.saveFrame();return;} background(0);strokeWeight(1); line(MARGIN, 0, MARGIN, height);line(0, height - MARGIN, width, height - MARGIN); drawGraph(MARGIN, height - MARGIN, width - MARGIN, height - MARGIN);videoExport.saveFrame();} void drawGraph(int xPos, int yPos, int graphWidth, int graphHeight){text("Atmospheric CO₂ concentration 1958 - 2017\nR. F. Keeling, S. J. Walker, S. C. Piper and A. F. Bollenbacher\nMauna Loa, Observatory, Hawaii", MARGIN + graphWidth / 2.0, MARGIN);int deltaX = int(frameCount * _change); float xScale = 1.0; int xAxisMaximum = graphWidth; if(deltaX > graphWidth){xAxisMaximum = deltaX;xScale = float(graphWidth) / float(deltaX);} text("Year", MARGIN + graphWidth / 2, height - 20);drawXAxis(xAxisMaximum, xScale); strokeWeight(3); float co2Max = 0.0; 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()); if(co2 > co2Max) co2Max = co2; float x = dataIndex; float y = (co2 - CO2MIN); if(y \* yScale > graphHeight) { yScale = float(graphHeight)/y; } point(xPos + x \* xScale, yPos - (y \* yScale)); } } if((co2Max - CO2MIN) * yScale < graphHeight)co2Max = graphHeight / yScale + CO2MIN; pushMatrix();translate(0, graphWidth / 2);rotate(-PI / 2.0);text("CO₂ concentration (PPM)", 0, 20);popMatrix(); drawYAxis(co2Max, yScale);} void drawYAxis(float co2Max, float yScale){float co2Tick = 320.0;strokeWeight(1); while(co2Tick <= co2Max){float yAxisTickPos = height - MARGIN - (co2Tick - CO2MIN) * yScale; line(MARGIN, yAxisTickPos, MARGIN - 5.0, yAxisTickPos); text(int(co2Tick), MARGIN - 15, yAxisTickPos+3); co2Tick += 10.0; }} void drawXAxis(int xAxisMaximum, float xScale){int yPos = height - MARGIN;float xAxisTick = 279.0 / 7.0;int axisYear = 1959; 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); }} To thank you for getting this far here’s a dog wanting more peanut butter ( ): source Yes, this is blatant click-bait. ¹ Tip for windows users is to open Windows Explorer to the location you want, press and replace the contents of the text box with and press enter. This opens a dos prompt for this directory. F4 cmd ² Best places on reddit.com are , , and . r/dataisbeautiful r/visualization r/climate
![10 Best Anime Websites to Stream & Download [Free + Paid]](https://hackernoon.imgix.net/images/TggSxk7kWsMlczkuVtR0LstDzEG3-1993oxm.jpeg?auto=format&fit=max&w=3840)
