πŸ§ͺ
Workshops: Computer Vision
Created
Jun 8, 2020
Category
πŸ§ͺ Workshop
Platform
Computer Vision
Author
Description
Β 

Assignments

Computer Vision Deliverables

Processing/Computer Vision: 2F, 2I, 2O, 3B, 3D, 3E, 4B
Β 
Β 

CVWS - 2F - FirstProgramElipses

πŸ—’οΈ
Write a program that draws three (or more) ellipses: β€’ at various locations, β€’ with various colors β€’ various widths and heights β€’ with and without borders (of various colors)
πŸ’‘
I was playing around with all kinds of ellipses and ended up with a clown face.

Working code
// setup canvas
background(255,255,255);
size(600,600);



// generic color definitions

color cyan = color(62, 103, 102);
color white = color(255);
color black = color(0);
color red = color(255,0,0);


fill(cyan);
ellipse(height/8,width/8,300,100);
fill(red);
ellipse(height/2,width/2, 300,300);
fill(black);
ellipse(300,0.9*height, 500,100);
Β 

CVWS - 2I - FourDifferentShapesWithColorsAndLocations

πŸ—’οΈ
Write a program that draws: β€’ at least four different shapes (not circles), β€’ in various colors, β€’ at various locations.
πŸ’‘
I really like Pepe the frog and decided to create the facial structure by using different shapes, colors and locations. After all I found that Pepe has no rectangles - but I will use the rect() function in a later assignment.

Working code
// randomize eyecolor

float er = random (80,255);
float eg = random (80,255);
float eb = random (80,255);

float br = 255-er;
float bg = 255-eg;
float bb = 255-eb;

// generic color definitions

color cyan = color(62, 103, 102);
color white = color(255);
color black = color(0);
color green = color(71,125,3);
color lips = color(150,63,7);


// setup canvas
background(br,bg,bb);
size(600,600);


// basic pepe
fill(green);
strokeWeight(5);
ellipse(height/2,width/2, 300,300);
ellipse(height/2,width/2, 300,300);
ellipse(height/1.75,width/3, 300,100);
//headparts
ellipse(height/1.5,width/3.4, 150,75);
ellipse(height/2.0,width/3.4, 150,75);


fill(er,eg,eb);

ellipse(height/1.5,width/2.5, 100 ,70);
ellipse(height/2,width/2.5, 100 ,70);

//pupills
fill(black);

ellipse(height/1.5,width/2.5, 50 ,50);
ellipse(height/2,width/2.5, 50 ,50);

//pupills-inner
fill(white);
strokeWeight(1);
ellipse(height/1.5,width/2.5, 20 ,20);
ellipse(height/2,width/2.5,20 ,20);


//lips

fill(lips);
strokeWeight(5);

ellipse(height/1.75,width/1.65, 230.0, 60);

line(height/2.3,width/1.65,height/1.37,height/1.65);
Β 

CVWS - 2O - InteractiveShapes

πŸ—’οΈ
Write a program that draws at least two different shapes, with various colors and make them interactive. Ideas: β€’ Draw a line where one of the ends follows the mouse. β€’ Draw a circle where the color is related to the location of the mouse. β€’ Draw a rectangle with the size related to the x location of the mouse. β€’ Etc.
πŸ’‘
I took a bike tour at this day and saw these concrete buildings ("Plattenbauten") in a closeby neigborhood. After all , following a proper 70s soviet charme, they were really sticking to my head so I decided to rebuild them in Processing with interactive day- and night mode.

Working code
//setup canvas
void setup() {
  size(640, 480);
  background(0);
}

//define colors used  
color nightblue = color(25, 25, 112);
color skyblue = color(135, 206, 235);
float startPosition = random(300);


void draw() {
  float wBuilding = (mouseX-startPosition);
  float hBuilding = (-mouseY+height);
  drawSky();
  drawBuilding(wBuilding,hBuilding);
  drawWindows(hBuilding);
}


void drawSky(){
  if (mousePressed){
    background(nightblue);
    for(int i=0; i < 100; i++){
      stroke(255,255,0);
      strokeWeight(2);
      point(random(width), random(width));
      frameRate(15);
  }
  }else{
    background(skyblue);
    noStroke();
    fill(240);
    frameRate(10);
    for(int iCloud=0; iCloud < 20; iCloud++){
          fill(random(220,255),random(150,255));
          rect(random(640),random(0,120),random(30,100),random(20,60),random(20,60));
      frameRate(5);

      }
  }
}
// generate window pattern

void drawWindows (float hBuilding) {

  for (float yWd=height-hBuilding;yWd<height;yWd +=20){
   for (float xWd=startPosition;xWd<mouseX;xWd +=20){
     point (xWd,yWd);
     }
    }

}

// draw building
void drawBuilding(float wBuilding, float hBuilding) {
  println(startPosition);
  fill(120); 
  rect(startPosition,height-hBuilding, wBuilding, hBuilding);

// generate window pattern
  for (float yWd=height-hBuilding;yWd<height;yWd +=20){
   for (float xWd=startPosition;xWd<mouseX;xWd +=20){
     point (xWd,yWd);
     }
    }

}
Β 

CVWS - 3B - AnonymousBlackBar

πŸ—’οΈ
Change the code so that every recognised face gets an 'anonymous' black bar in front of his eyes or a red clown nose instead of his/her nose.
πŸ’‘
As I was facing the known trouble with macOS Catalina and OpenCV, The demand for improvisation was given.

Working code
import gab.opencv.*;
import java.awt.Rectangle;

OpenCV opencv;
Rectangle[] faces;

void setup() {
  opencv = new OpenCV(this, "phil.jpg");
  size(720, 1000);

  opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);  
  faces = opencv.detect();
}

void draw() {
  image(opencv.getInput(), 0, 0);

  fill(0, 0, 0);
  for (int i = 0; i < faces.length; i++) {
    rect(faces[i].x, faces[i].y, faces[i].width, faces[i].height/2);
  }
}
Β 

CVWS - 3D - FunnyGlasses

πŸ—’οΈ
Write the code so that every recognised face is enhanced by an image, e.g. give a recognized face funny glasses or a hat.. Have a look at the documentation for the image() function for an example of how to display an image in Processing: https://processing.org/reference/image_.html
πŸ’‘
With the given constraints, I decided to use the situation and do something I could not do with my webcam in corona times - bring my friends to the scene. I was impressed, how reliable the detection worked - only by a few lines of code.

Working code
import gab.opencv.*;
import java.awt.Rectangle;

OpenCV opencv;
PImage img;
Rectangle[] faces;

String funnyGlassesFiles[] = split("dealwithit.png,versace.png,mafia.png", ',');
String currentGlasses = funnyGlassesFiles[(int)random(funnyGlassesFiles.length)];

void setup() {
  background(0);
  opencv = new OpenCV(this, "friends.jpg");
  size(1200 , 720);
  opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);  
  faces = opencv.detect();
  println(currentGlasses);
  img = loadImage(currentGlasses);

}

void draw() {
 
    image(opencv.getInput(), 0, 0);

  for (int i = 0; i < faces.length; i++) {
    image(img, faces[i].x, faces[i].y*1.15,faces[i].width, faces[i].height/2);  }
    
}
Β 

CVWS - 4B - EmotionalPomodoroFlask

πŸ—’οΈ
Make a new combination between Processing and Arduino. Use a different actuator on the Arduino side and something different from exercise 2A on the Processing side. You can even experiment with the computer vision library and let something physical happen based on what the library recognizes.
Β 
πŸ’‘
In my ongoing challenge ⚑Challenge 3: Project MagicFlask I was facing the problem that I wanted to output values on an external device but not yet wanted to implement the final approach (ESP32 web sever / Web app or the Flutter App with BLE-connection, I wanted to make). Connecting the output of different flask states to Processing was a good way to test it. Side note here: The baud rate on ESP32 is different to the Arduino R3 model.

Working code
import processing.serial.*;
Serial myPort;
String sensorReading="";
PImage img;
String flasqImages[] = split("idleflasq.png,pomodoroflasq.png,sadflasq.png", ',');
String currentFlasq = "idleflasq.png";
String flasqStatus = "idle";
int t;
int interval = 310;
int timerStart, timerPomodoro;
String time = "010";

void setup() {
  size(400, 400);
  myPort = new Serial(this, Serial.list()[4], 115200); 
  // Baud rate is different on ESP32
  myPort.bufferUntil('\n'); 
  img = loadImage(currentFlasq);
  timerStart=millis();
  println(timerStart);

  
}

  void draw() {

  background(48,52,55);
  image(img,100,100,img.height,img.width);

  fill(0,128,255);
  textSize(12);
    text("Sensor Reading: " + sensorReading, 20, 20);


 if(sensorReading.indexOf("start") >= 0){
        currentFlasq="pomodoroflasq.png";
        img = loadImage(currentFlasq);
        flasqStatus = "pomodoro";



  }else if(sensorReading.indexOf("stop") >= 0){
        currentFlasq="sadflasq.png";
        img = loadImage(currentFlasq);

  }else if (flasqStatus== "idle") {
          currentFlasq="idleflasq.png";
        img = loadImage(currentFlasq);

  
  }if (flasqStatus == "pomodoro") {
            fill(255);
          timerPomodoro =  millis() - timerStart;

          t = interval-int(timerPomodoro/1000);
          time = nf(t , 3);
          if(t == 0){
            println("POMODORO STOP");
          interval+=10;}
          textAlign(CENTER);
          textSize(32);
          text(time, width/2, 0.95*height);
       }else {
         
         
       }
  rectMode(CENTER);
  //rect(width/2, height/2, float(sensorReadingNeg*2), float(sensorReadingNeg), 9);
  textSize(32);
  fill(255, 255, 255);
  textAlign(CENTER);{

    }
  }
  void serialEvent (Serial myPort) { sensorReading = myPort.readStringUntil('\n');
}
Β 
Β 

More interesting projects