// Made by Chris Orban and Jennifer Boughton

// Download the data and paste it into this spreadsheet file to plot vx and vy

//  https://docs.google.com/spreadsheets/d/160zDCb4V-sWaOXE0hr71B40U71G2di528cnUKXZgZvQ/edit?usp=sharing

​

// For more fun stuff check out http://youtube.com/c/STEMcoding

​

// Please run this program in chrome!

​

// Define the box in pixels where we are tracking the ball position (modify as needed)

xmin = 150;

xmax = 525;

ymin = 100;

ymax = 300;

​

// Dimensions of the video

// modify horizontal pixels as needed

horizontalpixels = 640;

​

// Please don't change vertical pixels

verticalpixels = 360;

​

// recorded frames per second (according to your phone settings)

recorded_fps = 240;

​

// playback frames per second, if unsure get this from opening 

// the video in http://jst.lucademian.com

playback_fps = 24; 

​

// Modify as needed

xruler1 = 490;

xruler2 = 490;

yruler1 = 60;

yruler2 = 360;

physical_length_meters = 1.0; // metric length of ruler or yardstick or meterstick

​

// physical distance in meters / pixels

meters_per_pixel = physical_length_meters/Math.sqrt((xruler1 - xruler2)**2 + (yruler1 - yruler2)**2);

// If needed get meters_per_pixel from Scaling tool 

// on http://jst.lucademian.com

// meters_per_pixel = 0.5/360;

​

var vid;

function preload() {  

    // On iPad / iPhone make sure to use "compatibility mode"

    // Then upload recording to https://video.online-convert.com/convert-to-mp4

    // Select 360 for vertical pixels and Audio channel --> Disable audio track

    // In editor.p5js.org click > on the top left and upload file

    vid = createVideo('green_new_short_24fps.mp4');

    vid.hide();

    vid.loop();

    // Video speed should be between 0.1 and 1.0

    // 0.1 is slower and produces more data

    // 1.0 is faster and produces less data

    vid.speed(0.5); // should be between 0.1 and 1.0  

}

​

function setup() {

  createCanvas(horizontalpixels,verticalpixels);

  pixelDensity(1);

  // Uncomment frameRate(1) below if you are ready to save and analyze the data!

  // frameRate(1);  

}

​

fileissaved = false;

function draw() {

  background(0); // clear the screen 

  image(vid, 0 , 0, horizontalpixels, verticalpixels);

  xball = [];

  yball = [];

  SearchPixels();

  showSelectionBox(xmin,xmax,ymin,ymax);

  drawLine(xruler1,yruler1,xruler2,yruler2);

  displaySelectedPixels();

  // Press keyboard key or click mouse to save!

  if ((keyIsPressed | mouseIsPressed) & !fileissaved ) { 

   var table;

   table = new p5.Table();

   table.addColumn('time [s]');

   table.addColumn('x [m]');

   table.addColumn('y [m]');   

​

    // How many times slower than real life we are actually watching this

    slow_mo_factor = recorded_fps/(playback_fps*vid.speed());  

    for (i = 0; i < xballcenter_history.length ; i += 1) { 

    newRow = table.addRow(); 

    newRow.setNum('time [s]',(i/(slow_mo_factor*meas_per_walltime_second)).toFixed(5));

    newRow.setNum('x [m]',(meters_per_pixel*xballcenter_history[i]).toFixed(5));

    newRow.setNum('y [m]',(meters_per_pixel*yballcenter_history[i]).toFixed(5));     

   }  

   saveTable(table,'ball_position_vs_t.csv'); 

   fileissaved = true;

  }

}

​

// Modify the second if statement to track an object of a certain color

function select_pixels( _r, _g, _b, _x, _y) {

​

  // Please don't modify this if statement

  if (_x > xmin & _x < xmax & _y > ymin & _y < ymax) {

       // Uncomment below if ball is green and lighting is good

       // if (_g > _b & _g > _r) {  

       // Uncomment below if ball is blue and lighting is good

       // if (_b > _g & _b > _r) {

       // Custom option: Take a screenshot an use 

       // https://imagecolorpicker.com/  to get the rgb color

       if ( _g > 75 & _b < 75 & _r < 75 ) {  // custom

          return true; // we found the ball!

       }

     } 

} // end select_pixels

​