Develop Reference

pts.js 'NS_ERROR_NOT_AVAILABLE: ' Error when trying to use an image for a particle

I'm wanting to load the same an image for particles in pts.js.
When I try to use a local image from my assets folder I get the error "NS_ERROR_NOT_AVAILABLE:" in the console.
I read somewhere this may be due to the image trying to be used before it has even been loaded in...
I've also tried using an external link to some other image rather than a local one and that works. So not sure what is happening with my local files.
EDIT:
I just tried this on chrome rather than firefox and I'm getting a new and more detailed error message.
"Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state." in pts.min.js:6.
Still not sure exactly what is wrong.
Pts.quickStart('#hello', 'transparent')
var world
// Loading in image to be used
var myImg = new Image()
myImg.src = '/assets/img/myImage.png'
space.add({
start: (bound, space) => {
// Create world and 100 random points
world = new World(space.innerBound, 1, 0)
let pts = Create.distributeRandom(space.innerBound, 20)
// Create particles and hit them with a random impulse
for (let i = 0, len = pts.length; i < len; i++) {
let p = new Particle(pts[i]).size(i === 0 ? 10 : 20)
p.hit(0, 0)
world.add(p)
}
world.particle(0).lock = true
},
animate: (time, ftime) => {
world.drawParticles((p, i) => {
// Image variable for the particle to be drawn as
form.image(myImg)
})
world.update(ftime)
},
action: (type, px, py) => {
if (type == 'move') {
world.particle(0).position = new Pt(px, py)
}
},
resize: (bound, evt) => {
if (world) world.bound = space.innerBound
}
})
space.bindMouse().bindTouch()
space.play()

For drawing images on canvas, the image needs to be loaded first. You can keep track of it using myImg.addEventListener( 'load', ... ).
Once it's loaded, you can use it in form.image( myImg, ... ) in Pts' animate loop.
Here's a working example based on your code above:
Pts.quickStart( "#pt", "#123" );
//// Demo code starts (anonymous function wrapper is optional) ---
(function() {
var world;
var imgReady = false;
// Loading in image to be used
var myImg = new Image()
myImg.src = 'http://icons.iconarchive.com/icons/icojoy/maneki-neko/256/cat-6-icon.png';
myImg.addEventListener('load', function() {
imgReady = true;
}, false);
space.add( {
start: (bound, space) => {
// Create world and 100 random points
world = new World( space.innerBound, 1, 0 );
let pts = Create.distributeRandom( space.innerBound, 100 );
// Create particles and hit them with a random impulse
for (let i=0, len=pts.length; i<len; i++) {
let p = new Particle( pts[i] ).size( (i===0) ? 30 : 3+Math.random()*space.size.x/50 );
p.hit( Num.randomRange(-50,50), Num.randomRange(-25, 25) );
world.add( p );
}
world.particle( 0 ).lock = true; // lock it to move it by pointer later on
},
animate: (time, ftime) => {
world.drawParticles( (p, i) => {
if (imgReady) {
console.log( p )
form.image(myImg, [p.$subtract( p.radius ), p.$add( p.radius )] );
}
});
world.update( ftime );
},
action:( type, px, py) => {
if (type == "move") {
world.particle( 0 ).position = new Pt(px, py);
}
},
resize: (bound, evt) => {
if (world) world.bound = space.innerBound;
}
});
space.bindMouse().bindTouch();
space.play();
})();

Is it possible to check for a shared border between various shapes in an inline SVG?

I have an inline SVG of a map where each region is drawn as a separate shape. What I'd like to do is get a list of any neighbours that share a border with that shape.
Here is a jsfiddle of what I currently have:
https://jsfiddle.net/kzscxj30/
$( ".map" ).click(function( event ) {
var $mapTarget = $( event.target );
if ($mapTarget.is( "path" )) {
$( ".region" ).attr("class", "region");
$mapTarget.attr("class", "region active");
} else {
return;
}
})
The idea is once a shape is clicked, it adds an 'active' class the shape and a 'neighbor' class to any touching shapes. For example, Region1 is neighbours with Region2 and Region3, so clicking Region1 should add the class 'neighbor' to both Region2 and Region3. Region2 and Region3 are not neighbours with each other, so clicking either would only add the neighbour class to Region1. Region4 is not a neighbour to any other shape, so it would not apply the neighbour class to anything.
I've considered comparing the coordinates of each shape to find a match, but I realised it's possible to have two shapes with a shared border but no shared coordinates.
It's possible this is more of an issue of not knowing how to articulate what I'm looking for!

There is (to my knowledge), no built-in ways to do it no...
Now, you can setup an algorithm yourself to do the check, but it might come a bit computationaly intensive.
As a first step, you'll only check for the Bounding-Boxes of your paths, eliminating all the ones that are not going to hit your path in any way:
function intersectBoxes(bb1, bb2, padding = 0) {
// half padding (we'll add it in every direction of our rects)
const pad = padding / 2;
// helper function to get clean labels
const getCorners = (bb) => ({
left: bb.x - pad,
top: bb.y - pad,
right: bb.x + bb.width + pad,
bottom: bb.x + bb.width + pad,
});
const r1 = getCorners(bb1);
const r2 = getCorners(bb2);
// check intersection
return r1.left <= r2.right &&
r1.right >= r2.left &&
r1.top <= r2.bottom &&
r1.bottom >= r2.top;
}
// usage
intersectBoxes(path1.getBBox(), path2.getBBox(), 2);
// #return Boolean
Once this is done, you can start an heavier check. SVG2 introduces a new isPointInStroke method, but that's currently supported only in a few browsers. So you may need to polyfill it. I didn't found one, so I quickly made a monkey patch instead using the 2DContext equivalent.
With the help of this method, we then only have to grab the x, y coordinates of one of our paths all along its stroke and to call this method repeatedly.
function slowHitCheck(p1, p2) {
// we will walk along the smallest of both paths
const smallest = p1.getTotalLength() < p2.getTotalLength() ? p1 : p2;
const longest = smallest === p1 ? p2 : p1;
const length = smallest.getTotalLength();
let pos = 0;
while(pos < length) {
const pt = smallest.getPointAtLength(pos);
if(longest.isPointInStroke(pt)) return true;
pos += stroke_width;
}
return false;
}
$(".map").click(function(event) {
var $mapTarget = $(event.target);
if ($mapTarget.is("path")) {
$(".region").attr("class", "region");
const neighbors = getNeighbors($mapTarget[0], $('#Map')[0]);
neighbors.forEach(node => {
node.classList.add('neighbour');
})
$mapTarget.addClass("active");
} else {
return;
}
})
function getNeighbors(target, root, stroke_width = 1) {
const targetBB = target.getBBox();
return [...root.querySelectorAll('path')]
.filter(path =>
path !== target && // not the target
// fast check BBoxes
intersectBoxes(path.getBBox(), targetBB, stroke_width / 2) &&
// walk the path
slowHitCheck(path, target, stroke_width)
);
}
function intersectBoxes(bb1, bb2, padding) {
const pad = padding / 2;
const getCorners = (bb) => ({
left: bb.x - pad,
top: bb.y - pad,
right: bb.x + bb.width + pad,
bottom: bb.x + bb.width + pad,
});
const r1 = getCorners(bb1);
const r2 = getCorners(bb2);
return r1.left <= r2.right &&
r1.right >= r2.left &&
r1.top <= r2.bottom &&
r1.bottom >= r2.top;
}
function slowHitCheck(p1, p2, stroke_width) {
const smallest = p1.getTotalLength() < p2.getTotalLength() ? p1 : p2;
const longest = smallest === p1 ? p2 : p1;
const length = smallest.getTotalLength();
let pos = 0;
while (pos < length) {
const pt = smallest.getPointAtLength(pos);
if (longest.isPointInStroke(pt)) return true;
pos += stroke_width;
}
return false;
}
/* Half related code below:
* Monkey Patches SVGGeometryElement's isPointInStroke
* and is isPointInFill.
* You can check the revision history
* for a simpler version that only worked for SVGPathElements
*/
// Beware untested code below
// There may very well be a lot of cases where it will not work at all
if (window.SVGGeometryElement && !window.SVGGeometryElement.prototype.isPointInStroke) {
monkeyPatchSVGIsPointIn();
}
function monkeyPatchSVGIsPointIn() {
const ctx = get2DContext(0, 0);
const default_ctx = get2DContext(0, 0);
Object.defineProperty(SVGGeometryElement.prototype, 'isPointInStroke', {
value: function isPointInStroke(point) {
returnIfAbrupt(point);
const path = generatePath2DFromSVGElement(this);
setUpContextToSVGElement(ctx, this);
ctx.stroke(path);
return ctx.isPointInStroke(path, point.x, point.y);
}
});
Object.defineProperty(SVGGeometryElement.prototype, 'isPointInFill', {
value: function isPointInFill(point) {
returnIfAbrupt(point);
const path = generatePath2DFromSVGElement(this);
setUpContextToSVGElement(ctx, this);
ctx.fill(path, this.getAttribute('fill-rule') || "nonzero")
return ctx.isPointInPath(path, point.x, point.y, this.getAttribute('fill-rule') || 'nonzero');
}
});
function returnIfAbrupt(svgPoint) {
if (svgPoint instanceof SVGPoint === false) {
throw new TypeError("Failed to execute 'isPointInStroke' on 'SVGGeometryElement':" +
"parameter 1 is not of type 'SVGPoint'.")
}
}
function generatePath2DFromSVGElement(el) {
const def = el instanceof SVGPathElement ?
el.getAttribute('d') :
(el instanceof SVGPolygonElement ||
el instanceof SVGPolylineElement) ?
("M" + el.getAttribute('points').split(' ').filter(Boolean).join('L')) :
"";
const path = new Path2D(def);
if (!def) {
if (el instanceof SVGLineElement) {
path.lineTo(el.getAttribute('x1'), el.getAttribute('y1'))
path.lineTo(el.getAttribute('x2'), el.getAttribute('y2'))
}
if (el instanceof SVGRectElement) {
path.rect(el.getAttribute('x'), el.getAttribute('y'), el.getAttribute('width'), el.getAttribute('height'));
} else if (el instanceof SVGCircleElement) {
path.arc(el.getAttribute('cx'), el.getAttribute('cy'), el.getAttribute('r'), Math.PI * 2, 0);
} else if (el instanceof SVGEllipseElement) {
path.ellipse(el.getAttribute('cx'), el.getAttribute('cy'), el.getAttribute('rx'), el.getAttribute('ry'), 0, Math.PI * 2, 0);
}
}
return path;
}
function setUpContextToSVGElement(ctx, svgEl) {
const default_ctx = get2DContext();
const dict = {
"stroke-width": "lineWidth",
"stroke-linecap": "lineCap",
"stroke-linejoin": "lineJoin",
"stroke-miterlimit": "miterLimit",
"stroke-dashoffset": "lineDashOffset"
};
for (const [key, value] of Object.entries(dict)) {
ctx[value] = svgEl.getAttribute(key) || default_ctx[value];
}
ctx.setLineDash((svgEl.getAttribute("stroke-dasharray") || "").split(' '));
}
function get2DContext(width = 0, height = 0) {
return Object.assign(
document.createElement("canvas"),
{ width, height }
).getContext('2d');
}
}
body {
background: lightblue;
}
.region {
fill: green;
stroke: white;
stroke-width: 0.5;
}
.region:hover {
fill: lightgreen;
}
.active {
fill: red;
}
.neighbour {
fill: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="Map" class="map" viewBox="0 0 125 75">
<g>
<path id="Region01" class="region" d="M0,0 L 0,50 L 50,50Z"/>
<path id="Region02" class="region" d="M25,25 L 75,25 L 75,75Z"/>
<path id="Region03" class="region" d="M0,50 L 25,50 L 25,75 L 0,75Z"/>
<path id="Region04" class="region" d="M100,0 L 125,0 L 125,25 L 100,25Z"/>
</g>
</svg>

Error: Hotspot cannot not be embedded in sphere for lack of browser support (Marzipano)

I am using marzipano Tool and start getting an Error: Hotspot cannot not be embedded in sphere for lack of browser support.
Not able to understand Why? initially it wasn't coming
data.forEach(function(hotspot, index) {
const yaw1 = hotspot.yaw * that.degrees2radians;
const pitch1 = hotspot.pitch * that.degrees2radians;
const element = that.createInfoHotspotElement(hotspot, index);
// Get the hotspot container for scene.
const container = that.scene.hotspotContainer();
console.log(hotspot);
element && container.createHotspot(element, {
yaw: yaw1,
pitch: pitch1
}, {
perspective: {
radius: 1640
}
});
});
When I remove perspective object it is working Fine.
Please help

After struggling for two days, I came to know the reason for this Error.
Actually, In the project in which I have been working on, because of wrong HTML and CSS schema, marzipano DIV element of ID(marzipano_test_css3d_support) during rendering was not able to get height which it is creating internally (below is the snippet)
84: [function(t, e, i) {
"use strict";
function r() {
var t = s("perspective")
, e = document.createElement("div")
, i = "undefined" != typeof e.style[t];
if (i && "WebkitPerspective" === t) {
var r = "__marzipano_test_css3d_support__"
, n = document.createElement("style");
n.textContent = "#media(-webkit-transform-3d){#" + r + "{height: 3px;})",
document.getElementsByTagName("head")[0].appendChild(n),
e.id = r,
document.body.appendChild(e),
i = e.offsetHeight > 0,
n.parentNode.removeChild(n),
e.parentNode.removeChild(e)
}
return i
}
function n() {
return o !== undefined ? o : o = r()
}
var o, s = t("../util/dom").prefixProperty;
e.exports = n
}
Because of this i = e.offsetHeight > 0 was returning false.
We fixed some CSS property and now the tool is working fine.
Hope this will help

Class is not defined?

For context, I am working on a game using Phaser framework. However, this question is generally geared at Javascript.
I have defined the following class in my main.js file via a function constructor:
function AchievementsMenu() {
this.lastY = 43 * c.length
}
However, when making a prototype AchievementsMenu.prototype = Object.create( Phaser.Group.prototype ); I get the error: 'Uncaught ReferenceError: AchievementsMenu is not defined'.
I understand that I have simply created a function class defining the object without actually making an instance of it. I shouldn't need to, though, to create a prototype method, right?
Any help would be greatly appreciated!
Edit:
import 'pixi'
import 'p2'
import Phaser from 'phaser'
import * as AM from './managers/AchievementManager.js'
import * as HG from './managers/hgManager.js'
import * as DM from './managers/dataManager.js'
//Configs for initializing Phaser framework
var cfg = {
width: 1334,
height: 750,
renderer: Phaser.WEBGL,
parent: "gameDiv",
enableDebug: !1,
transparent: !1,
antialias: !1
},
game = new Phaser.Game(cfg);
game.achievementManager = new AM.AchievementManager( game );
game.hgManager = new HG.HGManager();
game.dataManager = new DM.DataManager( game );
//A decent chunk of the class
function AchievementsMenu() {
Phaser.Group.call(this, game);
var a = game.add.image(0, 0, "MainUI", "Achievements/Achievements_TextBG_Disabled.png");
a.anchor.setTo(.5),
a.scale.setTo(200),
a.alpha = .4,
a.tint = 0,
a.inputEnabled = !0,
a.events.onInputUp.add(this.onPressBG, this),
this.add(a);
var b = game.add.image(0, 0, "MainUI", "Achievements/Achievements_BG.png");
b.inputEnabled = !0,
b.events.onInputDown.add(this.onStartDrag, this),
b.events.onInputUp.add(this.onEndDrag, this),
this.add(b),
this.add(this.game.add.bitmapText(15, 2, "Omnes", "Achievements", 28)),
this.scrollableContent = game.add.group(),
this.add(this.scrollableContent);
for (var c = this.game.constants.achievements, d = this.game.playerData.achievements, e = 0; e < c.length; e++) {
var f = 80 * e + 35;
if (d.indexOf(e) == -1){
this.game.add.image(10, f, "MainUI", "Achievements/Achievements_TextBG_Disabled.png", this.scrollableContent),
this.game.add.image(15, f + 4, "MainUI", "Achievements/Achievements_Icon_Locked.png", this.scrollableContent);
}
else {
this.game.add.image(10, f, "MainUI", "Achievements/Achievements_TextBG_Enabled.png", this.scrollableContent),
this.game.add.image(15, f + 4, "MainUI", "Achievements/Achievements_Icon_0" + e + ".png", this.scrollableContent);
var g = this.game.add.bitmapText(450, f + 25, "Omnes", "Completed", 20, this.scrollableContent);
g.tint = 7454787
}
this.game.add.bitmapText(75, f + 10, "Omnes", c[e].name, 25, this.scrollableContent),
this.game.add.bitmapText(75, f + 35, "Omnes", c[e].description, 20, this.scrollableContent)
}
this.lastY = 43 * c.length;
}
AchievementsMenu.prototype = Object.create( Phaser.Group.prototype );
AchievementsMenu.prototype.onPressBG = function() {
this.visible = !1
};

scrollMagic - How to scroll to the right place?

There is such a thing.
https://jsfiddle.net/j6u6wp7x/1/
var scene;
var controller;
$(document).ready(function() {
parallaxAuto();
$('.viewer__nav div').click(function(event) {
var num = $(this).attr('data-num');
if (num == 'sticky') {
controller.scrollTo(scene);
}
var scrollPos = controller.info("scrollPos");
});
});
function hideShow(num, block) {
block.find("div.active").removeClass("active").animate({ opacity: 0,},300);
block.find("div.slide"+num).addClass("active").animate({ opacity: 1,},300);
}
// init variables
function parallaxAuto() {
var viewer = document.querySelector('.viewer.active'),
frame_count = 5,
offset_value = 500;
// init controller
controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 0,
reverse: true
}
});
// build pinned scene
scene = new ScrollMagic.Scene({
triggerElement: '#sticky',
duration: (frame_count * offset_value) + 'px',
reverse: true
})
.setPin('#sticky')
//.addIndicators()
.addTo(controller);
// build step frame scene
for (var i = 1, l = frame_count; i <= l; i++) {
new ScrollMagic.Scene({
triggerElement: '#sticky',
offset: i * offset_value
})
.setClassToggle(viewer, 'frame' + i)
//.addIndicators()
.addTo(controller);
}
}
Below there are 3 smaller images that create Navigation. I made it to jump to the top, but I cannot figure out how to jump to 2nd or 3rd.
var scrollPos = controller.info ( "scrollPos"); shows the current position, but I cannot imagine how to use it correctly.

I didn't go through the tit-bits of your code, but in similar situations we used the scrollIntoView() function of JavaScript(not jQuery).
var element = document.getElementById('id of your image');
element.scrollIntoView(false);
This much code should do the trick.
Hope it helps.
EDIT :1
Hi, I updated your fiddle, I think we need to store the scenes in a array and then refer it later. I guess you were looking for something like that.