| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>2D Picking with canvas</title> | |
| <meta name="description" content=""> | |
| <meta name="author" content="Yannick Assogba"> | |
| <script src="//rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.js"></script> |
A short code excerpt from this visualization I created for the longform article “Iouri Podladtchikov – You only fly once” by the Neue Zürcher Zeitung.
It's a very simple way to create an interactive animation based on video material. Hover over the image to go through the animation.
I used Final Cut Pro to export the frames of a short video sequence, which I then stitched together into a single film strip using ImageMagick: convert folder-of-stills/* +append filmstrip.jpg
| Year | Winner | Country | Joint? | % of prize | Institution or individual? | ISO country code (WHERE APP) | Sex | Notes | |
|---|---|---|---|---|---|---|---|---|---|
| 1901 | Jean Henri Dunant | Switzerland | Yes | 50 | Ind. | CH | M | Founder of the International Committee of the Red Cross, Geneva; Initiator of the Geneva Convention and founder and President of the first French peace society (since 1889 it has been called the Société Francaise pour l'arbitrage entre nations). | |
| 1901 | Frédéric Passy | France | Yes | 50 | Ind. | FR | M | Founder of the International Committee of the Red Cross, Geneva; Initiator of the Geneva Convention and founder and President of the first French peace society (since 1889 it has been called the Société Francaise pour l'arbitrage entre nations). | |
| 1902 | Élie Ducommun | Switzerland | Yes | 50 | Ind. | CH | M | Honorary Secretary of the Permanent International Peace Bureau, Berne | |
| 1902 | Charles Albert Gobat | Switzerland | Yes | 50 | Ind. | CH | M | Secretary General of the Inter-Parliamentary Union, Berne | |
| 1903 | Sir William Randal Cremer | UK | No | 100 | Ind. | GB | M | Member of the British Parliament. Secretar |
| #!/bin/bash | |
| MOVIE=$1 | |
| ffmpeg -i $MOVIE -r 10 -vcodec png out-static-%05d.png | |
| convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $MOVIE.gif | |
| rm out-static*.png |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>[]</title> | |
| <style type="text/css"> | |
| .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;} | |
| .clearfix:after{clear:both;} | |
| .hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;} | |
| .input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} |
| // Use Gists to store code you would like to remember later on | |
| console.log(window); // log the "window" object to the console |
| void setup() { | |
| size(500, 500); | |
| smooth(8); | |
| noStroke(); | |
| } | |
| float t, tt, ht, x, y; | |
| int N = 11; | |
| float l = 24; | |
| float sp = l*1.5; |
| // -------- | |
| // types | |
| // -------- | |
| // falsy values | |
| function is_false(value) { return !(value); }; | |
| is_false(false); | |
| is_false(undefined); | |
| is_false(undefined); |
| [class='motorway'] { | |
| line-join:round; | |
| line-color: @motorway_case; | |
| #road { line-cap: round; } | |
| #tunnel { line-dasharray:3,2; } | |
| [zoom>=6] { line-width:0.4; } | |
| [zoom>=7] { line-width:0.6; } | |
| [zoom>=8] { line-width:1.5; } | |
| [zoom>=9] { line-width: 1.75; } | |
| [zoom>=10] { line-width:2; } |
