Frequency Nodes

Nodes respond to a given frequency if the input is within a certain range of that frequency. The intensity of the response is mapped to a sinus curve. This logic is useful for lists of elements where the input is the mouse position and the output is a transformation of a given intensity.

by soulwire

HTML

<script src="https://raw.github.com/soulwire/sketch.js/master/js/sketch.js"></script>
<div id="container"></div>

CSS

html, body {
    background: #f2f2f2;
    margin: 0;
}

CoffeeScript

class Node
  
  constructor: ( @freq, @range, @radius = 50 ) ->
    @color = "hsl(#{floor random 360},#{floor random 20, 100}%,#{floor random 20, 90}%)"
    @lo = @freq - @range / 2
    @hi = @freq + @range / 2
    
  draw: ( ctx, x ) ->
    
    ctx.circle @freq * ctx.width, 100, @radius * @f x
    ctx.fillStyle = @color
    ctx.fill()
      
  map: (x,a,b,c,d) -> (x-a)/(b-a) * (d-c) + c
    
  f: (x) -> if x < @lo or x > @hi then 0 else sin(PI*@map(x,@lo,@hi,0,1))

Sketch.create
  
  container: document.getElementById 'container'
  
  setup: ->
    
    @font = '14px Courier'
    @nodes = (new Node x, 0.2 for x in [0.1..0.9] by 0.05)
    
  draw: ->
    
    x = @mouse.x / @width
    
    node.draw @, x for node in @nodes
    
    @circle @mouse.x, @mouse.y, 20
    @fillStyle = 'rgba(0,0,0,0.2)'
    @fill()
    
  circle: ( x, y, r ) ->
    
    @beginPath()
    @arc x, y, r, 0, TWO_PI
    @closePath()