Assignment 10

​

var art;

var image2;

let renderer, video, style, sel, nextToLoad = "wave";

function preload() {

  art= loadImage("art2.png");

}

​

  function setup(){

    //background(10);

  renderer = createCanvas(1000, 700);

  textAlign(CENTER, CENTER);

  textSize(60);

​

  video = createCapture(VIDEO);

  video.hide();

​

  sel = createSelect()

  sel.position(700, 590);

  //sel.option("la_muse");

  //sel.option("matilde_perez");

  //sel.option("matta");

  sel.option("rain_princess");

  //sel.option("scream");

  sel.option("udnie");

  sel.option("wave");

  sel.option("wreck");

  sel.changed(changeStyle);

  sel.value(nextToLoad);

  load(nextToLoad);

}

​

​

function load(model){

  style = ml5.styleTransfer('https://raw.githubusercontent.com/ml5js/ml5-data-and-models/master/models/style-transfer/' + model, video.elt, modelLoaded);

}

​

function modelLoaded() {

  nextToLoad = "";

  style.transfer(gotResult); 

}

​

function gotResult(err, resultImg) {

  if(err) return;

  renderer.drawingContext.drawImage(resultImg, 282, 50, 410, 480);

  if (nextToLoad!="") {

    load(nextToLoad);

  } else style.transfer(gotResult); 

}

​

function changeStyle(){

  nextToLoad = sel.value();

​

​

}

​

function draw(){

​

  if (nextToLoad!="") {

    image(video, 50, 50);

    image(art,30,0,250,700);

    fill(255);

    text("LOADING", width/2, height/2);

    fill(0);

    textSize(15);

    text("Udnie", 150, 170);

    text("Rain Princess", 150, 320);

    text("The Shipwreck", 150, 475);

    text("The Great Wave off Kanagawa", 150, 640);

  }

}

​

​