// Cloned by Jack O'Brien on 5 Dec 2020 from World "Character recognition neural network" by "Coding Train" project 
// Please leave this clone trail here.
 

// Port of Character recognition neural network from here:
// https://github.com/CodingTrain/Toy-Neural-Network-JS/tree/master/examples/mnist
// with many modifications 


// --- defined by MNIST - do not change these ---------------------------------------

const PIXELS        = 28;                       // images in data set are tiny 
const PIXELSSQUARED = PIXELS * PIXELS;

//--- can modify all these --------------------------------------------------

// no of nodes in network 
const noinput  = PIXELSSQUARED;

// multiply it by this to magnify for display 
const ZOOMFACTOR    = 10;                        
const ZOOMPIXELS    = ZOOMFACTOR * PIXELS; 

// 3 rows of
// large image + 50 gap + small image    
// 50 gap between rows 

const canvaswidth = ( PIXELS + ZOOMPIXELS ) + 250;
const canvasheight = ( ZOOMPIXELS * 3 ) + 500;


const DOODLE_THICK = 18;    // thickness of doodle lines 
const DOODLE_BLUR = 3.5;      // blur factor applied to doodles 


// images in LHS:
let doodle, demo;
let doodle_exists = false;
let demo_exists = false;

let mousedrag = false;      // are we in the middle of a mouse drag drawing?  


// CSS trick 
// make run header bigger 
 $("#runheaderbox").css ( { "max-height": "95vh" } );



//--- start of AB.msgs structure: ---------------------------------------------------------
// We output a serious of AB.msgs to put data at various places in the run header 
var thehtml;

  // 1 Doodle header 
  thehtml = "<hr> <h1> 1. Doodle </h1> Top row: Doodle (left) and shrunk (right). <br> " +
        " Draw your doodle in top LHS. <button onclick='wipeDoodle();' class='normbutton' >Clear doodle</button> <br> ";
   AB.msg ( thehtml, 1 );


//--- end of AB.msgs structure: ---------------------------------------------------------




function setup() 
{
  createCanvas ( canvaswidth, canvasheight );
    // var ctx = ABWorld.getContext ( "2d" );
    // ctx.fillStyle = SKYCOLOR;
    // ctx.fillRect ( 0, 0, ABWorld.canvas.width, ABWorld.canvas.height );
    console.log ("All JS loaded");
    // doodle = createGraphics ( canvaswidth+200, canvasheight+200 );       // doodle on larger canvas 
    // doodle.pixelDensity(1);
  
// JS load other JS 
// maybe have a loading screen while loading the JS and the data set 

      AB.loadingScreen();
 
            console.log ("All JS loaded");

            loadData();

}



// load data set from local file (on this server)

function loadData()    
{
    console.log ("All data loaded into mnist object:")
    AB.removeLoading();     // if no loading screen exists, this does nothing 
}


// --- the draw function -------------------------------------------------------------
// every step:
 
function draw() 
{
  // check if libraries and data loaded yet:


// how can we get white doodle on black background on yellow canvas?
//        background('#ffffcc');    doodle.background('black');

      background ('black');
    

  if ( doodle_exists ) 
  {
    drawDoodle();
  }


// detect doodle drawing 
// (restriction) the following assumes doodle starts at 0,0 

  if ( mouseIsPressed )         // gets called when we click buttons, as well as if in doodle corner  
  {
     // console.log ( mouseX + " " + mouseY + " " + pmouseX + " " + pmouseY );
    //  var MAX = ZOOMPIXELS + 20;     // can draw up to this pixels in corner 
    //  if ( (mouseX < MAX) && (mouseY < MAX) && (pmouseX < MAX) && (pmouseY < MAX) )
    //  {
    //     mousedrag = true;       // start a mouse drag 
    //     doodle_exists = true;
    //     // doodle.stroke('white');
    //     // doodle.strokeWeight( DOODLE_THICK );
    //     // doodle.line(mouseX, mouseY, pmouseX, pmouseY);      
    //  }
  }
  else 
  {
      // are we exiting a drawing
    //   if ( mousedrag )
    //   {
    //         mousedrag = false;
    //         // console.log ("Exiting draw. Now blurring.");
    //         doodle.filter (BLUR, DOODLE_BLUR);    // just blur once 
    //         //   console.log (doodle);
    //   }
  }
}




//--- demo -------------------------------------------------------------
// demo some test image and predict it
// get it from test set so have not used it in training



//--- doodle -------------------------------------------------------------

function drawDoodle()
{
    // doodle is createGraphics not createImage
    let theimage = doodle.get();
    // console.log (theimage);
    
    image ( theimage,   0,                0,    ZOOMPIXELS,     ZOOMPIXELS  );      // original 
    image ( theimage,   ZOOMPIXELS+50,    0,    PIXELS,         PIXELS      );      // shrunk
}


function wipeDoodle()    
{
    doodle_exists = false;
    doodle.background('black');
}