P5
This sketch is inspired by bokeh, which are artifacts that cameras make when they’re not in focus.
### Ben Scott # 2015-10-02 # CoffeeScript Sketch ###
### `P5.js` Main class ###
This is our instance of the main class in the `P5.js` library.
The argument is the link between the library and this code, and the special functions we override in the class definition arecallbacks for P5.js events.
~~~coffee
myp = new p5 (p) ->
### Input ###
alt = false
mouse = [p.mouseX,p.mouseY]
lastMouse = [p.pmouseX,p.pmouseY]
### DOM ###
[container,canvas] = [null,null]
[r_sl,g_sl,b_sl] = [null,null,null]
[d_sl,s_sl,rand_sl] = [null,null,null]
Events
These functions are automatic callbacks for P5.js
events:
p.preload
is called once, immediately beforesetup
p.setup
is called once, at the beginning of executionp.draw
is called as frequently asp.framerate
p.keyPressed
is called on every key input eventp.mousePressed
is called on mouse downp.windowResized
keeps window fullp.remove
destroys everything in the sketch
p.setup = ->
setupCanvas()
setupDOM()
p.noStroke()
p.frameRate(60)
p.draw = ->
getInput()
drawDOM()
p.keyPressed = ->
alt = !alt if (p.keyCode is p.ALT)
p.getInput = ->
mouse = [p.mouseX,p.mouseY]
if (p.mouseIsPressed)
p.mousePressed()
p.mousePressed = ->
s = s_sl.value()
[x,y] = [16*s,16*s]
d = d_sl.value()
rgb = p.color(
r_sl.value()+p.random(d)
g_sl.value()+p.random(d)
b_sl.value()+p.random(d),127)
rand = rand_sl.value()
delta_size = p.random(s/2)
if (alt) then p.fill(255)
else p.fill(rgb)
p.ellipse(
mouse[0]+p.random(-rand,rand)
mouse[1]+p.random(-rand,rand)
x*delta_size,y*delta_size)
#p.windowResized = -> p.resizeCanvas(p.windowWidth, p.windowHeight);
#p.remove = -> p5 = null
DOM Functions
These functions initialize the DOM objects in the sketch.
setupCanvas
creates and positions the main canvassetupDOM
creates and positions the color slidersdrawDOM
renders the color sliders on every drawgetInput
collects input data, processes it, and in the case ofp.mouseIsPressed
, it calls the mouse event callback (otherwise it single-clicks)
setupCanvas = ->
container = document.getElementById("CoffeeSketch")
canvas = p.createCanvas(756,512)
canvas.parent('CoffeeSketch')
canvas.class("entry")
canvas.style("max-width", "100%")
setupDOM = ->
writeDOMText(" Red: ")
r_sl = p.createSlider(0,255,100)
r_sl.parent('CoffeeSketch')
writeDOMText(" Green: ")
g_sl = p.createSlider(0,255,0)
g_sl.parent('CoffeeSketch')
writeDOMText(" Blue: ")
b_sl = p.createSlider(0,255,255)
b_sl.parent('CoffeeSketch')
writeDOMText(" Size: ")
s_sl = p.createSlider(1,8,4)
s_sl.parent('CoffeeSketch')
writeDOMText(" Delta: ")
d_sl = p.createSlider(0,64,32)
d_sl.parent('CoffeeSketch')
writeDOMText(" Random: ")
rand_sl = p.createSlider(0,16,4)
rand_sl.parent('CoffeeSketch')
drawDOM = ->
p.fill(0)
#p.text("Red",150,16+4)
writeDOMText = (s) ->
temp = document.createTextNode(s)
container.appendChild(temp)
getInput = ->
mouse = [p.mouseX,p.mouseY]
lastMouse = [p.pmouseX,p.pmouseY]
p.mousePressed() if (p.mouseIsPressed)