xxxxxxxxxx
366
// copying to clipboard solution from here: https://openprocessing.org/sketch/1034949/
// global variables
let modelHand;
let thumbTip;
let indexTip;
let middleTip;
let ringTip;
let pinkyTip;
let locations = [
[36, 323],
[126, 130],
[205, 94],
[275, 145],
[336, 228],
]; // stores keypoint coordinates
// let pointColors = ["red", "orange", "pink", "green", "blue"];
let ml5Color = "#a256ff";
let pointColors = [ml5Color, ml5Color, ml5Color, ml5Color, ml5Color];
let keyPointObjs = []; // stores all the keyPointObjs made from KeyPointObj class
let rightPanelX = 0;
let rightPanelY = 20;
let selectedString = ""
let buttonBarX = 100
let buttonBarY = 600
// sketch and p5 functions
let resultPoints = {
// TODO Change all places using this to instead use the selector attrib of the keyPointObj class
thumbTip: "result[0].thumb_tip",
indexTip: "result[0].index_finger_tip",
middleTip: "result[0].middle_finger_tip",
ringTip: "result[0].ring_finger_tip",
pinkyTip: "result[0].pinky_finger_tip",
// add in rest and get correct selectors for handpose sketches
};
function preload() {
modelHand400 = loadImage("modelImages/modelHand400.png");
modelHand2 = loadImage("modelImages/modelHand2.png");
//frameRate(10);
}
function setup() {
noStroke();
canvas = createCanvas(900, 700);
setLocations(21, 0); // these vals should be roughly equal to the ones for translateSkeleton
initiateKeypointObjs();
//fakeButton()
}
function draw() {
background("#f0f0f0");
translateSkeleton(20, 0);
drawEmptyPoints();
drawResultContainer();
noStroke();
textFont("Inconsolata");
// drawCurrentMouseCoords()
noStroke()
fakeButtonSimple()
drawButtonBar(buttonBarX, buttonBarY)
for (let i = 0; i < keyPointObjs.length; i++) {
keyPointObjs[i].drawCircle();
}
mouseOver();
setAndDisplaySelected();
}
function mousePressed() {
for (let i = 0; i < keyPointObjs.length; i++) {
keyPointObjs[i].clicked(mouseX, mouseY);
}
if (dist(mouseX, mouseY,825, 595) <= 20) {
//changes the number of coins
copyToClipboard(selectedString)
console.log(selectedString)
}
}
function mouseOver() {
for (let i = 0; i < keyPointObjs.length; i++) {
keyPointObjs[i].hovering(mouseX, mouseY);
}
if (dist(mouseX, mouseY,825 + rightPanelX, 575 + rightPanelY) <= 20){
textSize(12);
//fill("white"); // text color on hover
fill("black");
text("copy to clipboard!",700 + rightPanelX, 580 + rightPanelY);
noStroke();
}
}
//utility functions below
function setAndDisplaySelected() {
selectedString = "function drawKeyPoints(result) {\n\n";
selectedString += ` //set vars for each selected key point\n`;
for (let i = 0; i < keyPointObjs.length; i++) {
if (keyPointObjs[i].selected) {
selectedString += ` ${keyPointObjs[i].id} = ${keyPointObjs[i].selector} \n`;
// selectedString += "\n"
//console.log(keyPointObjs[i].selector)
}
}
//selectedString += ` .... \n` // add lines here for the rest of the standard drawKeypoints function
selectedString += ` fill(0, 255, 0);\n noStroke();\n\n`;
// write in the circle finction
for (let i = 0; i < keyPointObjs.length; i++) {
if (keyPointObjs[i].selected) {
selectedString += ` //draw a circle at ${keyPointObjs[i].id}'s x&y coords!\n`;
selectedString += ` circle(${keyPointObjs[i].id}.x, ${keyPointObjs[i].id}.y, 10);\n\n`;
// selectedString += "\n"
//console.log(keyPointObjs[i].selector)
}
}
selectedString += `}`;
//circle(keypoint.x, keypoint.y, 10);
// draw function string content to right panel
textSize(15);
fill("black");
text(selectedString, rightPanelX + 475, rightPanelY + 80);
}
function hoverCoords(keyPointSelector) {
// change this name to be for making the interactive hover results
//code for finding coords
fill(255, 60, 100);
//text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);
fill("#d4c8bb");
//rect(mouseX + 20, mouseY -60, 250, 60, 20)
//ellipse(mouseX + 65, mouseY - 30, 120, 50);
textSize(12);
//fill("white"); // text color on hover
fill("black");
text(keyPointSelector, mouseX + 25, mouseY - 10);
noStroke();
}
function drawEmptyPoints() {
// instead of drawing a bunch of white ellipses in the else statement of the drawCircle function inside the keyPointsObj class, use this to return the diagram to have empty circles when unhovering
for (let curr_point = 0; curr_point < locations.length; curr_point++) {
fill(pointColors[curr_point]);
//console.log(point);
// console.log(locations[curr_point])
// console.log(locations[curr_point][0])
ellipse(locations[curr_point][0], locations[curr_point][1], 27, 27);
//fill("white")
drawDeselect();
}
}
function drawDeselect() {
for (let curr_point = 0; curr_point < locations.length; curr_point++) {
fill("#f0f0f0");
noStroke();
ellipse(locations[curr_point][0], locations[curr_point][1], 20, 20);
}
}
function initiateKeypointObjs() {
keyPointObjs.push(
new keyPointObj(
locations[0][0],
locations[0][1],
"thumbTip",
false,
false,
pointColors[0],
10,
"result[0].thumb_tip"
)
);
keyPointObjs.push(
new keyPointObj(
locations[1][0],
locations[1][1],
"indexTip",
false,
false,
pointColors[1],
10,
"result[0].index_finger_tip"
)
);
keyPointObjs.push(
new keyPointObj(
locations[2][0],
locations[2][1],
"middleTip",
false,
false,
pointColors[2],
10,
"result[0].middle_finger_tip"
)
);
keyPointObjs.push(
new keyPointObj(
locations[3][0],
locations[3][1],
"ringTip",
false,
false,
pointColors[3],
10,
"result[0].ring_finger_tip"
)
);
keyPointObjs.push(
new keyPointObj(
locations[4][0],
locations[4][1],
"pinkyTip",
false,
false,
pointColors[4],
10,
"result[0].pinky_finger_tip"
)
);
}
function drawResultContainer() {
fill("white");
rect(
width / 2 + rightPanelX - 10,
40 + rightPanelY,
modelHand400.width + 15,
modelHand400.height - 55,
20
);
}
function translateSkeleton(x, y) {
//rect(-5+x, 40+y, modelHand400.width + 15+x, modelHand400.height + 15 + y, 20);
// image(modelHand400, 0+x, 50+y, modelHand400.width, modelHand400.height);
image(modelHand2, 0 + x, 50 + y, modelHand2.width, modelHand2.height);
}
function setLocations(x, y) {
// for(let i=0; i<locations.length;i++){
// locations[i] = [locations[i[0]+x], locations[i[0]+y]]
locations = [
[38 + x, 310 + y],
[126 + x, 130 + y],
[205 + x, 94 + y],
[275 + x, 145 + y],
[336 + x, 228 + y],
];
}
class keyPointObj {
constructor(x, y, id, selected, hovered, color, r, selector) {
this.id = id;
this.selected = selected;
this.hovered = hovered;
this.color = color;
this.x = x;
this.y = y;
this.r = r;
this.selector = selector;
}
drawCircle() {
if (this.selected || this.hovered) {
fill(this.color);
ellipse(this.x, this.y, this.r * 2 + 1, this.r * 2 + 1);
} else {
// fill("white");
// ellipse(this.x, this.y, this.r * 2, this.r * 2);
}
}
// class function to control what happens when obj instance is clicked
clicked(px, py) {
let d = dist(px, py, this.x, this.y);
if (d < this.r) {
this.selected = !this.selected;
this.drawCircle();
console.log(resultPoints.thumbTip);
setAndDisplaySelected();
}
}
hovering(px, py) {
let d = dist(px, py, this.x, this.y);
if (d < this.r) {
this.hovered = true;
//console.log("hovering");
hoverCoords(resultPoints[this.id]);
} else {
this.hovered = false;
}
this.drawCircle();
}
}
// testing testing belowww
function copyToClipboard(text) {
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
}
function fakeButton(){
playButton = createButton("▷");
//playButton.position(310, 400);
playButton.position(600, 600)
//playButton.mouseClicked(togglePlay);
//playButton.mousePressed(copyToClipboard("works"))
// playButton.mousePressed(logTest)
playButton.style("background-color", "white");
// playButton.size(200, 100);
playButton.size(100, 100);
playButton.style("font-family", "Fredoka One");
playButton.style("color", "black");
playButton.style("font-size", "38px");
playButton.style("border-color", "grey");
playButton.style("border-width", "2px"); // get rid of border/stroke
playButton.style("border-radius", "50px");
}
function fakeButtonSimple(){
fill("#a256ff")
ellipse(825, 595, 20, 20)
}
function drawButtonBar(buttonBarX, buttonBarY){
push()
translate(buttonBarX, buttonBarY)
fill("#a256ff")
rect(0 ,0 , 60, 20, 4)
rect(80, 0, 60, 20, 4)
rect(160, 0, 60, 20, 4)
pop()
}
function logTest(){
console.log("testing")
}
// function keyPressed() {
// if (keyCode === LEFT_ARROW) {
// copyToClipboard("Hello World")
// }
// }
function drawCurrentMouseCoords(){
fill(255, 60, 100);
text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);
stroke(0);
noFill();
}
// copyToClipboard("Hello World") // Then put this somewhere and it will copy it!