Added qml2DRaycastingEngine to the project.

Author: karlphillip

README.md

@@ -12,8 +12,9 @@ Demo                       | Description             	       | Screenshot
 **cvVideo** | A C++/OpenCV/Qt example on how to display video files with configurable Aspect Ratio. | <img src="cvVideo/screenshot.gif" width="200"/>
 **cvWatershedSegmentation** | [Stackoverflow answer](https://stackoverflow.com/a/25851951/176769) that uses C++/OpenCV's watershed segmentation with distance transform to segment beans. | <img src="cvWatershedSegmentation/screenshot.jpg" width="200"/> 
 **ipcQtGesture** | A C++/Qt application that uses the old *Intel® Perceptual Computing SDK 2013* for gesture recognition. Windows only. | No image available
-**qmlRayCasting2D** | A QML implementation of 2D raycasting from [Daniel Shiffman](https://www.youtube.com/watch?v=TOEi6T2mtHo). | <img src="qmlRayCasting2D/screenshot.gif" width="200"/> 
-**qmlBattery** | A Qt/QML Battery element that displays the amount of energy left as horizontal bars according to the charge. On this demo, the charge is set dynamically and randomly from the C++ side. | <img src="qmlBattery/screenshot.gif" width="200"/> 
+**qml2DRaycasting** | A QML implementation of 2D raycasting based on [Daniel Shiffman](https://www.youtube.com/watch?v=TOEi6T2mtHo) coding challenge. | <img src="qml2DRaycasting/screenshot.gif" width="200"/> 
+**qml2DRaycastingEngine** | A QML implementation of 2D raycasting engine inspired by [Daniel Shiffman](https://www.youtube.com/watch?v=vYgIKn7iDH8) coding challenge. | <img src="qml2DRaycastingEngine/screenshot.gif" width="200"/> 
+**qmlBattery** | A Qt/QML Battery element that displays the amount of energy left as horizontal bars according to the charge. On this demo, the charge is set dynamically and randomly from the C++ side. | <img src="qmlBattery/screenshot.gif" height="195"/> 
 **qtArduinoSerial** | An C++/Qt example on how to print data from a serial (COM) port connected to Arduino. | No image available
 **qtFPSvsTIMEAnimation** | A C++/Qt implementation of FPS-based and Time-based animation techniques, as explained by [Steven Lambert](http://blog.sklambert.com/using-time-based-animation-implement/) | <img src="qtFPSvsTIMEAnimation/screenshot.gif" width="180"/> 
 **qtKinectVideo** | C++/Qt application based on "Color Basics" from Kinect for Windows SDK 1.8. This demo shows how to display the Color Stream. | No image available

qmlRayCasting2D/Boundary.qml renamed to qml2DRaycasting/Boundary.qml

@@ -6,7 +6,7 @@ Item {
     property vector2d b: Qt.vector2d(0, 0)
 
     function show(ctx) {
-        Draw.line(ctx, a.x, a.y, b.x, b.y, Qt.rgba(255, 255, 255, 1));
+        Draw.line(ctx, a.x, a.y, b.x, b.y, Qt.rgba(255, 255, 255, 1), 1);
 
         //console.log("Boundary.show: a=" + a);
         //console.log("Boundary.show: b=" + b);

qmlRayCasting2D/Particle.qml renamed to qml2DRaycasting/Particle.qml

@@ -8,20 +8,26 @@ Item {
     id: particle
 
     property var pos: Qt.vector2d(0, 0)
-    property var rays: createListOfRays()
-    property var numRays: 30; // the amount of light rays that this particle emits
+    property var numRays: 32; // default value: the amount of light rays that this particle emits
+    property var rays: createListOfRays(numRays)
 
-    function show(ctx) {
-        Draw.circle(ctx, pos.x, pos.y, 4, "white");
+    property int size: 5
+    property var color: "white"
+    property var lightColor: "yellow"
 
+    function show(ctx) {        
         for (let i = 0; i < rays.length; ++i)
             rays[i].show(ctx);
+
+        Draw.circle(ctx, pos.x, pos.y, particle.size, particle.color);
     }
 
-    // createListOfRays: returns a list of QML components of type Ray
-    function createListOfRays() {
-        var list = new Array(numRays);
-        const incSize =  360 / numRays;
+    // createListOfRays: returns a list of QML items of type Ray
+    function createListOfRays(size) {
+        // preallocate improves performance? var list = new Array(size);
+        var list = [];
+
+        const incSize =  360 / size;
 
         for (let i = 0, x = 0; i < 360; i += incSize, ++x) {
             var component = Qt.createComponent("Ray.qml");
@@ -67,7 +73,7 @@ Item {
 
             // check if the point of intersection exists
             if (pt)
-                Draw.line(ctx, particle.pos.x, particle.pos.y, pt.x, pt.y, "yellow");
+                Draw.line(ctx, particle.pos.x, particle.pos.y, pt.x, pt.y, particle.lightColor);
         }
     }
 
@@ -95,7 +101,7 @@ Item {
             }
 
             if (closestIntersectionPt)
-                Draw.line(ctx, particle.pos.x, particle.pos.y, closestIntersectionPt.x, closestIntersectionPt.y, "yellow");
+                Draw.line(ctx, particle.pos.x, particle.pos.y, closestIntersectionPt.x, closestIntersectionPt.y, particle.lightColor);
         }
     }
 

qmlRayCasting2D/README.md renamed to qml2DRaycasting/README.md

@@ -12,7 +12,7 @@ Item {
     property vector2d pos: Qt.vector2d(0, 0)    // starting position of the ray
     property vector2d dir: fromAngle(angle)     // unit vector that guides the direction of the light
 
-    property var raySize: 8                     // size of the ray for debugging purposes
+    property var raySize: 16                     // size of the ray for debugging purposes
 
     // show: draw the light of ray on the screen (red)
     function show(ctx) {

qmlRayCasting2D/Ray.qml renamed to qml2DRaycasting/Ray.qml

@@ -0,0 +1,51 @@
+// helper functions for drawing inside Canvas
+
+function line(ctx, x1, y1, x2, y2, color, lineWidth=1) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.lineWidth = lineWidth;
+    ctx.strokeStyle = color;
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.restore();
+}
+
+function circle(ctx, x, y, radius, color) {
+    ctx.save();
+    ctx.beginPath()
+    ctx.strokeStyle = color;
+    ctx.fillStyle = color;
+    ctx.arc(x, y, radius, 0, 360, false);
+    ctx.fill();
+    ctx.closePath()
+    ctx.restore();
+}
+
+function rect(ctx, x, y, w, h, color, border=true) {
+    ctx.save();
+    ctx.beginPath()
+
+    ctx.rect(x, y, w, h);
+    ctx.fillStyle = color;
+    ctx.fill();
+
+    if (!border) {
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = color;
+    }
+
+    ctx.stroke();
+    ctx.closePath()
+    ctx.restore();
+}
+
+function text(ctx, text, x, y, color, font="20px sans-serif") {
+    ctx.save();
+    ctx.font = font;
+    ctx.fillStyle = color;
+    ctx.fillText(qsTr(text), x, y);
+    ctx.stroke();
+    ctx.restore();
+}

qml2DRaycasting/draw.js

@@ -7,25 +7,38 @@ import "draw.js" as Draw
 
 Window {
     id: window
-    width: 600
-    height: 600
+    width: 800
+    height: 800
     visible: true
-    title: qsTr("2D Raytracing")
+    title: qsTr("2D Raycasting")
     color: "black"
 
+    property bool showFps: true
+    property int frameCounter: 0
+    property real fps: 0.0
+
     Canvas {
         id: canvas
         anchors.fill: parent
 
+        // change default render target to FBO: utilizes OpenGL hardware acceleration rather than rendering into system memory
+        renderTarget: Canvas.FramebufferObject
+
+        // change default render strategy to Threaded: context will defer graphics commands to a private rendering thread
+        renderStrategy: Canvas.Threaded
+
+        // store latest mouse move coordinates
         property vector2d mousePoint: Qt.vector2d(0, 0)
-        property var walls: createListOfWalls();
+
+        // specify wall size and create walls
         property int numWalls: 5
+        property var walls: createListOfWalls(numWalls);
 
         // a single light particle that emits rays on all directions
         Particle {
             id: particle
             pos: Qt.vector2d(canvas.mousePoint.x, canvas.mousePoint.y)
-            numRays: 200
+            numRays: 64
         }
 
         // drawing procedure
@@ -50,21 +63,49 @@ Window {
             // find if any of these rays in the particle are able to intercept the boundary
             //particle.lookWall(walls[0], ctx);
             particle.look(walls, ctx);
+
+            // increment frame counter
+            window.frameCounter++;
         }
 
-        // refresh the canvas automatically every 33 milliseconds
+        // try to refresh the canvas every 5ms
         Timer {
-            interval: 33
+            interval: 5
             running: true
             repeat: true
-            onTriggered: canvas.requestPaint()
+
+            property double startTime: 0.0
+            property double elapsedTime: 0.0
+            property double msPerFrame: 0.0
+
+            onTriggered: {
+                if (startTime === 0)
+                    startTime = new Date().getTime();
+
+                elapsedTime = new Date().getTime() - startTime;
+
+                if (elapsedTime >= 1000) {
+                    // compute FPS
+                    msPerFrame = elapsedTime / window.frameCounter;
+                    window.fps = 1000 / msPerFrame;
+
+                    // reset start time and fps count
+                    startTime = 0;
+                    window.frameCounter = 0;
+                }
+
+                // trigger canvas.onPaint()
+                canvas.requestPaint()
+
+                //console.log("FPS:" + fps);
+            }
         }
 
         // createListOfWalls: creates a list of random walls on the screen
-        function createListOfWalls() {
-            var list = new Array(canvas.numWalls);
+        function createListOfWalls(size) {
+            var list = new Array(size);
 
-            for (let i = 0; i < canvas.numWalls; ++i) {
+            for (let i = 0; i < size; ++i) {
                 var component = Qt.createComponent("Boundary.qml");
                 if (component === null) {
                     console.log("Canvas !!! error creating component");
@@ -102,4 +143,24 @@ Window {
             canvas.mousePoint.y = mouse.y;
         }
     }
+
+    Item {
+        focus: true
+
+        Keys.onPressed: {
+            if (event.key === Qt.Key_F) {
+                console.log("onPressed: F");
+                showFps = !showFps;
+                event.accepted = true;
+            }
+        }
+    }
+
+
+    Text {
+        anchors.right: parent.right
+        color: "lime"
+        text: qsTr("FPS: " + window.fps.toFixed(1))
+        visible: window.showFps
+    }
 }

qmlRayCasting2D/main.cpp renamed to qml2DRaycasting/main.cpp

@@ -0,0 +1,20 @@
+import QtQuick 2.0
+import "draw.js" as Draw
+
+Item {
+    id: wall
+    property vector2d a: Qt.vector2d(0, 0)
+    property vector2d b: Qt.vector2d(0, 0)
+    property var color: "cyan"
+
+    function show(ctx) {
+        Draw.line(ctx, a.x, a.y, b.x, b.y, wall.color, 1);
+
+        //console.log("Boundary.show: a=" + a);
+        //console.log("Boundary.show: b=" + b);
+    }
+
+    Component.onCompleted: {
+        console.log("Boundary constructed: a=" + a + " b=" + b);
+    }
+}