Wobble-head

Coding a interactive mask with processing

purpose:

university project

date:

June 2018

Processing is a Java-based coding software that allows various graphic and interactive solutions.

This project was about creating a mask that features different input methods to interact with the mask.

features of this mask:

  • the background wobbles, the head expands depending on the volume a connected mic picks up.

  • When hovering over it, the head is colored, the hue slowly changes. This changes faster on louder volumes.

  • On left mouseclick a cigarette appears.

  • pressing any key while clicking LMB lights up the cigarette.

WobbleHueOff.PNG

1/6

float y;
float xoff = 0.0;
PShape s;
float b;
float k;

void setup () {
  colorMode(HSB);
  size(800, 800);
  background(0);
  smooth();
  setupAudio();
}

void draw () {
  background(0);
  translate(400, 450);
  getVolume();
  float y = 1.3*(volume);
  //(volume) an mikro Sensibilität anpassen
  noFill();
  stroke(255);

  //Kreise
  strokeWeight(0.4+y/80);
  ellipse(0, 0, 312+y, 312+y);
  strokeWeight(0.6+y/80);
  ellipse(0, 0, 320+y, 320+y);
  strokeWeight(0.8+y/80);
  ellipse(0, 0, 330+y, 330+y);
  strokeWeight(1+y/80);
  ellipse(0, 0, 350+y, 350+y);
  strokeWeight(2+y/80);
  ellipse(0, 0, 370+y, 370+y);
  strokeWeight(4+y/80);
  ellipse(0, 0, 390+y, 390+y);
  strokeWeight(8);
  ellipse(0, 0, 425+y, 425+y);
  strokeWeight(16+y/80);
  ellipse(0, 0, 475+y, 475+y);
  strokeWeight(24+y/80);
  ellipse(0, 0, 550+y, 550+y);
  strokeWeight(32+y/80);
  ellipse(0, 0, 650+y, 650+y);
  strokeWeight(40+y/80);
  ellipse(0, 0, 800+y, 800+y);
strokeWeight(48+y/80);
  ellipse(0, 0, 1000+y, 1000+y);

 //Kopf

  //headphones
  noStroke();
  fill(90);
  ellipse(0, -10, 460+y/2, 440+y/2);
  rect(-150-y/8, 0, -100-y/8, 120,20,20,20,20);
  rect(150+y/8, 0, 100+y/8, 120,20,20,20,20);
 
  //face
 
  fill(240);
  //Hals+Kopf
  rect(-150, 200, 300, 200);
  rect(-200, -200, 400, 470, 240, 240, 100, 100);
  ellipse(0, -10, 380+y/2, 380+y/2);
  //farbe innen
  if (mouseX >= 230 && mouseX <= width-230 && mouseY >= 230 && mouseY <= height-230) {
    //fill(random (120));
    //fill(lerpColor(int(random(255)),int(random(255)), 0.5));
    //float n = random(0.5,0.7);
    xoff = xoff + (0.002+(y/500));
    float n = noise(xoff) * 360;
    float i = 1000;
    //float i = noise(xoff) * 255;
    //float o = noise(xoff) * 255;
    float o = 1000;

    //HSB Modus ändern und dann H als noise Variable festlegen

    color c = color(n, i, o);
    fill(c);
    println(y);
    //fill(200);
  } else {
    fill(240);
  }
 //”Gehirn”
  noStroke();
  arc(0, -10, 320+y/2, 320+y/2, PI, PI*2, PIE);
  arc(0, -10, 320+y/2, 250+y/8, 0, PI*2, PIE);
  //ellipse(0, -10, 320+y/2, 320+y/2);
  strokeWeight(6);
  stroke(0);
 
  noFill();
  arc(0, 180, 80, 20, 0, PI);
 

//CLICKACTION
  if (mousePressed && (mouseButton == LEFT)) {
    noStroke();
    fill(200);
    quad(30,190,40,185,130,220,115,235);
    colorMode(HSB);
    fill(0,255,1.2*k);
    ellipse(122,227,18,18);
    fill(0,200,1.2*k);
    ellipse(122,227,17,17);
    fill(0,150,1.2*k);
    ellipse(122,227,12,12);
    fill(0,110,2*k);
    ellipse(122,227,9,9);
    fill(0,40,255,1.2*k);
    arc(-120,140,80,50,0,PI);
    arc(120,140,80,50,0,PI);
    
    stroke(0);
    line(-160, 140, -80, 140);
    line(160, 140, 80, 140);
  if (keyPressed){
    k = k+1;
  } else {
    k = 0;
  }
    
  } else {
  line(-160, 140, -80, 140);
  line(160, 140, 80, 140);
  }
}

© 2020 matthias molzer