how to perform the movement of third image diagonally till the intersection of the two images
var pic1;
var pic2;
var pic3;
let posX=0
let posY=0
const rightwall=350;
function preload(){
pic1=loadImage("5.png")
pic2=loadImage("iron.jpg")
pic3=loadImage("slagmetal.jpg")
}
function setup() {
createCanvas(600, 600);
}
function draw() {
background(220);
text(mouseX + "," + mouseY, 20, 20);
img1=image(pic1, 300, 0, 150, 200)
img2=image(pic2, posX, 50, 100, 100)
img3=image(pic3, 0, 400, 200, 150)
posX=constrain(posX+1,0,rightwall-50)
posY+=1;
}
how can i move the third image vertically upwards at the point where the wall is
Well you could apply something like this for the collision:
this is how you could do it in your case:
let images = [pic1, pic2, pic3 ... ]
for(let img of images){ // of is a bit weird but it basically just loops thru an array by itself and throws back the array item,
// so for(let i = 0; i < array.length; i ++)
// array[i] = "yes" // array of i equals yes (i think)
// or for(let someString of array)
// someString = "yes" // someString equals yes
if (x < img.x + img.width &&
x + w > img.x &&
y < img.y + img.height &&
y + h > img.y) {
// cool when collided stuff yeah! ...
}
} // this is slightly changed, but still from the mdn page (rect w rect collision)
// also:
// since img(pic1, pic2 ... ) is an object/class it has a .width and a .height variable, same with canvases ...
class p6Image{
constructor(){
this.width = "Yeah!"
this.height = "idk"
this.pixels = ["r ed", "g reen", "b lue", ":( (a lpha)"]
// and some other stuff like this.pixelDensity ...
}
}
function loadp6Image(path){
// path stuff & blob stuff & so on
return new p6Image()
}
let cat = loadp6Image("_catzzzzzzzz/cats/cat.png")