Permalink
Browse files

Update Studio.framer

  • Loading branch information...
nvh committed Jun 30, 2016
1 parent 6d9790d commit ff8a671fd72dec3667fb4dc6c56966968899cb9e
Showing with 113 additions and 1 deletion.
  1. +112 −0 extras/Studio.framer/app.coffee
  2. +1 −1 extras/Studio.framer/framer/config.json
@@ -0,0 +1,112 @@
rk4 = new Framer.SpringRK4Animator
tension: 1
friction: 0
velocity: 0
tolerance: 1/10000
#Draw a stupid graph
Defaults =
colors:
curveWidgetLine: "#999999"
curveWidgetAxis: "#292929"
curveWidgetBackground: "#1E1E1E"
class Curve extends Layer
constructor: (options = {}) ->
super _.defaults options,
backgroundColor: Defaults.colors.curveWidgetBackground
width: 120
height: 120
x: 90
y: 20
borderRadius: 2
borderWidth: 1
borderColor: Defaults.colors.textInputBorder
style:
"box-sizing": "border-box"
@canvasSize = @width
@factor = options.factor ? 1
#Lines
@xLine = new Layer
backgroundColor: Defaults.colors.curveWidgetAxis
height: 1
width: @canvasSize-2*@borderWidth
parent: @
@xLine.centerY()
@yLine = new Layer
backgroundColor: Defaults.colors.curveWidgetAxis
width: 1
height: @canvasSize-2*@borderWidth
parent: @
@yLine.centerX()
@canvasLayer = new Layer
width:@width
height:@height
parent:@
backgroundColor:null
# Start canvas drawing
@canvas = document.createElement("canvas")
# For 2x
@canvas.width = @canvasSize * 2
@canvas.height = @canvasSize * 2
@canvas.style.width = "#{@canvasSize}px"
@canvas.style.height = "#{@canvasSize}px"
# Append Canvas
@canvasLayer._element.appendChild(@canvas)
@ctx = @canvas.getContext("2d")
@ctx.scale(2, 2)
# Style
@ctx.strokeStyle = Defaults.colors.curveWidgetLine
@ctx.lineWidth = 1
# Values
@values = 0
@animator = new Framer.LinearAnimator
@render()
# Set-up
render: ->
@values = @animator.values(1/120,200)
@ctx.clearRect(0, 0, @width, @height)
@ctx.beginPath()
adjustedValues = []
values = @values
for index, value of values
previous = values[index - 1] * (@canvasSize / 2)
current = values[index] * (@canvasSize / 2)
delta = previous - current
if Math.abs(delta) > 0.01
adjustedValues.push(value)
for index, value of adjustedValues
l = adjustedValues.length
i = index
x = parseInt(i) * (@canvasSize / (l))
y = (1-(value * @factor)) * @canvasSize
@ctx.lineTo(x, y)
@ctx.stroke()
curve = new Curve
width: 500
height: 500
curve.center()
curve.factor = 0.5
curve.animator = rk4
curve.render()
@@ -10,7 +10,7 @@
"updateDelay" : 0.3,
"deviceScale" : 1,
"foldedCodeRanges" : [
"{96, 2417}"
],
"orientation" : 0
}

0 comments on commit ff8a671

Please sign in to comment.