391 lines
11 KiB
JavaScript
391 lines
11 KiB
JavaScript
const P = require('p5');
|
|
|
|
const sketch = function (p) {
|
|
let canvas;
|
|
const dMouse = [];
|
|
let closest = 0;
|
|
let isEditMode = true;
|
|
|
|
let fillHSlider, fillSSlider, fillBSlider, fillOSlider;
|
|
let fillHValue, fillSValue, fillBValue, fillOValue;
|
|
let strokeHSlider, strokeSSlider, strokeBSlider, strokeOSlider;
|
|
let strokeHValue, strokeSValue, strokeBValue, strokeOValue;
|
|
|
|
let editButton;
|
|
let saveDrawingButton;
|
|
let indexUoButton;
|
|
let indexDownButton;
|
|
let completeButton;
|
|
let undoButton;
|
|
let deleteButton;
|
|
|
|
let shapes = [
|
|
{
|
|
fill_H: p.random(360),
|
|
fill_S: 50,
|
|
fill_B: 100,
|
|
fill_O: 100,
|
|
stroke_H: p.random(360),
|
|
stroke_S: 50,
|
|
stroke_B: 100,
|
|
stroke_O: 100,
|
|
indices: []
|
|
}
|
|
];
|
|
|
|
let shapeIndex = 0;
|
|
let tParameters;
|
|
let isDraggedOver = false;
|
|
|
|
p.setup = function () {
|
|
canvas = p.createCanvas(cameraWidth, cameraHeight);
|
|
canvas.id('canvas');
|
|
canvas.dragOver(() => {
|
|
isDraggedOver = true;
|
|
});
|
|
canvas.dragLeave(() => {
|
|
isDraggedOver = false;
|
|
});
|
|
|
|
canvas.drop(file => {
|
|
if (file.subtype === 'json') {
|
|
shapes = file.data.shapes;
|
|
shapeIndex = shapes.length - 1;
|
|
isDraggedOver = false;
|
|
} else {
|
|
isDraggedOver = false;
|
|
}
|
|
});
|
|
|
|
p.colorMode(p.HSB, 360, 100, 100, 100);
|
|
|
|
editButton = p.createButton('Edit mode off');
|
|
editButton.mousePressed(p.toggleEdit);
|
|
editButton.class('Buttons');
|
|
editButton.id('editButton');
|
|
|
|
fillHValue = p.createDiv();
|
|
fillHValue.class('valueDisplay');
|
|
fillHSlider = p.createSlider(0, 360, p.random(360), 5);
|
|
fillHSlider.class('Slider');
|
|
|
|
fillSValue = p.createDiv();
|
|
fillSValue.class('valueDisplay');
|
|
fillSSlider = p.createSlider(0, 100, 50, 5);
|
|
fillSSlider.class('Slider');
|
|
|
|
fillBValue = p.createDiv();
|
|
fillBValue.class('valueDisplay');
|
|
fillBSlider = p.createSlider(0, 100, 100, 5);
|
|
fillBSlider.class('Slider');
|
|
|
|
fillOValue = p.createDiv();
|
|
fillOValue.class('valueDisplay');
|
|
fillOSlider = p.createSlider(0, 100, 100, 5);
|
|
fillOSlider.class('Slider');
|
|
|
|
strokeHValue = p.createDiv();
|
|
strokeHValue.class('valueDisplay');
|
|
strokeHSlider = p.createSlider(0, 360, p.random(360), 5);
|
|
strokeHSlider.class('Slider');
|
|
|
|
strokeSValue = p.createDiv();
|
|
strokeSValue.class('valueDisplay');
|
|
strokeSSlider = p.createSlider(0, 100, 50, 5);
|
|
strokeSSlider.class('Slider');
|
|
|
|
strokeBValue = p.createDiv();
|
|
strokeBValue.class('valueDisplay');
|
|
strokeBSlider = p.createSlider(0, 100, 100, 5);
|
|
strokeBSlider.class('Slider');
|
|
|
|
strokeOValue = p.createDiv();
|
|
strokeOValue.class('valueDisplay');
|
|
strokeOSlider = p.createSlider(0, 100, 100, 5);
|
|
strokeOSlider.class('Slider');
|
|
|
|
saveDrawingButton = p.createButton('');
|
|
saveDrawingButton.mousePressed(p.saveDrawing);
|
|
saveDrawingButton.class('imageButtons');
|
|
saveDrawingButton.id('saveDrawingButton');
|
|
|
|
indexUoButton = p.createButton('');
|
|
indexUoButton.mousePressed(p.upIndex);
|
|
indexUoButton.class('imageButtons');
|
|
indexUoButton.id('indexUoButton');
|
|
|
|
indexDownButton = p.createButton('');
|
|
indexDownButton.mousePressed(p.downIndex);
|
|
indexDownButton.class('imageButtons');
|
|
indexDownButton.id('indexDownButton');
|
|
|
|
completeButton = p.createButton('complete');
|
|
completeButton.mousePressed(p.complete);
|
|
completeButton.class('Buttons');
|
|
completeButton.id('completeButton');
|
|
|
|
undoButton = p.createButton('undo');
|
|
undoButton.mousePressed(p.undo);
|
|
undoButton.class('Buttons');
|
|
undoButton.id('undoButton');
|
|
|
|
deleteButton = p.createButton('delete');
|
|
deleteButton.mousePressed(p.deleteDrawing);
|
|
deleteButton.class('Buttons');
|
|
deleteButton.id('deleteButton');
|
|
|
|
tParameters = {
|
|
fill_H: fillHSlider.value(),
|
|
fill_S: fillSSlider.value(),
|
|
fill_B: fillBSlider.value(),
|
|
fill_O: fillOSlider.value(),
|
|
stroke_H: strokeHSlider.value(),
|
|
stroke_S: strokeSSlider.value(),
|
|
stroke_B: strokeBSlider.value(),
|
|
stroke_O: strokeOSlider.value()
|
|
};
|
|
|
|
p.textAlign(p.CENTER, p.CENTER);
|
|
p.textSize(24);
|
|
};
|
|
|
|
p.draw = function () {
|
|
p.clear();
|
|
if (detections !== undefined) {
|
|
if (detections.faceLandmarks !== undefined && detections.faceLandmarks.length >= 1) {
|
|
p.drawShapes();
|
|
if (isEditMode === true) {
|
|
p.faceMesh();
|
|
p.editShapes();
|
|
}
|
|
|
|
if (isDraggedOver === true) {
|
|
p.noStroke();
|
|
p.fill(0, 0, 100, 10);
|
|
p.rect(0, 0, p.width, p.height);
|
|
p.fill(0, 0, 100);
|
|
// p.text('Drag your drawing here', p.width / 2, p.height / 2);
|
|
}
|
|
}
|
|
}
|
|
|
|
fillHValue.html('fill hue: ' + fillHSlider.value());
|
|
fillSValue.html('fill saturation: ' + fillSSlider.value());
|
|
fillBValue.html('fill brightness: ' + fillBSlider.value());
|
|
fillOValue.html('fill opacity: ' + fillOSlider.value());
|
|
|
|
strokeHValue.html('stroke hue: ' + strokeHSlider.value());
|
|
strokeSValue.html('stroke saturation: ' + strokeSSlider.value());
|
|
strokeBValue.html('stroke brightness: ' + strokeBSlider.value());
|
|
strokeOValue.html('stroke opacity: ' + strokeOSlider.value());
|
|
};
|
|
|
|
p.faceMesh = function () {
|
|
p.stroke(0, 0, 100);
|
|
p.strokeWeight(3);
|
|
|
|
p.beginShape(p.POINTS);
|
|
for (let i = 0; i < detections.faceLandmarks[0].length; i++) {
|
|
const x = detections.faceLandmarks[0][i].x * p.width;
|
|
const y = detections.faceLandmarks[0][i].y * p.height;
|
|
p.vertex(x, y);
|
|
|
|
const d = p.dist(x, y, p.mouseX, p.mouseY);
|
|
dMouse.push(d);
|
|
}
|
|
p.endShape();
|
|
|
|
const minimum = p.min(dMouse);
|
|
closest = dMouse.indexOf(minimum);
|
|
|
|
p.stroke(0, 100, 100);
|
|
p.strokeWeight(10);
|
|
p.point(detections.faceLandmarks[0][closest].x * p.width, detections.faceLandmarks[0][closest].y * p.height);
|
|
|
|
dMouse.splice(0, dMouse.length);
|
|
};
|
|
|
|
p.mouseClicked = function () {
|
|
if (p.mouseX >= 0 && p.mouseX <= p.width) {
|
|
if (p.mouseY >= 0 && p.mouseY <= p.height) {
|
|
if (isEditMode === true) {
|
|
shapes[shapeIndex].indices.push(closest);
|
|
console.log(shapes);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
p.drawShapes = function () {
|
|
for (let s = 0; s < shapes.length; s++) {
|
|
p.fill(shapes[s].fill_H, shapes[s].fill_S, shapes[s].fill_B, shapes[s].fill_O);
|
|
p.stroke(shapes[s].stroke_H, shapes[s].stroke_S, shapes[s].stroke_B, shapes[s].stroke_O);
|
|
p.strokeWeight(3);
|
|
|
|
if (isEditMode === true) {
|
|
if (s === shapeIndex) p.glow('rgba(255, 255, 255, 100)');
|
|
else p.glow('rgba(255, 255, 255, 0)');
|
|
} else if (isEditMode === false) {
|
|
p.glow('rgba(255, 255, 255, 100)');
|
|
}
|
|
|
|
p.beginShape();
|
|
for (let i = 0; i < shapes[s].indices.length; i++) {
|
|
p.vertex(
|
|
detections.faceLandmarks[0][shapes[s].indices[i]].x * p.width,
|
|
detections.faceLandmarks[0][shapes[s].indices[i]].y * p.height
|
|
);
|
|
}
|
|
p.endShape();
|
|
}
|
|
};
|
|
|
|
p.editShapes = function () {
|
|
// --- fill ---
|
|
if (tParameters.fill_H !== fillHSlider.value()) {
|
|
tParameters.fill_H = fillHSlider.value();
|
|
shapes[shapeIndex].fill_H = fillHSlider.value();
|
|
}
|
|
if (tParameters.fill_S !== fillSSlider.value()) {
|
|
tParameters.fill_S = fillSSlider.value();
|
|
shapes[shapeIndex].fill_S = fillSSlider.value();
|
|
}
|
|
if (tParameters.fill_B !== fillBSlider.value()) {
|
|
tParameters.fill_B = fillBSlider.value();
|
|
shapes[shapeIndex].fill_B = fillBSlider.value();
|
|
}
|
|
if (tParameters.fill_O !== fillOSlider.value()) {
|
|
tParameters.fill_O = fillOSlider.value();
|
|
shapes[shapeIndex].fill_O = fillOSlider.value();
|
|
}
|
|
|
|
// --- stroke ---
|
|
if (tParameters.stroke_H !== strokeHSlider.value()) {
|
|
tParameters.stroke_H = strokeHSlider.value();
|
|
shapes[shapeIndex].stroke_H = strokeHSlider.value();
|
|
}
|
|
if (tParameters.stroke_S !== strokeSSlider.value()) {
|
|
tParameters.stroke_S = strokeSSlider.value();
|
|
shapes[shapeIndex].stroke_S = strokeSSlider.value();
|
|
}
|
|
if (tParameters.stroke_B !== strokeBSlider.value()) {
|
|
tParameters.stroke_B = strokeBSlider.value();
|
|
shapes[shapeIndex].stroke_B = strokeBSlider.value();
|
|
}
|
|
if (tParameters.stroke_O !== strokeOSlider.value()) {
|
|
tParameters.stroke_O = strokeOSlider.value();
|
|
shapes[shapeIndex].stroke_O = strokeOSlider.value();
|
|
}
|
|
};
|
|
|
|
p.keyTyped = function () {
|
|
if (p.key === 'e') p.toggleEdit();
|
|
if (p.key === 'c') p.complete();
|
|
if (p.key === 'z') p.undo();
|
|
if (p.key === 'd') p.deleteDrawing();
|
|
if (p.key === 'j') p.saveDrawing();
|
|
};
|
|
|
|
p.toggleEdit = function () {
|
|
isEditMode = !isEditMode;
|
|
|
|
if (isEditMode === true) {
|
|
editButton.html('Edit mode on');
|
|
} else if (isEditMode === false) {
|
|
editButton.html('Edit mode off');
|
|
}
|
|
};
|
|
|
|
p.complete = function () {
|
|
if (shapes[shapes.length - 1].indices.length > 0) {
|
|
if (shapes[shapeIndex].indices.length === 0 && shapes.length > 1) shapes.splice(shapeIndex, 1);
|
|
|
|
shapes.push({
|
|
fill_H: p.random(360),
|
|
fill_S: 50,
|
|
fill_B: 100,
|
|
fill_O: 100,
|
|
stroke_H: p.random(360),
|
|
stroke_S: 50,
|
|
stroke_B: 100,
|
|
stroke_O: 100,
|
|
indices: []
|
|
});
|
|
shapeIndex = shapes.length - 1;
|
|
}
|
|
console.log(shapes);
|
|
};
|
|
|
|
p.undo = function () {
|
|
if (shapes[shapeIndex] !== undefined) {
|
|
if (shapes[shapeIndex].indices.length > 0) shapes[shapeIndex].indices.pop();
|
|
}
|
|
console.log(shapes[shapeIndex].indices);
|
|
};
|
|
|
|
p.deleteDrawing = function () {
|
|
shapes = [
|
|
{
|
|
fill_H: p.random(360),
|
|
fill_S: 50,
|
|
fill_B: 100,
|
|
fill_O: 100,
|
|
stroke_H: p.random(360),
|
|
stroke_S: 50,
|
|
stroke_B: 100,
|
|
stroke_O: 100,
|
|
indices: []
|
|
}
|
|
];
|
|
shapeIndex = 0;
|
|
console.log(shapes);
|
|
};
|
|
|
|
p.saveDrawing = function () {
|
|
const s = { shapes };
|
|
p.saveJSON(s, 'untitled_shapes.json');
|
|
};
|
|
|
|
p.keyPressed = function () {
|
|
if (p.keyCode === p.UP_ARROW) p.upIndex();
|
|
else if (p.keyCode === p.DOWN_ARROW) p.downIndex();
|
|
};
|
|
|
|
p.upIndex = function () {
|
|
if (shapes[shapeIndex] !== undefined) {
|
|
if (shapes[shapeIndex].indices.length === 0 && shapes.length > 1) shapes.splice(shapeIndex, 1);
|
|
if (shapeIndex < shapes.length - 1) shapeIndex++;
|
|
p.resetSliders();
|
|
console.log(shapeIndex);
|
|
}
|
|
};
|
|
|
|
p.downIndex = function () {
|
|
if (shapes[shapeIndex] !== undefined) {
|
|
if (shapes[shapeIndex].indices.length === 0 && shapes.length > 1) shapes.splice(shapeIndex, 1);
|
|
if (shapeIndex > 0) shapeIndex--;
|
|
p.resetSliders();
|
|
console.log(shapeIndex);
|
|
}
|
|
};
|
|
|
|
p.resetSliders = function () {
|
|
fillHSlider.value(shapes[shapeIndex].fill_H);
|
|
fillSSlider.value(shapes[shapeIndex].fill_S);
|
|
fillBSlider.value(shapes[shapeIndex].fill_B);
|
|
fillOSlider.value(shapes[shapeIndex].fill_O);
|
|
strokeHSlider.value(shapes[shapeIndex].stroke_H);
|
|
strokeSSlider.value(shapes[shapeIndex].stroke_S);
|
|
strokeBSlider.value(shapes[shapeIndex].stroke_B);
|
|
strokeOSlider.value(shapes[shapeIndex].stroke_O);
|
|
};
|
|
|
|
p.glow = function (glowColor) {
|
|
p.drawingContext.shadowOffsetX = 0;
|
|
p.drawingContext.shadowOffsetY = 0;
|
|
p.drawingContext.shadowBlur = 20;
|
|
p.drawingContext.shadowColor = glowColor;
|
|
};
|
|
};
|
|
|
|
const myp5 = new P(sketch);
|