Skip to content

Shared memory #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Shared memory #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
efe2b06
Shared memory tmp
IOuser Nov 2, 2018
6bb292e
Extract workers, offscreen canvas
IOuser Nov 5, 2018
8fb4808
Update readme.md
IOuser Nov 5, 2018
d986a01
Improve workers
IOuser Nov 6, 2018
abe1214
Add public path to config
IOuser Nov 6, 2018
2a69e0c
Add some primitives
IOuser Nov 6, 2018
cf72343
Rename simple color shader, add triangles fan buffer
IOuser Nov 6, 2018
9bd1b32
tmp
IOuser Nov 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,4 @@ $ yarn start
##### TODO:
- QuadTree (Point, AABB) rust impl
- Circles colliding
- WASM threads (https://developers.google.com/web/updates/2018/10/wasm-threads)
284 changes: 283 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,289 @@
<body>
<!-- <pre></pre> -->
<canvas></canvas>
<script src="code/bundle.js"></script>
<!-- <script src="code/bundle.js"></script> -->

<script>

// Find intersection of RAY & SEGMENT
function getIntersection(ray, segment) {
// RAY in parametric: Point + Delta*T1
var r_px = ray.a.x;
var r_py = ray.a.y;
var r_dx = ray.b.x - ray.a.x;
var r_dy = ray.b.y - ray.a.y;

// SEGMENT in parametric: Point + Delta*T2
var s_px = segment.a.x;
var s_py = segment.a.y;
var s_dx = segment.b.x - segment.a.x;
var s_dy = segment.b.y - segment.a.y;

// Are they parallel? If so, no intersect
var r_mag_squared = r_dx * r_dx + r_dy * r_dy;
var s_mag_squared = s_dx * s_dx + s_dy * s_dy;
if (r_dx / r_mag_squared == s_dx / s_mag_squared && r_dy / r_mag_squared == s_dy / s_mag_squared) {
// Unit vectors are the same.
return null;
}

// SOLVE FOR T1 & T2
// r_px+r_dx*T1 = s_px+s_dx*T2 && r_py+r_dy*T1 = s_py+s_dy*T2
// ==> T1 = (s_px+s_dx*T2-r_px)/r_dx = (s_py+s_dy*T2-r_py)/r_dy
// ==> s_px*r_dy + s_dx*T2*r_dy - r_px*r_dy = s_py*r_dx + s_dy*T2*r_dx - r_py*r_dx
// ==> T2 = (r_dx*(s_py-r_py) + r_dy*(r_px-s_px))/(s_dx*r_dy - s_dy*r_dx)
var T2 = (r_dx * (s_py - r_py) + r_dy * (r_px - s_px)) / (s_dx * r_dy - s_dy * r_dx);
var T1 = (s_px + s_dx * T2 - r_px) / r_dx;

// Must be within parametic whatevers for RAY/SEGMENT
if (T1 < 0) return null;
if (T2 < 0 || T2 > 1) return null;

// Return the POINT OF INTERSECTION
return {
x: r_px + r_dx * T1,
y: r_py + r_dy * T1,
param: T1
};
}

function getSightPolygon(sightX, sightY) {
// Get all unique points
var points = (function (segments) {
var a = [];
segments.forEach(function (seg) {
a.push(seg.a, seg.b);
});
return a;
})(segments);

var uniquePoints = (function (points) {
var set = {};
return points.filter(function (p) {
var key = p.x + "," + p.y;
if (key in set) {
return false;
} else {
set[key] = true;
return true;
}
});
})(points);

// Get all angles
var uniqueAngles = [];
for (var j = 0; j < uniquePoints.length; j++) {
var uniquePoint = uniquePoints[j];
var angle = Math.atan2(uniquePoint.y - sightY, uniquePoint.x - sightX);
uniquePoint.angle = angle;
// uniqueAngles.push(angle - 0.00001, angle, angle + 0.00001);
uniqueAngles.push(angle - 0.00001, angle, angle + 0.00001);
}

// RAYS IN ALL DIRECTIONS
var intersects = [];
for (var j = 0; j < uniqueAngles.length; j++) {
var angle = uniqueAngles[j];
// Calculate dx & dy from angle
var dx = Math.cos(angle);
var dy = Math.sin(angle);

// Ray from light coord to point coord
var ray = {
a: { x: sightX, y: sightY },
b: { x: sightX + dx, y: sightY + dy }
};

// Find CLOSEST intersection
var closestIntersect = null;
for (var i = 0; i < segments.length; i++) {
var intersect = getIntersection(ray, segments[i]);
if (!intersect) continue;

// param (aka distance)
if (!closestIntersect || intersect.param < closestIntersect.param) {
closestIntersect = intersect;
}
}

// Intersect angle
if (!closestIntersect) continue;
closestIntersect.angle = angle;

// Add to list of intersects
intersects.push(closestIntersect);
}

// Sort intersects by angle
intersects = intersects.sort(function (a, b) {
return a.angle - b.angle;
});

// Polygon is intersects, in order of angle
return intersects;
}

///////////////////////////////////////////////////////
// DRAWING
var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var ctx = canvas.getContext("2d");

function draw() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw segments
ctx.strokeStyle = "#999";
for (var i = 0; i < segments.length; i++) {
var seg = segments[i];
ctx.beginPath();
ctx.moveTo(seg.a.x, seg.a.y);
ctx.lineTo(seg.b.x, seg.b.y);
ctx.stroke();
}

var lightsCount = 1;


performance.mark('getSightPolygonStart');

// Sight Polygons
var fuzzyRadius = 0;
var polygons = [getSightPolygon(Mouse.x, Mouse.y)];
for (var angle = 0; angle < Math.PI * 2; angle += (Math.PI * 2) / lightsCount) {
var dx = Math.cos(angle) * fuzzyRadius;
var dy = Math.sin(angle) * fuzzyRadius;
polygons.push(getSightPolygon(Mouse.x + dx, Mouse.y + dy));
};

performance.mark('getSightPolygonEnd');
performance.measure('getSightPolygon', 'getSightPolygonStart', 'getSightPolygonEnd');


// DRAW AS A GIANT POLYGON
for (var i = 1; i < polygons.length; i++) {
drawPolygon(polygons[i], ctx, `rgba(255, 255, 255, ${1 / lightsCount})`);
}
drawPolygon(polygons[0], ctx, "#fff");


// Draw red dots
ctx.fillStyle = "#dd3838";
ctx.beginPath();
ctx.arc(Mouse.x, Mouse.y, 2, 0, 2 * Math.PI, false);
ctx.fill();
for (var angle = 0; angle < Math.PI * 2; angle += (Math.PI * 2) / lightsCount) {
var dx = Math.cos(angle) * fuzzyRadius;
var dy = Math.sin(angle) * fuzzyRadius;
ctx.beginPath();
ctx.arc(Mouse.x + dx, Mouse.y + dy, 2, 0, 2 * Math.PI, false);
ctx.fill();
}
}

function drawPolygon(polygon, ctx, fillStyle) {
ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'; //fillStyle;
ctx.strokeStyle = '#3f0';
ctx.beginPath();
ctx.moveTo(polygon[0].x, polygon[0].y);
for (var i = 1; i < polygon.length; i++) {
var intersect = polygon[i];
ctx.lineTo(intersect.x, intersect.y);
}
ctx.fill();
ctx.stroke();


ctx.beginPath();
ctx.moveTo(Mouse.x, Mouse.y);
ctx.moveTo(polygon[0].x, polygon[0].y);
for (var i = 1; i < polygon.length; i++) {
var intersect = polygon[i];
ctx.moveTo(Mouse.x, Mouse.y);
ctx.lineTo(intersect.x, intersect.y);
}
ctx.stroke();


ctx.fillStyle = 'rgba(255, 255, 255, 1)'; //fillStyle;

for (var i = 1; i < polygon.length; i++) {
var intersect = polygon[i];
ctx.fillText(i, intersect.x, intersect.y);
}
// ctx.fill();
}

const kx = window.innerWidth / 640;
const ky = window.innerHeight / 360;

// LINE SEGMENTS
var segments = [
// Border
{ a: { x: kx * 5, y: ky * 5 }, b: { x: kx * 630, y: ky * 5 } },
{ a: { x: kx * 630, y: ky * 5 }, b: { x: kx * 630, y: ky * 350 } },
{ a: { x: kx * 630, y: ky * 350 }, b: { x: kx * 5, y: ky * 350 } },
{ a: { x: kx * 5, y: ky * 350 }, b: { x: kx * 5, y: ky * 5 } },
// Polygon #1
{ a: { x: kx * 100, y: ky * 150 }, b: { x: kx * 120, y: ky * 50 } },
{ a: { x: kx * 120, y: ky * 50 }, b: { x: kx * 200, y: ky * 80 } },
{ a: { x: kx * 200, y: ky * 80 }, b: { x: kx * 140, y: ky * 210 } },
{ a: { x: kx * 140, y: ky * 210 }, b: { x: kx * 100, y: ky * 150 } },
// Polygon #2
{ a: { x: kx * 100, y: ky * 200 }, b: { x: kx * 120, y: ky * 250 } },
{ a: { x: kx * 120, y: ky * 250 }, b: { x: kx * 60, y: ky * 300 } },
{ a: { x: kx * 60, y: ky * 300 }, b: { x: kx * 100, y: ky * 200 } },
// Polygon #3
{ a: { x: kx * 200, y: ky * 260 }, b: { x: kx * 220, y: ky * 150 } },
{ a: { x: kx * 220, y: ky * 150 }, b: { x: kx * 300, y: ky * 200 } },
{ a: { x: kx * 300, y: ky * 200 }, b: { x: kx * 350, y: ky * 320 } },
{ a: { x: kx * 350, y: ky * 320 }, b: { x: kx * 200, y: ky * 260 } },
// Polygon #4
{ a: { x: kx * 340, y: ky * 60 }, b: { x: kx * 360, y: ky * 40 } },
{ a: { x: kx * 360, y: ky * 40 }, b: { x: kx * 370, y: ky * 70 } },
{ a: { x: kx * 370, y: ky * 70 }, b: { x: kx * 340, y: ky * 60 } },
// Polygon #5
{ a: { x: kx * 450, y: ky * 190 }, b: { x: kx * 560, y: ky * 170 } },
{ a: { x: kx * 560, y: ky * 170 }, b: { x: kx * 540, y: ky * 270 } },
{ a: { x: kx * 540, y: ky * 270 }, b: { x: kx * 430, y: ky * 290 } },
{ a: { x: kx * 430, y: ky * 290 }, b: { x: kx * 450, y: ky * 190 } },
// Polygon #6
{ a: { x: kx * 400, y: ky * 95 }, b: { x: kx * 580, y: ky * 50 } },
{ a: { x: kx * 580, y: ky * 50 }, b: { x: kx * 480, y: ky * 150 } },
{ a: { x: kx * 480, y: ky * 150 }, b: { x: kx * 400, y: ky * 95 } }
];
// DRAW LOOP

var updateCanvas = true;

function drawLoop() {
requestAnimationFrame(drawLoop);
if (updateCanvas) {
draw();
updateCanvas = false;
}
}
window.onload = function () {
drawLoop();
};
// MOUSE
var Mouse = {
x: canvas.width / 2,
y: canvas.height / 2
};
canvas.onmousemove = function (event) {
Mouse.x = event.clientX;
Mouse.y = event.clientY;
updateCanvas = true;
};

</script>
</body>

</html>
2 changes: 1 addition & 1 deletion src/definitions/worker.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
declare module "worker-loader!*" {
declare module "worker-loader*" {
class WebpackWorker extends Worker {
constructor();
}
Expand Down
Loading