let video;

let detections = [];

let eyes = []; // Array zum Speichern der Augenpositionen und -größen

let lastPersonCount = 0;

​

function modelReady() {

  console.log('Model is ready!!!');

  mobilenet.detect(gotResults);

}

​

function gotResults(error, results) {

  if (error) {

    console.error(error);

  } else {

    detections = results;

    mobilenet.detect(gotResults);

  }

}

​

function setup() {

  createCanvas(800, 600);

  background(0); // Hintergrundfarbe auf Schwarz setzen

  video = createCapture(VIDEO);

  video.size(800, 600);

  video.hide();

  mobilenet = ml5.objectDetector('cocossd', video, modelReady);

}

​

function draw() {

  background(0); // Bei jedem Frame den Hintergrund auf Schwarz setzen

​

  // Zeichne das Video und erkenne Personen

  image(video, 0, 0);

  let currentPersonCount = 0;

  let newEyes = [];

​

  if (detections) {

    for (let i = 0; i < detections.length; i++) {

      let object = detections[i];

      if (object.label === 'person') {

        let x = object.x + object.width / 2; // Mitte des Rechtecks

        let y = object.y + object.height / 2; // Mitte des Rechtecks

        let diameter = min(object.width, object.height); // Durchmesser basierend auf der kleineren Seite des Rechtecks

        newEyes.push({ x: x, y: y, diameter: diameter });

​

        noFill();

        stroke(255, 0, 0);

        strokeWeight(2);

        rect(object.x, object.y, object.width, object.height);

​

        currentPersonCount++;

      }

    }

    fill(255);

    textSize(20);

    text('Anzahl der Personen: ' + currentPersonCount, 10, 30);

  } else {

    fill(255);

    textSize(32);

    textAlign(CENTER, CENTER);

    text('Lade...', width / 2, height / 2);

  }

​

  // Wenn sich die Anzahl der erkannten Personen ändert, aktualisiere die Augenpositionen

  if (currentPersonCount !== lastPersonCount) {

    eyes = placeEyes(currentPersonCount, newEyes);

    lastPersonCount = currentPersonCount;

  }

​

  // Zeichne die Augen

  drawEyes(newEyes);

}

​

function placeEyes(personCount, newEyes) {

  let placedEyes = [];

​

  for (let i = 0; i < personCount; i++) {

    let eye = newEyes[i];

​

    // Versuche eine Position zu finden, bei der sich die schwarzen Kreise nicht überlappen

    let fixedX, fixedY;

    let tries = 0;

    let maxTries = 100;

​

    do {

      fixedX = random(eye.diameter / 2, width - eye.diameter / 2);

      fixedY = random(eye.diameter / 2, height - eye.diameter / 2);

      let overlapping = false;

​

      for (let j = 0; j < placedEyes.length; j++) {

        let otherEye = placedEyes[j];

        let distance = dist(fixedX, fixedY, otherEye.x, otherEye.y);

        if (distance < (eye.diameter + otherEye.diameter) / 2) {

          overlapping = true;

          break;

        }

      }

​

      if (!overlapping) {

        placedEyes.push({ x: fixedX, y: fixedY, diameter: eye.diameter });

        break;

      }

​

      tries++;

    } while (tries < maxTries);

  }

​

  return placedEyes;

}

​

function drawEyes(newEyes) {

  for (let i = 0; i < eyes.length; i++) {

    let eye = eyes[i];

    let person = newEyes[i];

​

    // Aktualisiere die Größe des Auges basierend auf der Größe des erkannten roten Rechtecks

    eye.diameter = person.diameter;

​

    // Zeichne den äußeren schwarzen Kreis

    noStroke();

    gradient(eye.x, eye.y, eye.diameter, color(0), color(0));

​

    // Berechne die Position des inneren weißen Kreises basierend auf der Position der Person

    let innerDiameter = eye.diameter / 2;

    let maxOffset = (eye.diameter - innerDiameter) / 2;

    // Setze den weißen Kreis innerhalb des schwarzen Kreises basierend auf der Position des Gesichtszentrums

    let whiteX = eye.x - (person.x - eye.x) * 0.5; // Spiegelverkehrte Position

    let whiteY = eye.y + (person.y - eye.y) * 0.5;

​

    // Begrenze die Position des weißen Kreises, um sicherzustellen, dass er nicht über den Rand des schwarzen Kreises hinausgeht

    let distanceToEdge = dist(whiteX, whiteY, eye.x, eye.y);

    if (distanceToEdge > maxOffset) {

      let factor = maxOffset / distanceToEdge;

      whiteX = eye.x + (whiteX - eye.x) * factor;

      whiteY = eye.y + (whiteY - eye.y) * factor;

    }

//farbe gradient weißer kreis

    gradient(whiteX, whiteY, innerDiameter,color(200, 200,255), color(255));

​

    // Berechne die Position des inneren blauen Kreises basierend auf der Position des weißen Kreises

    let blueDiameter = innerDiameter * 0.7; // Der Durchmesser des blauen Kreises ist 70% des Durchmessers des weißen Kreises

    let blueMaxOffset = (innerDiameter - blueDiameter) / 2;

    let angle = atan2(whiteY - eye.y, whiteX - eye.x);

​

    let blueX = whiteX + cos(angle) * blueMaxOffset;

    let blueY = whiteY + sin(angle) * blueMaxOffset;

​

    // blauer kreis

    gradient(blueX, blueY, blueDiameter, color(0, 0, 255), color(200, 200, 255));

  }

}

​

function gradient(x, y, diameter, c1, c2) {

  let radius = diameter / 2;

  for (let r = radius; r > 0; --r) {

    let inter = map(r, 0, radius, 0, 1);

    let c = lerpColor(c1, c2, inter);

    fill(c);

    ellipse(x, y, r * 2, r * 2);

  }

}

​