Skip to content

Commit

Permalink
change svg and terrain example to use fetch
Browse files Browse the repository at this point in the history
  • Loading branch information
liabru committed Jan 16, 2021
1 parent 33e8fe8 commit 5551cd5
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 69 deletions.
1 change: 0 additions & 1 deletion demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
<!-- Libs -->
<script src="./lib/decomp.js"></script>
<script src="./lib/pathseg.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

<!-- Examples -->
<script src="./js/Examples.js"></script>
Expand Down
75 changes: 39 additions & 36 deletions examples/svg.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,43 +33,44 @@ Example.svg = function() {
Runner.run(runner, engine);

// add bodies
var svgs = [
'iconmonstr-check-mark-8-icon',
'iconmonstr-paperclip-2-icon',
'iconmonstr-puzzle-icon',
'iconmonstr-user-icon'
];

if (typeof $ !== 'undefined') {
for (var i = 0; i < svgs.length; i += 1) {
(function(i) {
$.get('./svg/' + svgs[i] + '.svg').done(function(data) {
var vertexSets = [],
color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);

$(data).find('path').each(function(i, path) {
var points = Svg.pathToVertices(path, 30);
vertexSets.push(Vertices.scale(points, 0.4, 0.4));
});

World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
render: {
fillStyle: color,
strokeStyle: color,
lineWidth: 1
}
}, true));
});
})(i);
}

$.get('./svg/svg.svg').done(function(data) {
var vertexSets = [],
color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);

$(data).find('path').each(function(i, path) {
vertexSets.push(Svg.pathToVertices(path, 30));
if (typeof fetch !== 'undefined') {
var select = function(root, selector) {
return Array.prototype.slice.call(root.querySelectorAll(selector));
};

var loadSvg = function(url) {
return fetch(url)
.then(function(response) { return response.text(); })
.then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); });
};

([
'./svg/iconmonstr-check-mark-8-icon.svg',
'./svg/iconmonstr-paperclip-2-icon.svg',
'./svg/iconmonstr-puzzle-icon.svg',
'./svg/iconmonstr-user-icon.svg'
]).forEach(function(path, i) {
loadSvg(path).then(function(root) {
var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);

var vertexSets = select(root, 'path')
.map(function(path) { return Vertices.scale(Svg.pathToVertices(path, 30), 0.4, 0.4); });

World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
render: {
fillStyle: color,
strokeStyle: color,
lineWidth: 1
}
}, true));
});
});

loadSvg('./svg/svg.svg').then(function(root) {
var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);

var vertexSets = select(root, 'path')
.map(function(path) { return Svg.pathToVertices(path, 30); });

World.add(world, Bodies.fromVertices(400, 80, vertexSets, {
render: {
Expand All @@ -79,6 +80,8 @@ Example.svg = function() {
}
}, true));
});
} else {
Common.warn('Fetch is not available. Could not load SVG.');
}

World.add(world, [
Expand Down
73 changes: 41 additions & 32 deletions examples/terrain.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,39 +34,48 @@ Example.terrain = function() {
Runner.run(runner, engine);

// add bodies
var terrain;

if (typeof $ !== 'undefined') {
$.get('./svg/terrain.svg').done(function(data) {
var vertexSets = [];

$(data).find('path').each(function(i, path) {
vertexSets.push(Svg.pathToVertices(path, 30));
if (typeof fetch !== 'undefined') {
var select = function(root, selector) {
return Array.prototype.slice.call(root.querySelectorAll(selector));
};

var loadSvg = function(url) {
return fetch(url)
.then(function(response) { return response.text(); })
.then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); });
};

loadSvg('./svg/terrain.svg')
.then(function(root) {
var paths = select(root, 'path');

var vertexSets = paths.map(function(path) { return Svg.pathToVertices(path, 30); });

var terrain = Bodies.fromVertices(400, 350, vertexSets, {
isStatic: true,
render: {
fillStyle: '#060a19',
strokeStyle: '#060a19',
lineWidth: 1
}
}, true);

World.add(world, terrain);

var bodyOptions = {
frictionAir: 0,
friction: 0.0001,
restitution: 0.6
};

World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) {
if (Query.point([terrain], { x: x, y: y }).length === 0) {
return Bodies.polygon(x, y, 5, 12, bodyOptions);
}
}));
});

terrain = Bodies.fromVertices(400, 350, vertexSets, {
isStatic: true,
render: {
fillStyle: '#060a19',
strokeStyle: '#060a19',
lineWidth: 1
}
}, true);

World.add(world, terrain);

var bodyOptions = {
frictionAir: 0,
friction: 0.0001,
restitution: 0.6
};

World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) {
if (Query.point([terrain], { x: x, y: y }).length === 0) {
return Bodies.polygon(x, y, 5, 12, bodyOptions);
}
}));
});
} else {
Common.warn('Fetch is not available. Could not load SVG.');
}

// add mouse control
Expand Down

0 comments on commit 5551cd5

Please sign in to comment.