尝试在 p5.js 中使用 createGraphics() 和眼动仪，但它不起作用
Posted
技术标签:
【中文标题】尝试在 p5.js 中使用 createGraphics() 和眼动仪，但它不起作用【英文标题】：Trying to use createGraphics() in p5.js along with eye tracker and it isn't working 【发布时间】：2020-08-30 06:17:30 【问题描述】：我仍然是一个初学者编码器，我正在制作一个项目，其中两个客户的眼睛位置（通过套接字联网）在画布上的相同位置着陆时会播放它着陆的音符。我仍处于该项目的开始阶段，目前，我正在尝试在画布上绘制客户的眼睛位置，同时在 p5 渲染器对象上绘制音符网格。我已经对网格进行了编码，以便在鼠标单击的位置添加一个椭圆。网格已成功绘制，但我不再可以与网格交互，即单击时添加或删除椭圆。 所以现在我对如何解决这个问题有点迷茫。在 p5.renderer 上绘制眼睛之前，我还尝试了 clear() 函数来消除轨迹，但它没有用。 所以我有两个问题1）试图摆脱眼睛位置轨迹和2）使用鼠标按下功能创建图形在下面的代码中不起作用。
// NETWORKED + EYE VARIABLES
let socket = io();
let ctracker;
let clients = ;
let data = ;
let w = 1200;
let h = 600;
let leftEyeX, leftEyeY, rightEyeX, rightEyeY;
let cnvPosX;
let cnvPosY;
/// SOUND VARIABLES //
let bell, bell1, bell2, bell3; // contains sound source
let bPat, b1Pat, b2Pat; // an array of no.s that we can use to make beats // 1 = on, 0= off
let bPhrase, b1Phrase, b2Phrase; // defines how the beat pattern is interpreted
let part; // attach all the instruments to the to make it into a machine i.e on/off
let bpmCTRL;
let beatLength; // how big is sequence before it starts looping
let cellSize;
let cnv;
let overlayCnv;
let bg, largeText,smallText, MleftEye, MRightEye;
let row1 =[];
function preload()
// background
bg = loadImage("https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2Fdaw-bg.png?v=1589319965142");
//main game instruction
largeText = loadImage("https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2FAsset%2015.png?v=1589381930278");
// small game description
smallText = loadImage("https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2FAsset%203.png?v=1589381926354");
//sound files
bell = loadSound (
"https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2F203490__tesabob2001__g-5.mp3?v=1589326854551",
() =>
);
bell1 = loadSound (
"https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2F203485__tesabob2001__c5.mp3?v=1589326924689",
() =>
);
bell2 = loadSound (
"https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2F203489__tesabob2001__f5.mp3?v=1589326917439",
() =>
);
bell3 = loadSound (
"https://cdn.glitch.com/e024d4d5-2c9e-473c-acd3-c2e01a1ef9cd%2F203491__tesabob2001__g-4.mp3?v=1589326867294", () =>
);
;
function setup()
cnvPosX = 120;
cnvPosY = 50;
// setup camera capture
var videoInput = createCapture(VIDEO);
videoInput.size(w,h);
videoInput.position(cnvPosX, cnvPosY);
videoInput.hide();
// setup canvas
ctracker = new clm.tracker();
ctracker.init(pModel);
ctracker.start(videoInput.elt);
noStroke();
socket.on('getUpdate', function(data)
clients[data.name] = data;
);
cnv = createCanvas(w, h);
cnv.position(cnvPosX,cnvPosY)
overlayCnv = createGraphics(w,h);
// overlayCnv.position(cnvPosX,cnvPosY);
overlayCnv.mousePressed(canvasPressed);
beatLength = 6;
cellSize = 200;
numOfRows = 3;
// canvas for eyes
// basic structure of a DAW
// time is a sceduled delay in note play time
bPat = [0, 0, 0, 0, 0, 0];
b1Pat = [0, 0, 0, 0, 0, 0];
b2Pat = [0, 0, 0, 0, 0, 0];
function selectSong()
row1 = [bell3, bell];
selected = row1[floor(random(2))];
console.log(selected);
selected.play();
// name, callback, array
bPhrase = new p5.Phrase(
"bell",
time =>
selectSong()
,
bPat
);
b1Phrase = new p5.Phrase(
"bell1",
time =>
// make a variable to go there insiead of bell -> use random function to give a value to the variable
bell1.play(time); ,
b1Pat
);
b2Phrase = new p5.Phrase(
"bell2",
time =>
bell2.play(time);
,
b2Pat
);
part = new p5.Part();
part.addPhrase(bPhrase);
part.addPhrase(b1Phrase);
part.addPhrase(b2Phrase);
bpmCTRL = createSlider(30, 200, 60, 1); // smallest val, highest val, starting val, incremental val
bpmCTRL.position(10, 10); // x, y
bpmCTRL.input(() =>
part.setBPM(bpmCTRL.value());
);
part.setBPM("60");
drawMatrix();
///// user interact
function canvasPressed()
console.log("mousepressed")
let rowClicked = floor(numOfRows * (mouseY / height));
let columnClicked = floor(beatLength * (mouseX / width));
if (rowClicked === 0)
console.log("first row");
bPat[columnClicked] = +!bPat[columnClicked];
else if (rowClicked === 1)
console.log("second row");
b1Pat[columnClicked] = +!b1Pat[columnClicked];
else if (rowClicked === 2)
console.log("third row");
b2Pat[columnClicked] = +!b2Pat[columnClicked];
drawMatrix();
/// drawing the grid
function drawMatrix()
overlayCnv.background(bg);
//line
overlayCnv.stroke(25,40,100);
overlayCnv.strokeWeight(2);
for (let i = 0; i < beatLength + 1; i++)
overlayCnv.line(i * cellSize, 0, i * cellSize, height);
for (let i = 0; i < numOfRows + 1; i++)
overlayCnv.line(0, (i * height) / numOfRows, width, (i * height) / numOfRows);
//circle
overlayCnv.noStroke();
overlayCnv.fill(25,40,100);
for (let i = 0; i < beatLength; i++)
if (bPat[i] === 1)
overlayCnv.ellipse(i * cellSize + 0.5 * cellSize, 100, 50);
if (b1Pat[i] === 1)
overlayCnv.ellipse(i * cellSize + 0.5 * cellSize, 300, 40);
if (b2Pat[i] === 1)
overlayCnv.ellipse(i * cellSize + 0.5 * cellSize, 500, 30);
image(overlayCnv, 0, 0);
function draw()
let positions = ctracker.getCurrentPosition();
for (let i = 0; i < positions.length; i++)
// draw ellipse at each position point
leftEyeX = positions[27][0];
leftEyeY = positions[27][1];
rightEyeX = positions[32][0];
rightEyeY = positions[32][1];
// ellipse(positions[i][0], positions[i][1], 8, 8);
fill(255);
ellipse(rightEyeX, rightEyeY, 18, 18);
fill(255);
ellipse(leftEyeX, leftEyeY, 18, 18);
// formatting each point into a dict entry to send over socket io
data[(27).toString() + "." + '0'] = leftEyeX;
data[(27).toString() + "." + '1'] = leftEyeY;
data[(32).toString() + "." + '0'] = rightEyeX;
data[(32).toString() + "." + '1'] = rightEyeY;
// image(eyeCnv,0,0); // x, y relative to canvas x & y
/////// conditional to check if all files are loaded
function keyPressed()
if (key === " ")
if (bell.isLoaded() && bell1.isLoaded() && bell2.isLoaded())
if (!part.isPlaying)
part.loop();
else
part.stop();
else
console.log("relax");
【问题讨论】：
【参考方案1】：没关系，错误只是背景一直在 draw() 中绘制
【讨论】：
以上是关于尝试在 p5.js 中使用 createGraphics() 和眼动仪，但它不起作用的主要内容，如果未能解决你的问题，请参考以下文章