This is my first week playing with P5js and Processing so be gentle.
I’ve got the following P5js code where I’m looking at touch values. By pressing multi-points on a touch screen brings up more circles anchored to a central position.
What I’d like to know is how do I call the x value for object 1 that’s printed in the console? or y value for object 0? how would i state them in the code?
What I’d like to do is use these values to change the dimensions of a shape in the middle of the screen, like something in object 0 driving the height of the shape or object 1 on the the x or y values driving strokeWeight or colour . However I’m in my first week and completely lost to how to use these values in the code.
function setup() {
createCanvas(windowWidth, windowHeight);
background(200);
}
function draw() {
background(255);
fill(255, 0, 0);
strokeWeight(0)
for (var i = 0; i < touches.length; i++) {
fill(255);
strokeWeight(3)
ellipse(touches[i].x, touches[i].y, 50, 50);
line(touches[i].x, touches[i].y, windowWidth/2,windowHeight/2);
fill(255);
ellipse(windowWidth/2,windowHeight/2, 10, 10);
print (touches);
}
}
// do this prevent default touch interaction
function mousePressed() {
return false;
}
document.addEventListener('gesturestart', function(e) {
e.preventDefault();
});
Don’t worry, people here are gentle But I want to know if the code is something you wrote or you found somewhere. Because if you wrote it by yourself, perhaps you already know the answer
Basically, the 0th object is touches[0] and the 1st one is touches[1]. And .x and .y can access x and y values. It may be tricky that you need to make sure touches have at least 2 elements; otherwise you will get an error accessing an element.
If you feel lost - I suggest following Dan’s tutorials. I understand you want to achieve what you want, but there is no shortcut especially if you just started.
Thankyou so much for the reply! It’s great to have another set of eyes on this…
Whenever i use touch[1].x for example to drive the size of the shape, it comes up with an error in the console saying ‘TypeError: Cannot read property of ‘x’ of undefined’. Any idea of why this happens?
Thankyou again for your time!
FYI - i’ve mixed projects together to form this so I haven’t directly wrtitten it but trying stuff out!
If you’re going to reference touches[1] you need to make sure that touch.length is greater than or equal to 2 before doing so, or that touches[1] is not undefined:
if (touches.length >= 2) {
print(touches[1].x);
}
Also if you’re going to cross post here and on stack overflow please mention that in both places.
Also note that, as @micuat and @KumuPaul suggested, you need to check touches.length to make sure its value is greater than 1 before you try to access touches[1]. Otherwise, you would be trying to access an element in touches that does not exist.
Check that out, then try this code as an example of using touches along with an if statement to draw a line, provided that there are at least two points:
function setup() {
createCanvas(windowWidth, windowHeight);
background(200);
}
function draw() {
background(255);
strokeWeight(4);
// check touches.length; draw line if there are at least 2 points
if (touches.length >= 2) {
line(touches[0].x, touches[0].y, touches[1].x, touches[1].y);
}
}
// do this to prevent default touch interaction
function mousePressed() {
return false;
}
document.addEventListener("gesturestart", function (e) {
e.preventDefault();
});
As it runs, touch the screen in two places to see a line connecting the two points.
Please ask questions if you do not fully understand the example. After that, you can try to write a script that uses the two points to draw a rectangle instead of a line. That is a little more challenging. The following, from the p5.js Reference, may help:
But I want to know if the code is something you wrote or you found somewhere. Because if you wrote it by yourself, perhaps you already know the answer