Skip to content

Eye-Tracking Classroom / StarGazer

Go to a project
Commit f9bd9b08 by Alexander Bazo
Options

Inital commit

parents
Expand all
Inline Side-by-side
Showing with 365 additions and 0 deletions
.eslintrc 0 → 100644
{
"parserOptions": {
"sourceType": "module"
},
"rules":
{
"block-scoped-var": "error",
"camelcase": "warn",
"comma-dangle": ["error", "always-multiline"],
"consistent-return": "error",
"curly": "error",
"default-case": "error",
"eqeqeq": "error",
"guard-for-in": "error",
"no-alert": "error",
"no-console": "warn",
"no-else-return": "error",
"no-empty-function": "error",
"no-eval": "error",
"no-eq-null": "error",
"no-extend-native": "warn",
"no-extra-bind": "error",
"no-loop-func": "error",
"no-magic-numbers": ["warn", {"ignore": [0, 1, -1], "ignoreArrayIndexes": true}],
"no-multiple-empty-lines": ["warn", {"max": 1}],
"no-multi-spaces": "warn",
"no-new": "error",
"no-new-func": "error",
"no-new-wrappers": "error",
"no-unused-expressions": "error",
"no-useless-concat": "error",
"no-undef-init": "error",
"no-underscore-dangle": "error",
"no-param-reassign": "error",
"no-self-compare": "error",
"no-void": "error",
"no-with": "error",
"one-var": "error",
"quotes": ["warn", "double"],
"semi": "error",
"strict": "error",
"vars-on-top": "error",
"yoda": "error"
},
"env":
{
"es6": true,
"browser": true
},
"extends": "eslint:recommended"
}
\ No newline at end of file
.gitignore 0 → 100644
# node
node_modules
# dependencies
vendors/
\ No newline at end of file
.jsbeautifyrc 0 → 100644
{
// Details: https://github.com/victorporof/Sublime-HTMLPrettify#using-your-own-jsbeautifyrc-options
"js": {
"allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
"brace_style": "collapse-preserve-inline",
"break_chained_methods": false,
"e4x": false,
"eol": "\n",
"end_with_newline": false,
"indent_char": " ",
"indent_level": 0,
"indent_size": 2,
"indent_with_tabs": false,
"jslint_happy": false,
"keep_array_indentation": false,
"keep_function_indentation": false,
"max_preserve_newlines": 0,
"preserve_newlines": true,
"space_after_anon_function": false,
"space_before_conditional": true,
"space_in_empty_paren": false,
"space_in_paren": false,
"unescape_strings": false,
"wrap_line_length": 80
}
}
\ No newline at end of file
Readme.md 0 → 100644
# Star Gazer
## Usage
Run `npm install` to install dependencies and `npm start` to run the game.
\ No newline at end of file
index.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Star Gazer</title>
<link rel="stylesheet" href="resources/css/default.css">
</head>
<body>
<header>
<h1>Star Gazer</h1>
<canvas>
</canvas>
</header>
<content>
</content>
<script type="application/javascript" src="vendors/gazeclient.js"></script>
<script type="module" src="resources/js/index.js"></script>
</body>
</html>
package.json 0 → 100644
{
"name": "stargazer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"postinstall": "npm run downloadClientLibrary",
"downloadClientLibrary": "download --out vendors https://lab.las3.de/gitlab/eye-tracking-classroom/gaze-client.js/raw/master/build/gazeclient.js",
"start": "http-server -o"
},
"author": "Alexander Bazo <alexanderbazo@googlemail.com>",
"license": "MIT",
"dependencies": {
"download-cli": "^1.1.1",
"http-server": "^0.11.1"
}
}
resources/js/game/GameManager.js 0 → 100644
import Logger from "../utils/Logger.js";
const BACKGROUND_COLOR = "rgba(30,30,30,0.5)",
DEFAULT_GAZE_POINT_RADIUS = 10,
DEFAULT_GAZE_POINT_COLOR = "#ff007b",
MAX_GAZE_POINT_AGE = 500;
var lastUpdate,
lastDelta;
class GameManger {
constructor() {
this.gazePoints = new Map();
}
setCanvas(canvas) {
this.canvas = canvas;
this.context = this.canvas.getContext("2d");
this.canvas.style.backgroundColor = BACKGROUND_COLOR;
}
setFrameRate(fps) {
this.fps = fps;
}
setSize(width, height) {
this.canvas.width = width;
this.canvas.height = height;
this.canvas.style.width = `${width}px`;
this.canvas.style.height = `${height}px`;
}
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();
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) {
this.context.save();
this.context.globalAlpha = 1 - (now - item[1].createdAt) / MAX_GAZE_POINT_AGE;
this.context.beginPath();
this.context.ellipse(item[1].targetX, item[1].targetY,
DEFAULT_GAZE_POINT_RADIUS, DEFAULT_GAZE_POINT_RADIUS, Math.PI / 4,
0, 2 * Math.PI);
this.context.fill();
this.context.closePath();
this.context.restore();
}
}
}
export default GameManger;
\ No newline at end of file
resources/js/game/GazePoint.js 0 → 100644
class GazePoint {
constructor(screenX, screenY, id) {
this.screenX = screenX;
this.screenY = screenY;
this.createdAt = Date.now();
this.id = id || this.createdAt;
}
linkTo(node) {
let bb = node.getBoundingClientRect(),
coordinates;
if (this.screenX >= bb.left && this.screenX <= bb.right && this.screenY >=
bb.top && this.screenY <= bb.bottom) {
this.hasLink = true;
this.link = node;
this.targetX = this.screenX - bb.left;
this.targetY = this.screenY - bb.top;
}
return coordinates;
}
}
export default GazePoint;
\ No newline at end of file
resources/js/game/StarGazer.js 0 → 100644
import Logger from "../utils/Logger.js";
import GameManager from "./GameManager.js";
var canvas, gm;
class StarGazer {
init(config) {
Logger.log("Starting StarGazer game");
canvas = config.canvas;
gm = new GameManager();
gm.setCanvas(canvas);
gm.setFrameRate(config.fps);
gm.setSize(config.width, config.height);
gm.start();
}
onGazeUpdate(gazeUpdate) {
gazeUpdate.target.linkTo(canvas);
if(gazeUpdate.target.hasLink) {
gm.addGazePoint(gazeUpdate.target);
}
}
}
export default new StarGazer();
\ No newline at end of file
resources/js/index.js 0 → 100644
import Logger from "./utils/Logger.js";
import StarGazer from "./game/StarGazer.js";
import GazePoint from "./game/GazePoint.js";
function init() {
Logger.enable();
document.addEventListener("mousemove", onMouseMove);
StarGazer.init({
canvas: document.querySelector("canvas"),
fps: 60,
width: 800,
height: 800,
});
}
function onMouseMove(event) {
StarGazer.onGazeUpdate({
target: new GazePoint(event.screenX, event.screenY),
});
}
init();
\ No newline at end of file
resources/js/utils/Events.js 0 → 100644
class Event {
constructor(type, data) {
this.type = type;
this.data = data;
}
}
export default Event;
\ No newline at end of file
resources/js/utils/Logger.js 0 → 100644
/* eslint-disable no-console */
class Logger {
constructor() {
this.enabled = false;
}
enable() {
this.enabled = true;
}
disable() {
this.enabled = false;
}
log(msg) {
if(this.enabled === false) {
return;
}
console.log(msg);
}
}
export default new Logger();
\ No newline at end of file
resources/js/utils/Observable.js 0 → 100644
class Observable {
constructor() {
this.listeners = {};
}
addEventListener(type, callback) {
if (this.listeners[type] === undefined) {
this.listeners[type] = [];
}
this.listeners[type].push(callback);
}
notifyAll(event) {
let listeners = this.listeners[event.type];
if (listeners) {
for (let i = 0; i < listeners.length; i++) {
listeners[i](event);
}
}
}
}
export default Observable;
\ No newline at end of file
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