Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
Eye-Tracking Classroom
/
StarGazer
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Members
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit
dc172fd6
authored
5 years ago
by
Alexander Bazo
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Refactor renderer component
parent
38964de7
Show whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
152 additions
and
131 deletions
+152
-131
resources/css/default.css
+5
-5
resources/js/Config.js
+2
-1
resources/js/game/GameManager.js
+5
-111
resources/js/game/GameRenderer.js
+124
-0
resources/js/game/StarGazer.js
+14
-13
resources/js/index.js
+2
-1
No files found.
resources/css/default.css
View file @
dc172fd6
...
@@ -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
{
...
...
This diff is collapsed.
Click to expand it.
resources/js/Config.js
View file @
dc172fd6
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
);
...
...
This diff is collapsed.
Click to expand it.
resources/js/game/GameManager.js
View file @
dc172fd6
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
This diff is collapsed.
Click to expand it.
resources/js/game/GameRenderer.js
0 → 100644
View file @
dc172fd6
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
This diff is collapsed.
Click to expand it.
resources/js/game/StarGazer.js
View file @
dc172fd6
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
);
}
}
}
}
...
...
This diff is collapsed.
Click to expand it.
resources/js/index.js
View file @
dc172fd6
...
@@ -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
,
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment