p5.js Web Editor | SketchClassifier

xxxxxxxxxx
let circles = [];
let squares = [];
let triangles = [];
​
​
let shapeClassifier;
let rowIndex = 0;
let previewHeight = 20;
let NUM_OF_IMAGES = 50;
var loopCount = 0;
var currentImageIndex = 0;
var resultsMatrix = []
​
​
var categories = ['triangle','square','circle']
var currentMode = categories[0];
​
var canvas;
var inputImage;
​
function preload(){
  for(let i = 0;i < NUM_OF_IMAGES;i++){
    
    triangles[i] = loadImage('testing/triangle-' + (i+1)+'.png');
    squares[i] = loadImage('testing/square-'  + (i+1)+'.png');
    circles[i] = loadImage('testing/circle-' + (i+1)+'.png');
    
    
  }
}
​
function setup() {
  canvas = createCanvas(400, 400);
  pixelDensity(1.0);
 
  let options = {
    inputs: [64,64,4],
    task: "imageClassification",
    debug: true
  }
  shapeClassifier = ml5.neuralNetwork(options)
  const modelInfo = {
  model: 'model/model.json',
  metadata: 'model/model_meta.json',
  weights: 'model/model.weights.bin',
  };
  
   shapeClassifier.load(modelInfo, modelLoaded);
  
  resultsDiv1 = createDiv('loading model')
  resultsDiv2 = createDiv('...')
  resultsDiv3 = createDiv('...')
  inputImage = createGraphics(64,64);
  
  
  // Build a confusion matrix for each element of the categories array.
  for (var i = 0; i < categories.length; i++) {
    let newRow = [];
    for (var j = 0; j < categories.length; j++) {
      newRow.push(0);
    }
    resultsMatrix.push(newRow);
  }
  
}
​
function modelLoaded(){
  console.log("Trained model is loaded");
  //classifyImage();
}
​
​
function gotResults(err,results){
  if(err){
    console.log(err);
    return
  }
    let label = results[0].label;
    let confidence = Math.round(100*results[0].confidence)
    resultsDiv1.html(label + " , " + confidence + "% confident")
    label = results[1].label;
    confidence = Math.round(100*results[1].confidence)
    resultsDiv2.html(label + " , " + confidence + "% confident")
    label = results[2].label;
    confidence = Math.round(100*results[2].confidence)
    resultsDiv3.html(label + " , " + confidence + "% confident")
   //console.log(results)
    
  let targetIndex = categories.indexOf(currentMode)
  let classifiedIndex = categories.indexOf(results[0].label)
​
  resultsMatrix[classifiedIndex][targetIndex] += 1
   
}
​
// This function takes the canvas, copies it into a 64 x 64 pixel image, and asks the model to try to predict what is on the canvas.
  
function classifyImage(){
inputImage.copy(canvas,0,0,400,400,0,0,64,64);
​
shapeClassifier.classify({image: inputImage},gotResults)
  
}
​
function draw() {
  
  
  if(loopCount >= 2){
    loopCount = 0;
    
    
    if(currentMode == 'triangle'){
      image(triangles[currentImageIndex],0,0,width,height)
    }
    else if(currentMode == 'square'){
             image(squares[currentImageIndex],0,0,width,height)
             }
    else{
      image(circles[currentImageIndex],0,0,width,height)
    }
    
  classifyImage();
    
    currentImageIndex += 1
  }
  else{
    loopCount += 1;
  }
  
    
  if(currentMode == "triangle" && currentImageIndex == NUM_OF_IMAGES - 1){
    currentMode = "square";
    currentImageIndex = 0;
  } 
  else if ( currentMode == "square" && currentImageIndex == NUM_OF_IMAGES - 1){
    currentMode = "circle";
    currentImageIndex = 0;
  }
  else if ( currentMode == "circle" && currentImageIndex == NUM_OF_IMAGES - 1){
    noLoop();
    currentImageIndex = 0;
    console.log("done with all images")
    console.table(resultsMatrix)
  }
  
  
}
Cookies

Sketch Files

Console

Preview
