Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
with
454 additions
and 14 deletions.
- +15 −1 Makefile
- +3 −0 extras/CactusFramer/pages/perf.html
- +82 −13 extras/CactusFramer/static/app.coffee
- +10 −0 perf/index.html
- +109 −0 perf/init.coffee
- +137 −0 perf/init.js
- +98 −0 perf/runner.js
@@ -0,0 +1,3 @@ | ||
<!-- <script src="{% static 'react.min.js' %}"></script> --> | ||
<script src="{% static 'framer.js' %}"></script> | ||
<script src="{% static 'perf.js' %}"></script> |
@@ -1,23 +1,92 @@ | ||
getTime = Date.now | ||
|
||
if performance.now | ||
getTime = -> performance.now() | ||
|
||
# class Timer | ||
# constructor: -> @start() | ||
# start: -> @_startTime = getTime() | ||
# stop: -> getTime() - @_startTime | ||
|
||
LAYERS = for i in [1..200] | ||
class FPSTimer | ||
|
||
layerC = new Layer | ||
x: Math.random() * window.innerWidth, | ||
y: Math.random() * window.innerHeight | ||
constructor: -> @start() | ||
|
||
start: -> | ||
@_frameCount = 0 | ||
@_startTime = getTime() | ||
|
||
Framer.Loop.on("render", @_tick) | ||
|
||
stop: -> | ||
|
||
time = getTime() - @_startTime | ||
|
||
Framer.Loop.off("render", @_tick) | ||
|
||
results = | ||
time: time | ||
frames: @_frameCount | ||
fps: 1000 / (time / @_frameCount) | ||
return results | ||
_tick: => | ||
@_frameCount++ | ||
run = (options, callback) -> | ||
Utils.interval .3, -> | ||
|
||
layer = _.shuffle(LAYERS)[0]; | ||
|
||
layer.animate | ||
properties: | ||
context = new Framer.Context(name:"TestRun") | ||
context.run -> _run options, (results) -> | ||
context.reset() | ||
callback(results) | ||
_run = (options, callback) -> | ||
startTime = getTime() | ||
results = {} | ||
LAYERS = for i in [1..options.n] | ||
layerC = new Layer | ||
x: Math.random() * window.innerWidth, | ||
y: Math.random() * window.innerHeight | ||
# rotationX: Math.random() * 180 | ||
# rotationY: Math.random() * 180 | ||
curve: "spring(5,1, 0)" | ||
results.layers = Framer.CurrentContext._layerList.length | ||
results.buildTotal = getTime() - startTime | ||
results.buildLayer = results.buildTotal / results.layers | ||
t1 = new FPSTimer | ||
for layer in LAYERS | ||
layer.animate | ||
properties: | ||
x: Math.random() * window.innerWidth, | ||
y: Math.random() * window.innerHeight | ||
curve: "spring(1000, 10, 0)" | ||
layer.on Events.AnimationEnd, -> | ||
results.fps = t1.stop() | ||
callback(results) | ||
Utils.domComplete -> | ||
c = 0 | ||
callback = (results) -> | ||
if results | ||
print "#{c} - #{results.layers} | ||
Build: #{Utils.round(results.buildTotal, 0)}ms/#{Utils.round(results.buildLayer, 2)}ms | ||
FPS: #{Utils.round(results.fps.fps, 1)}" | ||
|
||
if c < 100 | ||
c++ | ||
run {n: c * 20}, callback | ||
|
||
callback() | ||
|
||
|
||
|
||
|
@@ -0,0 +1,10 @@ | ||
<html> | ||
<head> | ||
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
|
||
</head> | ||
<body> | ||
<script src="../build/framer.js"></script> | ||
<script src="init.js"></script> | ||
</body> | ||
</html> |
@@ -0,0 +1,109 @@ | ||
getTime = Date.now | ||
|
||
if performance?.now | ||
getTime = -> performance.now() | ||
|
||
# class Timer | ||
# constructor: -> @start() | ||
# start: -> @_startTime = getTime() | ||
# stop: -> getTime() - @_startTime | ||
|
||
class FPSTimer | ||
|
||
constructor: -> @start() | ||
|
||
start: -> | ||
@_frameCount = 0 | ||
@_startTime = getTime() | ||
|
||
Framer.Loop.on("render", @_tick) | ||
|
||
stop: -> | ||
|
||
time = getTime() - @_startTime | ||
|
||
Framer.Loop.off("render", @_tick) | ||
|
||
results = | ||
time: time | ||
frames: @_frameCount | ||
fps: 1000 / (time / @_frameCount) | ||
return results | ||
_tick: => | ||
@_frameCount++ | ||
_contextLayer = new Layer width:800, height:800, backgroundColor:"white" | ||
_contextLayer.center() | ||
_contextLayer.style.border = "1px solid grey" | ||
run = (options, callback) -> | ||
context = new Framer.Context(name:"TestRun", parentLayer:_contextLayer) | ||
context.run -> _run options, (results) -> | ||
context.reset() | ||
callback(results) | ||
_run = (options, callback) -> | ||
startTime = getTime() | ||
results = {} | ||
LAYERS = for i in [1..options.n] | ||
layerC = new Layer | ||
x: Math.random() * 800, | ||
y: Math.random() * 800 | ||
results.layers = Framer.CurrentContext._layerList.length | ||
results.buildTotal = getTime() - startTime | ||
results.buildLayer = results.buildTotal / results.layers | ||
t1 = new FPSTimer | ||
for layer in LAYERS | ||
layer.animate | ||
properties: | ||
midX: Math.random() * window.innerWidth, | ||
midY: Math.random() * window.innerHeight | ||
curve: "linear" | ||
time: 0.1 | ||
layer.on Events.AnimationEnd, -> | ||
results.fps = t1.stop() | ||
callback(results) | ||
Utils.domComplete -> | ||
c = 0 | ||
minFPS = 50 | ||
tooSlow = 0 | ||
tooSlowMax = 2 | ||
callback = (results) -> | ||
if results | ||
output = "#{c} - #{results.layers}" | ||
output += "\tBuild: #{Utils.round(results.buildTotal, 0)}ms /#{Utils.round(results.buildLayer, 2)}ms" | ||
output += "\tFPS: #{Utils.round(results.fps.fps, 1)}" | ||
|
||
console.log output | ||
|
||
if results.fps.fps < minFPS | ||
tooSlow++ | ||
|
||
if c < 100 and tooSlow < tooSlowMax | ||
c++ | ||
run {n: c * 20}, callback | ||
else | ||
window.phantomComplete = true | ||
|
||
callback() | ||
|
||
|
||
|
||
|
Oops, something went wrong.