︎

Documentation 06

//Midterm Progress


Code Mockup
We started with using the code to mock up the face. The code is adjustable following the mouse interaction, which we will later transfer into the serial communication from the computer to the arduino. Here is the code:
class Eye {
constructor(x, y, w, h){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}

draw(a=0){
push();
noStroke();
fill("#333");
translate(this.x,this.y);
rotate(a);
rect(-this.w/2, -this.h/3, this.w, this.h);
pop();
}
}

class Nose {
constructor(x, y, w = 15){
this.x = x;
this.y = y;
this.w = w;
}

draw(a=0){
push();
noStroke();
fill("#333");
translate(this.x,this.y);
triangle(-this.w, this.w, 0, -this.w, this.w, this.w);
pop();
}
}

class Mouth{
constructor(x, y, w, max = 50, t = 15){
this.x = x;
this.y = y;
this.w = w;
this.t = t;
this.max target="_blank">this.max target="_blank">this.max target="_blank">this.max = max;
}
draw(smile=0){
smile = map(smile, -1, 1, -this.max target="_blank">-this.max, this.max);
let h = 10;
let mid = 0.5 * this.w;
let delta = 0.5 * (this.max -abs(smile));
let tilt = 0;//-0.3 * smile;
push();
translate(this.x,this.y);
noFill();
//slit
stroke("black");
strokeWeight(2);
line(0, -this.max, 0, this.max);
//lips
stroke("maroon");
strokeWeight(this.t);
beginShape();
curveVertex(-mid - delta, tilt);
curveVertex(-mid - delta, tilt);
curveVertex(-mid, 0);
curveVertex(0,smile);
curveVertex(mid, 0);
curveVertex(mid + delta, tilt);
curveVertex(mid + delta, tilt);
endShape();
//grills
stroke("gold");
strokeWeight(4);
line(-mid, -h, -mid, h);
line(mid, -h, mid, h);
pop();
}
}




function setup() {
createCanvas(400, 400);

leftEye = new Eye(0.333 * width, 0.36 * height, 80, 30);
rightEye = new Eye(0.667 * width, 0.36 * height, 80, 30);
nose = new Nose(0.5 * width, 0.5 * height, 15);
mouth = new Mouth(0.5 * width, 0.666 * height, 0.42 * width);

}

function draw() {
let happy = min(mouseX / width,1);
let rage = min(mouseY / height,1);

background(color(
map(rage,0, 1, 128, 255),
map(happy, 0, 1, 0, 255),
map(happy, 0, 1, 255, -64)
));

let brow = map(rage,0, 1, -1, 1);
let smile = map(happy,0, 1, -1, 1);

nose.draw();
leftEye.draw(brow);
rightEye.draw(-brow);
mouth.draw(smile);

}







video 6.1 code preview mockup

We then started with fabricating a very rough demo of the robot using cardboard while figuring out the dimension of it. Instead of making it a cube, we decided to make a hexagonical one to make the shape more dynamic while having more space to fit the motors and the breadboard.
fig 6.1 mockup of the container

We then connected the 2 set of LEDs in parallel and 3 motors in parallel using a 4-6V DC power supply. The 2 set of LEDs are connected to the arduino power directly as well. The LEDs and the motors goes to D6,5,4,3,2 respectively. We first coded it without using an analog input to see how they can work regarding the mapping. We mapped the motors’ direction and the LEDs using the same set of variable first just to see how it looks. The ideal version is that the robot will change to blue when it is a sad face while changing to red when it shows a happy face:



This is the code:

fig 6.2 temporary code for current circuit using digital outputs only for now