ippsketch

The two files you need to sketch GPS routes with p5.js are below

More information can be found here: https://ippsketch.com/posts/gps-running-routes-with-p5js/

To make this work, you need to:

1. Copy these files to a directly
2. Make a subfolder called js and place p5.min.js into it. You can download that here: https://p5js.org/download/
3. Put ccapture.all.min.js into that js subfolder as well if you want to record png files. That can be found here: https://github.com/spite/ccapture.js/
4. Place your GPS files into the directory
5. Put the filenames into the sketchGPSroutes.js file (see line 15 of that file for notes)

ippsketch

var cap = true;  // change this to create a gif and change stop condition
var start = false;
if (cap){var capturer = new CCapture( { format: 'png' } );}


var i = 0; //initiate
var PERIOD = 100;

// float t,i,p,a;
let t=1;

ippsketch

Pixel Deck

Results here: https://twitter.com/ippsketch/status/1389575309226348547?s=20

p5.js sketch code and image files below

ippsketch

for i in *.gif;
  do name=`echo "$i" | cut -d'.' -f1`
  tmp = ${name:0:5}
  echo "$tmp"
  ffmpeg -i "$i" -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" "${name}.mp4"
done

ippsketch

let gridFlag = []; //array of underlying grid flags (true==filled)
let shapes = []; //array of shape objects
let dx,dy; // grid spacing

function setup() {
  createCanvas(1000,1000);
  iNum = 20;
  jNum = 20;
  dx = width/iNum;;
  dy = height/jNum;

ippsketch

// use this to get download the images https://github.com/cables-and-pixels/pyfxhash
projectNumber = 17759; //fxhash project number
numberOfMints = 97; // number of mints for this project
gridSizeX = 10; // x-dimension grid size for the output collage
gridSizeY = Math.ceil(numberOfMints/gridSizeX);
aspectRatio = 3/4; //of the individual images (width/height)

let w = 2048*2; // width of output image
let h = w*gridSizeY/(gridSizeX*aspectRatio);
let dx = w/gridSizeX;