Playground

This page keeps some of the interactive experiments from earlier versions of the site.

Image Classification in ml5.js

{
  const ml5 = await require('https://unpkg.com/ml5@latest/dist/ml5.min.js');

  const fileInput = html`<input type="file" accept="image/*"/>`;
  const img = html`<img id="image" style="max-width: 100%; margin-top: 10px;"/>`;
  const resultDisplay = html`<div id="result">Upload an image to classify it.</div>`;

  fileInput.onchange = async (e) => {
    const file = e.target.files[0];
    if (file) {
      img.src = URL.createObjectURL(file);
      img.onload = () => {
        img.style.display = 'block';
        ml5.imageClassifier('MobileNet').then(classifier => {
          classifier.classify(img, (error, results) => {
            if (error) {
              resultDisplay.textContent = `Error: ${error}`;
              console.error(error);
            } else {
              const confidence = results[0].confidence * 100;
              resultDisplay.innerHTML = `${results[0].label}<br>Confidence: ${confidence.toFixed(2)}%`;
            }
          });
        });
      };
      resultDisplay.textContent = `Classifying ...`;
    }
  };

  return html`<div>${fileInput}${img}${resultDisplay}</div>`;
}

Processing Animation in p5.js

P5 = require("p5")

Credit: Danielle Navarro

function* createSketch(sketch) {
  const element = DOM.element('div');
  element.style.width = '100%';
  element.style.maxWidth = '720px';
  yield element;
  const instance = new P5(sketch, element, true);
  try {
    while (true) {
      yield element;
    }
  } finally {
    instance.remove();
  }
}

createSketch(s => {
  const baseWidth = 720;
  const baseHeight = 400;

  function fitCanvas() {
    const parent = s.canvas?.parentElement;
    const containerWidth = parent ? parent.clientWidth : baseWidth;
    const w = Math.max(280, Math.min(baseWidth, containerWidth));
    const h = Math.round((w / baseWidth) * baseHeight);
    if (s.canvas) {
      s.resizeCanvas(w, h);
    } else {
      s.createCanvas(w, h);
    }
  }

  s.setup = function() {
    fitCanvas();
  };

  let t = 0;
  s.draw = function() {
    s.background('#fff');
    s.translate(s.width / 2, s.height / 2);
    s.stroke('#0f0f0f');
    s.strokeWeight(1.5);
    for (let i = 0; i < 100; i++) {
      s.line(x1(t + i), y1(t + i), x2(t + i) + 20, y2(t + i) + 20);
    }
    t += 0.15;
  };

  function x1(t) {
    return s.sin(t / 10) * 125 + s.sin(t / 20) * 125 + s.sin(t / 30) * 125;
  }

  function y1(t) {
    return s.cos(t / 10) * 125 + s.cos(t / 20) * 125 + s.cos(t / 30) * 125;
  }

  function x2(t) {
    return s.sin(t / 15) * 125 + s.sin(t / 25) * 125 + s.sin(t / 35) * 125;
  }

  function y2(t) {
    return s.cos(t / 15) * 125 + s.cos(t / 25) * 125 + s.cos(t / 35) * 125;
  }

  s.windowResized = function() {
    fitCanvas();
  };
});