started work on circleOutline code

davidfig · davidfig · commit fd21451a86a6 · 2019-05-15T07:07:23.000+08:00
diff --git a/box-circleOutline.js b/box-circleOutline.js
@@ -0,0 +1,17 @@
+var circleOutlineBox = require('./circleOutline-box')
+
+/**
+ * circleOutline-box (axis-aligned) collision
+ * @param {number} xc center of circle
+ * @param {number} yc center of circle
+ * @param {radius} rc radius of circle
+ * @param {number} x top-left corner of box
+ * @param {number} y top-left corner of box
+ * @param {number} width of box
+ * @param {number} height of box
+ * @param {number} thickness of circle outline
+ */
+module.exports = function boxCircleOutline(x, y, width, height, xc, yc, rc, thickness)
+{
+    return circleOutlineBox(xc, yc, rc, x, y, width, height, thickness)
+}
diff --git a/circleOutline-box.js b/circleOutline-box.js
@@ -0,0 +1,44 @@
+var circlePoint = require('./circle-point')
+var boxCircle = require('./box-circle')
+
+/**
+ * circleOutline-box (axis-aligned) collision
+ * @param {number} xc center of circle
+ * @param {number} yc center of circle
+ * @param {radius} rc radius of circle
+ * @param {number} x top-left corner of box
+ * @param {number} y top-left corner of box
+ * @param {number} width of box
+ * @param {number} height of box
+ * @param {number} thickness of circle outline
+ */
+module.exports = function circleOutlineBox(xc, yc, rc, x, y, width, height, thickness)
+{
+    thickness = thickness || 1
+    var count = 0
+    count += circlePoint(xc, yc, rc, x, y) ? 1 : 0
+    count += circlePoint(xc, yc, rc, x + width, y) ? 1 : 0
+    count += circlePoint(xc, yc, rc, x, y + height) ? 1 : 0
+    count += circlePoint(xc, yc, rc, x + width, y + height) ? 1 : 0
+
+    // if no corners are inside the circle, then intersects only if box encloses circle-outline
+    if (count === 0)
+    {
+        return boxCircle(x, y, width, height, xc, yc, rc)
+    }
+
+    // if one corner is inside and one corner is outside then box intersects circle-outline
+    if (count >= 1 && count <= 3)
+    {
+        return true
+    }
+
+    // last check is if box is inside circle, need to check that a corner is not inside the inner circle
+    if (count === 4)
+    {
+        return !circlePoint(xc, yc, rc - thickness, x, y) ||
+            !circlePoint(xc, yc, rc - thickness, x + width, y) ||
+            !circlePoint(xc, yc, rc - thickness, x, y + height) ||
+            !circlePoint(xc, yc, rc - thickness, x + width, y + height)
+    }
+}
diff --git a/circleOutline-line.js b/circleOutline-line.js
@@ -0,0 +1,19 @@
+var lineCircle = require('./line-circle')
+var circlePoint = require('./circle-point')
+
+/**
+ * circleOutline-line collision
+ * @param {number} xc center of circle
+ * @param {number} yc center of circle
+ * @param {radius} rc radius of circle
+ * @param {number} x1 of point 1 of line
+ * @param {number} y1 of point 1 of line
+ * @param {number} x2 of point 2 of line
+ * @param {number} y2 of point 2 of line
+ * @param {number} thickness of circle outline
+ */
+module.exports = function circleOutlineLine(xc, yc, rc, x1, y1, x2, y2, thickness)
+{
+    thickness = thickness || 1
+    return lineCircle(x1, y1, x2, y2, xc, yc, rc) && !(circlePoint(xc, yc, rc - thickness, x1, y1) && circlePoint(xc, yc, rc - thickness, x2, y2))
+}
diff --git a/circleOutline-point.js b/circleOutline-point.js
@@ -0,0 +1,16 @@
+var circlePoint = require('./circle-point')
+
+/**
+ * circleOutline-point collision
+ * @param {number} xc center of circle
+ * @param {number} yc center of circle
+ * @param {radius} rc radius of circle
+ * @param {number} x of point
+ * @param {number} y of point
+ * @param {number} thickness of circle outline
+ */
+module.exports = function circleOutlinePoint(xc, yc, rc, x, y, thickness)
+{
+    thickness = thickness || 1
+    return circlePoint(xc, yc, rc, x, y) && !circlePoint(xc, yc, rc - thickness, x, y)
+}
diff --git a/docs/code.js b/docs/code.js
@@ -502,6 +502,80 @@ function ellipseEllipse(x, y)
     text('ellipseEllipse()', x, y)
 }
 
+function circleOutlineBox(x, y)
+{
+    function change()
+    {
+        const r = Random.range(shape * 0.1, shape)
+        const w = Random.range(shape * 0.1, shape)
+        const h = Random.range(shape * 0.1, shape)
+        ease.to(c, { x: Random.range(x + r, x + square - r), y: Random.range(y + r, y + square - r), r }, TIME)
+        const to = ease.to(rectangle, { x: Random.range(x + w, x + square - w), y: Random.range(y + h, y + square - h), w, h }, TIME)
+        to.on('each', () =>
+        {
+            const tint = (REVERSE ?
+                Intersects.circleOutlineBox(c.x, c.y, c.r, r.x, r.y, r.w, r.h) :
+                Intersects.boxCircleOutline(rectangle.x, rectangle.y, rectangle.w, rectangle.h, c.x, c.y, c.r)) ? 0xff0000 : 0x00ff00
+            g.clear()
+                .lineStyle(1, tint).drawCircle(c.x, c.y, c.r).lineStyle(0)
+                .beginFill(tint).drawRect(rectangle.x, rectangle.y, rectangle.w, rectangle.h).endFill()
+        })
+        to.on('done', change)
+    }
+    const g = renderer.stage.addChild(new PIXI.Graphics())
+    const c = { x: x + square / 2 - small / 2, y: y + square / 2 - small / 2, r: small }
+    const w = Random.range(shape * 0.1, shape)
+    const h = Random.range(shape * 0.1, shape)
+    const rectangle = { x: Random.range(x + w, x + square - w), y: Random.range(y + h, y + square - h), w, h }
+
+    change()
+    text(REVERSE ? 'circleOutlineBox()' : 'boxCircleOutline()', x, y)
+}
+
+function circleOutlineLine(x, y)
+{
+    function change()
+    {
+        const to = ease.to(line, { x1: Random.range(x, x + square), y1: Random.range(y, y + square), x2: Random.range(x, x + square), y2: Random.range(y, y + square) }, TIME)
+        to.on('each', () =>
+        {
+            const tint = (REVERSE ? Intersects.lineCircleOutline(line.x1, line.y1, line.x2, line.y2, circle.x, circle.y, circle.radius) :
+                Intersects.circleOutlineLine(circle.x, circle.y, circle.radius, line.x1, line.y1, line.x2, line.y2)) ? 0xff0000 : 0x00ff00
+            g.clear()
+                .lineStyle(dot, tint).moveTo(line.x1, line.y1).lineTo(line.x2, line.y2)
+                .lineStyle(1, tint).drawCircle(circle.x, circle.y, circle.radius).lineStyle(0)
+
+        })
+        to.on('done', change)
+    }
+    const g = renderer.stage.addChild(new PIXI.Graphics())
+    const line = { x1: Random.range(x, x + square), y1: Random.range(y, y + square), x2: Random.range(x, x + square), y2: Random.range(y, y + square) }
+    const circle = { x: x + square / 2, y: y + square / 2, radius: radius * 1.4 }
+    change()
+    text(REVERSE ? 'lineCircleOutline()' : 'circleOutlineLine()', x, y)
+}
+
+function circlePointOutline(x, y)
+{
+    function change()
+    {
+        const angle = Random.angle()
+        const distance = Random.get(square * 0.4)
+        const xTo = x + square / 2 + Math.cos(angle) * distance
+        const yTo = y + square / 2 + Math.sin(angle) * distance
+        const to = ease.target(point, { x: xTo, y: yTo }, speed)
+        to.on('each', () =>
+            circle.tint = (REVERSE ? Intersects.pointCircleOutline(point.x, point.y, circle.x, circle.y, radius, thickness) :
+                Intersects.circleOutlinePoint(circle.x, circle.y, radius, point.x, point.y, thickness)) ? 0xff0000 : 0x00ff00)
+        to.on('done', change)
+    }
+    const thickness = 5
+    const circle = drawCircle(x + square / 2, y + square / 2, radius, 0xffffff, thickness)
+    const point = drawCircle(x, y, dot, 0)
+    change()
+    text(REVERSE ? 'pointCircleOutline()' : 'circlePointOutline()', x, y)
+}
+
 // test for points on edge of polygon
 // see https://wrf.ecse.rpi.edu//Research/Short_Notes/pnpoly.html (point on edge)
 function polygonPointSpecial(x, y)
@@ -584,18 +658,19 @@ function tests()
     next()
     ellipseEllipse(x, y)
     next()
+    circleOutlineBox(x, y)
+    next()
+    circleOutlineLine(x, y)
+    next()
+    circlePointOutline(x, y)
+    next()
     polygonPointSpecial(x, y)
 }
 
 // sets up renderer, pixi-ease
 function setup()
 {
-    renderer = new PIXI.Application({ transparent: true, resolution: window.devicePixelRatio })
-    renderer.view.style.pointerEvents = 'none'
-    renderer.view.style.position = 'fixed'
-    renderer.view.style.width = '100vw'
-    renderer.view.style.height = '100vh'
-    renderer.view.style.left = renderer.view.style.top = 0
+    renderer = new PIXI.Application({ transparent: true, resolution: window.devicePixelRatio, view: document.querySelector('.view') })
     document.body.appendChild(renderer.view)
     ease = new Ease.list()
 }
@@ -637,14 +712,21 @@ function resize()
 
     renderer.stage.removeChildren()
     tests()
-    renderer.renderer.resize(x, y)
+    renderer.renderer.resize(x, y + square)
 }
 
-function drawCircle(x, y, r, color)
+function drawCircle(x, y, r, color, outline)
 {
     color = typeof color === 'undefined' ? 0xffffff : color
     const circle = renderer.stage.addChild(new PIXI.Graphics())
-    circle.beginFill(color).drawCircle(0, 0, r).endFill()
+    if (outline)
+    {
+        circle.lineStyle(outline === true ? 1 : outline, color).drawCircle(0, 0, r).lineStyle(0)
+    }
+    else
+    {
+        circle.beginFill(color).drawCircle(0, 0, r).endFill()
+    }
     circle.position.set(x, y)
     return circle
 }
diff --git a/docs/index.html b/docs/index.html
@@ -17,9 +17,14 @@
         .hljs-comment {
             color: blue;
         }
+        .view {
+            width: 100vw;
+            pointer-events: none;
+        }
     </style>
 </head>
 <body>
     <script src="index.js"></script>
     <div class="title">Example for <a href="https://github.com/davidfig/intersects/">github.com/davidfig/intersects/</a> (<a href="https://www.npmjs.com/package/intersects">npmjs: intersects</a>)</a></div>
+    <canvas class="view"></canvas>
 </body>
diff --git a/index.js b/index.js
@@ -6,6 +6,10 @@ module.exports = {
     circlePolygon: require('./circle-polygon'),
     circleEllipse: require('./circle-ellipse'),
 
+    circleOutlineBox: require('./circleOutline-box'),
+    circleOutlineLine: require('./circleOutline-line'),
+    circleOutlinePoint: require('./circleOutline-point'),
+
     polygonPoint: require('./polygon-point'),
     polygonLine: require('./polygon-line'),
     polygonPolygon: require('./polygon-polygon'),
@@ -19,19 +23,22 @@ module.exports = {
     boxPolygon: require('./box-polygon'),
     boxCircle: require('./box-circle'),
     boxEllipse: require('./box-ellipse'),
+    boxCircleOutline: require('./box-circleOutline'),
 
     pointBox: require('./point-box'),
     pointPolygon: require('./point-polygon'),
     pointCircle: require('./point-circle'),
     pointLine: require('./point-line'),
     pointEllipse: require('./point-ellipse'),
+    pointCircleOutline: require('./point-circleOutline'),
 
     lineLine: require('./line-line'),
     lineBox: require('./line-box'),
     linePolygon: require('./line-polygon'),
     lineCircle: require('./line-circle'),
     linePoint: require('./line-point'),
     lineEllipse: require('./line-ellipse'),
+    lineCircleOutline: require('./line-circleOutline'),
 
     ellipsePoint: require('./ellipse-point'),
     ellipseLine: require('./ellipse-line'),
diff --git a/line-circleOutline.js b/line-circleOutline.js
@@ -0,0 +1,17 @@
+var circleOutlineLine = require('./circleOutline-line')
+
+/**
+ * line-circleOutline collision
+ * @param {number} x1 of point 1 of line
+ * @param {number} y1 of point 1 of line
+ * @param {number} x2 of point 2 of line
+ * @param {number} y2 of point 2 of line
+ * @param {number} xc center of circle
+ * @param {number} yc center of circle
+ * @param {radius} rc radius of circle
+ * @param {number} thickness of circle outline
+ */
+module.exports = function lineCircleOutline(x1, y1, x2, y2, xc, yc, rc, thickness)
+{
+    return circleOutlineLine(xc, yc, rc, x1, y1, x2, y2, thickness)
+}
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "a simple collection of 2d collision/intersects functions, supporting points, circles, lines, axis-aligned boxes, and polygons (convex)",
   "main": "index.js",
   "scripts": {
-    "test": "budo docs/code.js:index.js --dir docs",
+    "test": "budo docs/code.js:index.js --dir docs --live",
     "build": "browserify docs/code.js -o docs/index.js",
     "prepublishOnly": "yarn run pkg && yarn run build",
     "pkg-browserify": "browserify umd.js -o umd/intersects.js",
@@ -23,9 +23,9 @@
   "homepage": "https://github.com/davidfig/intersects#readme",
   "devDependencies": {
     "calc-fontsize": "^1.1.0",
-    "highlight.js": "^9.12.0",
-    "pixi-ease": "^1.1.2",
-    "pixi.js": "^4.6.2",
-    "yy-random": "^1.7.3"
+    "highlight.js": "^9.15.6",
+    "pixi-ease": "^1.3.0",
+    "pixi.js": "^5.0.2",
+    "yy-random": "^1.8.0"
   }
 }
diff --git a/point-circleOutline.js b/point-circleOutline.js
@@ -0,0 +1,15 @@
+var circleOutlinePoint = require('./circleOutline-point')
+
+/**
+ * point-circleOutline collision
+ * @param {number} x of point
+ * @param {number} y of point
+ * @param {number} xc center of circle
+ * @param {number} yc center of circle
+ * @param {radius} rc radius of circle
+ * @param {number} thickness of circle outline
+ */
+module.exports = function pointCircleOutline(x, y, xc, yc, rc, thickness)
+{
+    return circleOutlinePoint(x, y, xc, yc, rc, thickness)
+}
diff --git a/yarn.lock b/yarn.lock
