xxxxxxxxxx
388
let handsfree;
let showPoints = false;
let yoff = 0.0;
var nPoints = 0; //arrays start with 0
var xPos = []; //make an array: group of boxes, each with different numbers. this is for the x coordinates
var yPos = []; //delcare
var x = 0;
//------------------------------------------
function setup() {
createCanvas(640, 480);
//you can change the maxNumHands if you want more than 1
handsfree = new Handsfree({
showDebug: true,
hands: true,
maxNumHands: 1
})
handsfree.start();
}
//------------------------------------------
function draw() {
background(189, 228, 219);
//draw finder
push();
stroke("gray");
fill(255, 255, 255, 90);
rect(0, 0, 1000, 30);
noStroke();
fill("black");
text("Finder", 80, 20);
text("File", 140, 20);
text("Edit", 190, 20);
text("View", 240, 20);
text("Go", 290, 20);
text("Window", 335, 20);
text("Help", 410, 20);
pop();
push();
beginShape();
scale(0.5);
translate(60, 15);
stroke("black");
fill("black");
circle(0, 0, 8);
stroke("black")
strokeWeight(0.0001);
fill(189, 228, 219);
circle(0, 0, 6);
fill("black");
circle(-8, 10, 5);
circle(8, 10, 5);
stroke("black");
strokeWeight(3);
line(-8, 10, 8, 10);
line(0, 4, 0, 30);
strokeWeight(1);
triangle(-8, 27, -12, 26, -13, 30);
vertex(-10, 29);
bezierVertex(-5, 35, -5, 30, 0, 40);
vertex(0, 40);
bezierVertex(5, 35, 5, 30, 10, 29);
triangle(8, 27, 12, 26, 13, 30);
// line (-14, 30, -12, 29);
endShape();
pop();
// draw waves
drawWaves (0, 0);
//draw files
for (var i = 0; i < nPoints; i++) {
push();
translate(xPos[i], yPos[i]);
beginShape();
fill(255, 255, 255, 50);
stroke(38, 70, 83);
strokeWeight(0.5);
vertex(14, -10);
bezierVertex(14, -4, 15, -6, 17, -5);
vertex(17, -5);
vertex(40, -5);
vertex(40, 0);
vertex(0, 0);
vertex(0, -10);
vertex(14, -10);
endShape();
fill(255, 255, 255, 50);
stroke(38, 70, 83);
rect(0, 0, 40, 20, 5);
fill("white");
rect(5, -2, 28, 2, 5);
pop();
}
// shellT is because of how you calculate xoff as a
// function of x in line 80
// shellY is a copy of line 80
var shellX = 100;
var shellT = shellX / 10 * 0.05;
var shellY = map(noise(shellT, yoff), 0, 0.5, 200, 300);
var darkpink= "219, 162, 164";
// drawSeashell(shellX, shellY + 20, 0.5, "coral");
push();
drawSeashell2(shellX, shellY, 1 / 2, darkpink);
// drawSeashell2(shellX+700, shellY-50, 1 / 2, darkpink);
drawSeashell(shellX+ 500, shellY - 100, 1, "lightpink");
// drawSeashell(shellX2, shellY+ 40, 0.5, "coral")
pop();
drawHand();
}
//------------------------------------------
function drawHand() {
//if the hands exist in the video
if (handsfree.data.hands) {
if (handsfree.data.hands.multiHandLandmarks) {
//get the associated data points
var landmarks = handsfree.data.hands.multiHandLandmarks;
var nHands = landmarks.length;
//draw the first hand
if (nHands > 0) {
var hand = landmarks[0];
var rescaledHand = rescaleHand(hand);
drawCreature(rescaledHand, "blue");
}
if (showPoints) {
drawDebugPoints(landmarks);
}
}
}
}
function drawCreature(hand, critterColor) {
noStroke();
var pt12 = hand[12];
var pt16 = hand[16];
var pt8 = hand[8];
var pt4 = hand[4];
var pt1 = hand[1];
var pt0 = hand[0];
var pt17 = hand[17];
var pt20 = hand[20];
//insides
var pt5 = hand[5];
var pt9 = hand[9];
var pt13 = hand[13];
var pt2 = hand[2];
var pt14 = hand[14];
var pt11 = hand[11];
var pt18 = hand[18];
var pt3= hand[3];
var starfishtopX = (pt12.x + pt16.x) / 2;
var starfishtopY = (pt12.y + pt16.y) / 2;
var starfishleftX = (pt8.x + pt4.x) / 2;
var starfishleftY = (pt8.y + pt4.y) / 2;
var starfishleftbX = (pt1.x);
var starfishleftbY = (pt1.y);
var starfishrightbX = (pt0.x + pt17.x) / 2;
var starfishrightbY = (pt0.y + pt17.y) / 2;
var starfishrightX = (pt20.x);
var starfishrightY = (pt20.y);
var bottomvertexX = (pt1.x + pt13.x) / 2;
var bottomvertexY = (pt1.y + pt13.y) / 2;
beginShape();
fill(248, 129, 112);
vertex(starfishtopX, starfishtopY);
vertex((pt5.x + pt9.x) / 2, (pt5.y + pt9.y) / 2);
vertex(starfishleftX, starfishleftY + 15);
vertex(pt2.x - 30, pt2.y - 40);
vertex(starfishleftbX, starfishleftbY);
vertex(bottomvertexX - 10, bottomvertexY);
vertex(starfishrightbX - 40, starfishrightbY + 30);
vertex(pt17.x + 5, pt17.y + 5);
vertex(starfishrightX - 10, starfishrightY + 35);
vertex(pt13.x - 5, pt13.y - 5);
vertex(starfishtopX, starfishtopY);
endShape();
drawEyeballs(pt5.x - 25, pt5.y - 15);
drawEyeballs(pt5.x - 60, pt5.y - 15);
drawCircles (pt20.x + 5, pt20.y +45, 8);
drawCircles (pt18.x+5, pt18.y+12, 10);
drawCircles (pt17.x+5, pt17.y-5, 12);
drawCircles (starfishleftX-20, starfishleftY+25, 8);
drawCircles (pt5.x+10, pt5.y+5, 10);
drawCircles (pt5.x-10, pt5.y+15, 12);
drawLips (pt9.x-25, pt9.y+5);
}
function drawDebugPoints(landmarks) {
var nHands = landmarks.length;
fill("black");
noStroke();
for (var h = 0; h < nHands; h++) {
for (var i = 0; i <= 20; i++) {
var px = landmarks[h][i].x;
var py = landmarks[h][i].y;
px = map(px, 0, 1, width, 0);
py = map(py, 0, 1, 0, height);
text(i, px + 5, py);
circle(px, py, 10);
}
}
}
//YOU DONT NEED TO KNOW HOW THIS WORKS
function rescaleHand(hand) {
//here we change the values of each
//of the objects in the array
//to be from 0 to width or height instead of 0 to 1
//you can mostly ignore how this works, but know
//that it remaps the values of the hand points to
//fit better within the p5 canvas
//the Array.map function IS NOT THE SAME AS THE p5 map function
return hand.map(
function(point) {
return {
x: map(point.x, 0, 1, width, 0),
y: map(point.y, 0, 1, 0, height)
}
});
}
function mousePressed() {
xPos[nPoints] = mouseX; // add new value to the end of the array
yPos[nPoints] = mouseY; // add new value to the end of the array
nPoints++;
}
function drawSeashell(x, y, z, col) {
translate(x, y);
scale(1);
push();
beginShape();
fill(col);
vertex(0, 0);
bezierVertex(-10, 0, -12, -4, -30, -12);
vertex(-30, -12);
bezierVertex(-36, -25, -25, -20, -25, -21);
vertex(-25, -21);
bezierVertex(-31, -34, -20, -29, -20, -30);
vertex(-20, -30);
bezierVertex(-26, -43, -15, -38, -15, -39);
vertex(-15, -39);
bezierVertex(-16, -52, -5, -47, -5, -44);
vertex(-5, -44);
bezierVertex(-5, -52, 6, -47, 6, -44);
noStroke();
vertex(0, 0);
bezierVertex(10, 0, 12, -4, 30, -12);
vertex(30, -12);
bezierVertex(36, -25, 25, -20, 25, -21);
vertex(25, -21);
bezierVertex(31, -34, 20, -29, 20, -30);
vertex(20, -30);
bezierVertex(26, -43, 15, -38, 15, -39);
vertex(15, -39);
bezierVertex(16, -52, 5, -47, 5, -44);
vertex(5, -44);
bezierVertex(5, -52, 6, -47, 6, -44);
endShape();
pop();
stroke("White");
strokeWeight(1);
line(0, 0, -25, -21);
line(0, 0, -20, -30);
line(0, 0, -15, -39);
line(0, 0, -5, -44);
line(0, 0, 6, -44);
line(0, 0, 25, -21);
line(0, 0, 20, -30);
line(0, 0, 15, -39);
}
function drawSeashell2(x, y, z, col) {
push();
stroke(10);
translate(x, y);
scale(z);
for (var i = 0; i < 200; i++) {
push();
rotate(i / 6);
scale(i / 1700);
fill(col);
rect(0, 10, 80, 500);
pop();
}
}
function drawEyeballs(x, y) {
noStroke();
fill("black");
circle(x, y, 15);
fill("white");
circle(x, y, 3);
circle(x - 4, y - 3, 5);
circle(x - 3, y + 2, 2);
}
function drawCircles(x, y, r){
// strokeWeight(5)
fill (251, 162, 135);
circle (x, y, r);
}
function drawLips(x, y){
fill ("black");
rect (x, y, 25, 10, 5);
fill ("pink");
rect (x, y+5, 10, 5, 3);
}
function drawWaves (k, z){
push();
beginShape();
translate (k, z);
noStroke();
var xoff = 0
for (var x = 0; x <= width; x += 10) {
var y = map(noise(xoff, yoff), 0, 0.5, 200, 300);
fill(38, 70, 83);
vertex(x, y);
// fill("white")
xoff += 0.05;
}
// increment y dimension for noise
yoff += 0.01;
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
pop();
}