Faking Mouse Interaction

Using JavaScript with Hype
23

Here is a followup to do intersection observering using Matter.js included in the Hype Runtime. It supports shapes and polygons.

hypeDocument.queryIntersections = function(sourceSelector, targetSelectors) {

	var sceneElm = document.getElementById(hypeDocument.currentSceneId());
	var sourceElm = sceneElm.querySelector(sourceSelector);

	var cursorBody = hypeDocument.getElementProperty(sourceElm, 'physics-body');
	if (cursorBody) {
		var trackElms = sceneElm.querySelectorAll(targetSelectors);
		var trackBodies = [];
		trackElms.forEach(function(elm){
			var elmBody = hypeDocument.getElementProperty(elm, 'physics-body');
			if (elmBody) {
				trackBodies.push(elmBody);
			} else {
				console.log('target '+elm.id+' must be static Physics enabled');
			}
		});
		var collisions = Matter.Query.collides(cursorBody, trackBodies);
		if (collisions.length) {
			return collisions.map(function(collision){
				var isB = sourceElm.id == collision.bodyB.elementId;
				return document.getElementById((isB? collision.bodyA : collision.bodyB).elementId);
			});
		}
	} else {
		console.log('sourceSelector must be static Physics enabled', elm);
	}
	return [];
}

You can then check if something (singular) is intersecting with other elements (plural) and use whatever you want to trigger the check (setInterval, Mutation Observer, requestAnimation frame etc.).

setInterval(function(){
	var intersectingElms = hypeDocument.queryIntersections('.cursor', '.obstacle');
	intersectingElms.forEach(function(elm){
		// do something with them
		console.log(elm);
	});
}, 200);

Only thing it needs the participants to be static Physics objects and inside the same scope (scene).

Download Example:
drag_intersection_matter.hype.zip (28,4 KB)

PS: Apart from having many solutions to a problem this thread is a testament to us all having free time on our hands. Hope everybody is doing fine! :v:

Update: 11. September 2020 … corrected the example and a small error in the detection.

4 Likes