Skip to content

Eye-Tracking Classroom / StarGazer

Go to a project
Commit dc172fd6 by Alexander Bazo
Options

Refactor renderer component

parent 38964de7
Inline Side-by-side
Showing with 152 additions and 131 deletions
resources/css/default.css
...@@ -43,8 +43,8 @@ body { ...@@ -43,8 +43,8 @@ body {
border-radius: 5px; border-radius: 5px;
border-width: 5px; border-width: 5px;
border-style: solid; border-style: solid;
background-color: #1b744a; background-color: #3f0d76;
border-color: #aaffd8; border-color: #d2ccf3;
text-align: center; text-align: center;
line-height: 10vh; line-height: 10vh;
font-size: 5vh; font-size: 5vh;
...@@ -53,9 +53,9 @@ body { ...@@ -53,9 +53,9 @@ body {
#startButton:hover { #startButton:hover {
cursor: pointer; cursor: pointer;
background-color: #aaffd8; background-color: #d2ccf3;
border-color: #1b744a; border-color: #3f0d76;
color: #1b744a; color: #3f0d76;
} }
canvas { canvas {
......
resources/js/Config.js
var Config = { var Config = {
GAZE_SERVER_URL: "ws://localhost:8001/gaze", GAZE_SERVER_URL: "ws://localhost:8001/gaze",
TARGET_FPS: 120, TARGET_FPS: 120,
SHOW_FPS: true, SHOW_DEBUG_INFO: true,
USE_MOUSE_INPUT_AS_FAKE_GAZE_DATA: true, USE_MOUSE_INPUT_AS_FAKE_GAZE_DATA: true,
USE_LOGGER: true, USE_LOGGER: true,
SCREEN_WIDTH: screen.width, SCREEN_WIDTH: screen.width,
SCREEN_HEIGHT: screen.height, SCREEN_HEIGHT: screen.height,
GAME_VERSION: 0.1,
}; };
Object.freeze(Config); Object.freeze(Config);
......
resources/js/game/GameManager.js
const BACKGROUND_COLOR = "#333", import GameRenderer from "./GameRenderer.js";
DEFAULT_GAZE_POINT_RADIUS = 15,
DEFAULT_GAZE_POINT_COLOR = "#ff007b",
FPS_FONT = "16px ShareTech",
FPS_COLOR = "#ffffff",
MAX_GAZE_POINT_AGE = 500;
var lastUpdate, class GameManager {
lastDelta,
fpsBuffer = [];
class GameManger { setOptions(options) {
constructor() {
this.gazePoints = new Map();
}
setCanvas(canvas) {
this.canvas = canvas;
this.context = this.canvas.getContext("2d", { alpha: false });
this.canvas.style.backgroundColor = BACKGROUND_COLOR;
}
setFrameRate(fps) {
this.fps = fps;
}
showFPS() {
this.shouldDisplayFrameRate = true;
}
hideFPS() {
this.shouldDisplayFrameRate = false;
}
setSize(width, height) {
this.canvas.width = width;
this.canvas.height = height;
this.canvas.style.width = `${width}px`;
this.canvas.style.height = `${height}px`;
} }
start() { start() {
let targetFrameTime = 1000 / this.fps;
this.setUpdateTime();
this.loop = setInterval(this.onTick.bind(this), targetFrameTime);
}
setUpdateTime() {
lastUpdate = Date.now();
}
setDelta() {
lastDelta = Date.now() - lastUpdate;
}
addGazePoint(point) {
this.gazePoints.set(point.id, point);
}
removeGazePoint(point) {
this.gazePoints.delete(point.id);
}
onTick() {
this.setDelta();
this.updateGazePoints();
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.drawGazePoints();
if (this.shouldDisplayFrameRate === true) {
this.drawFrameRate();
}
this.setUpdateTime();
}
updateGazePoints() {
let now = Date.now();
for (let item of this.gazePoints) {
let point = item[1];
if (now - point.createdAt > MAX_GAZE_POINT_AGE) {
this.removeGazePoint(point);
}
}
}
drawGazePoints() {
let now = Date.now();
this.context.fillStyle = DEFAULT_GAZE_POINT_COLOR;
for (let item of this.gazePoints) {
let relativeAge = 1 - ((now - item[1].createdAt) /
MAX_GAZE_POINT_AGE);
this.context.save();
this.context.globalAlpha = relativeAge;
this.context.beginPath();
this.context.ellipse(item[1].targetX, item[1].targetY,
relativeAge * DEFAULT_GAZE_POINT_RADIUS, relativeAge * DEFAULT_GAZE_POINT_RADIUS, Math.PI / 4,
0, 2 * Math.PI);
this.context.fill();
this.context.closePath();
this.context.restore();
}
}
drawFrameRate() {
let fps = parseInt(1000 / lastDelta),
averageFps;
fpsBuffer.push(fps);
if(fpsBuffer.length === this.fps) {
averageFps = parseInt(fpsBuffer.reduce((a,b) => a + b, 0) / fpsBuffer.length);
fpsBuffer.shift();
}
this.context.beginPath();
this.context.font = FPS_FONT;
this.context.fillStyle = FPS_COLOR;
this.context.fillText(`FPS: ${averageFps}`, 30, 30);
this.context.closePath();
} }
} }
export default GameManger; export default new GameManager();
\ No newline at end of file \ No newline at end of file
resources/js/game/GameRenderer.js 0 → 100644
const BACKGROUND_COLOR = "#333",
DEFAULT_GAZE_POINT_RADIUS = 15,
DEFAULT_GAZE_POINT_COLOR = "#3f0d76",
DEBUG_POSITION_OFFSET = 10,
DEBUG_FONT = "16px ShareTech",
DEBUG_COLOR = "#ffffff",
MAX_GAZE_POINT_AGE = 1000;
var lastUpdate,
lastDelta,
fpsBuffer,
gazePoints,
version,
debug,
frameRate,
canvas,
context,
loop;
function onTick() {
setDelta();
updateGazePoints();
context.clearRect(0, 0, canvas.width, canvas.height);
drawGazePoints();
if (debug === true) {
drawDebugInfo();
}
setUpdateTime();
}
function setUpdateTime() {
lastUpdate = Date.now();
}
function setDelta() {
lastDelta = Date.now() - lastUpdate;
}
function addGazePoint(point) {
gazePoints.set(point.id, point);
}
function removeGazePoint(point) {
gazePoints.delete(point.id);
}
function updateGazePoints() {
let now = Date.now();
for (let item of gazePoints) {
let point = item[1];
if (now - point.createdAt > MAX_GAZE_POINT_AGE) {
removeGazePoint(point);
}
}
}
function drawGazePoints() {
let now = Date.now();
context.fillStyle = DEFAULT_GAZE_POINT_COLOR;
for (let item of gazePoints) {
let relativeAge = 1 - ((now - item[1].createdAt) /
MAX_GAZE_POINT_AGE);
context.save();
context.globalAlpha = relativeAge;
context.beginPath();
context.ellipse(item[1].targetX, item[1].targetY,
relativeAge * DEFAULT_GAZE_POINT_RADIUS, relativeAge *
DEFAULT_GAZE_POINT_RADIUS, Math.PI / 4,
0, 2 * Math.PI);
context.fill();
context.closePath();
context.restore();
}
}
function drawDebugInfo() {
let fps = parseInt(1000 / lastDelta),
averageFps;
fpsBuffer.push(fps);
if (fpsBuffer.length === frameRate) {
averageFps = parseInt(fpsBuffer.reduce((a, b) => a + b, 0) / fpsBuffer.length);
fpsBuffer.shift();
}
context.beginPath();
context.font = DEBUG_FONT;
context.fillStyle = DEBUG_COLOR;
context.fillText(`${version} | ${averageFps}fps`, DEBUG_POSITION_OFFSET, canvas.height-DEBUG_POSITION_OFFSET);
context.closePath();
}
class GameRenderer {
constructor() {
fpsBuffer = [];
gazePoints = new Map();
}
start(options) {
canvas = options.canvas;
canvas.width = options.width;
canvas.height = options.height;
canvas.style.width = `${options.width}px`;
canvas.style.height = `${options.height}px`;
context = canvas.getContext("2d", { alpha: false });
canvas.style.backgroundColor = BACKGROUND_COLOR;
frameRate = options.frameRate;
version = options.version;
debug = options.debug;
setUpdateTime();
loop = setInterval(onTick, (1000 / frameRate));
}
addGazePoint(point) {
addGazePoint(point);
}
removeGazePoint(point) {
removeGazePoint(point);
}
}
export default new GameRenderer();
\ No newline at end of file
resources/js/game/StarGazer.js
import Logger from "../utils/Logger.js"; import Logger from "../utils/Logger.js";
import GameManager from "./GameManager.js"; import GameManager from "./GameManager.js";
import GameRenderer from "./GameRenderer.js";
var canvas, gm, provider; var canvas, provider;
function init(config) { function init(options) {
Logger.log("Starting StarGazer game"); Logger.log("Starting StarGazer game");
canvas = config.canvas; canvas = options.canvas;
gm = new GameManager(); GameRenderer.start({
gm.setCanvas(canvas); canvas: canvas,
gm.setFrameRate(config.fps); frameRate: options.fps,
if (config.showFPS === true) { version: options.version,
gm.showFPS(); debug: options.showDebug,
} width: options.width,
gm.setSize(config.width, config.height); height: options.height,
gm.start(); });
provider = config.gazeDataProvider; provider = options.gazeDataProvider;
provider.addEventListener("dataavailable", onGazeUpdate); provider.addEventListener("dataavailable", onGazeUpdate);
} }
...@@ -22,7 +23,7 @@ function onGazeUpdate(event) { ...@@ -22,7 +23,7 @@ function onGazeUpdate(event) {
let gazePoint = event.data; let gazePoint = event.data;
gazePoint.linkTo(canvas); gazePoint.linkTo(canvas);
if (gazePoint.hasLink) { if (gazePoint.hasLink) {
gm.addGazePoint(gazePoint); GameRenderer.addGazePoint(gazePoint);
} }
} }
......
resources/js/index.js
...@@ -20,7 +20,8 @@ function prepareGame() { ...@@ -20,7 +20,8 @@ function prepareGame() {
StarGazer.init({ StarGazer.init({
canvas: canvas, canvas: canvas,
fps: Config.TARGET_FPS, fps: Config.TARGET_FPS,
showFPS: Config.SHOW_FPS, version: `Star Gazer, build ${Config.GAME_VERSION}`,
showDebug: Config.SHOW_DEBUG_INFO,
width: Config.SCREEN_WIDTH, width: Config.SCREEN_WIDTH,
height: Config.SCREEN_HEIGHT, height: Config.SCREEN_HEIGHT,
gazeDataProvider: dataProvider, gazeDataProvider: dataProvider,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment