htor / framing

Online editor for live coding JS graphics with the canvas API.

framing

Online editor for live coding JS graphics with the canvas API. Try it out here!

example

To draw something on the canvas use the shorthand functions or standard canvas functions on the ctx global. Press F1 to get a list of shorthand functions.

// using shorthand
fstyle('orange')
frect(500, 500, 100, 100)
// using standard
ctx.fillStyle('orange')
ctx.fillRect(500, 500, 100, 100)

To run code for each frame, define a function draw(n). This function will be called for each frame. Current frame number is passed as n:

fps(6)
fstyle('orange')
var s = 20,
  x = 0,
  y = 0

function draw(n) {
  for (x = 0; x < w; x += s) {
    for (y = 0; y < h; y += s) {
      frect(x, y, s - 5, s - 5)
    }
  }
}

Control the number of frames per second with fps(n). Look inside the examples directory for examples and inspiration. Press F1 for more help.

usage

esc

Show/hide help window

ctrl+h

Toggle hiding code and output

ctrl+f

Toggle fullscreen mode

cmd/ctrl+enter

Save and evaluate code. If the code errors, the error is displayed on the lower left. The URL is updated with a shareable link.

cmd/ctrl+d

Duplicate current line

cmd/ctrl+k

Comment/uncomment current selection

cmd/ctrl+l

Select current line(s)

back/forward

Back and forward buttons in the browser moves through save history.

installing

Clone this repo and with npm do:

npm install
npm run dev

It should open in your browser at localhost:8080.

inspiration

Inspired by https://hydra-editor.glitch.me, the programming module at https://www.khanacademy.org/computer-programming/new/pjs and http://processingjs.org/.

license

MIT

framing's Issues

code breaks layout when much

scroll container

history push state is broken

ideas

• scoped/line evaluation(not really feasible with eval-solution)
• pixel manipulation (imagedata +setting color depth 1,4,8 / tint(img, rgb, alpha)`)
• norm(n, rstart, rend)
• audio oscillators? maybe not the best thing to deal with @60fps..
• modulation
• (perlin)-noise function noise(x, y?, z?)
• point(x,y)
• triangle(x1,y1,x2,y2,x3,y3)
• quad(x1,y1,x2,y2,x3,y3,x4,y4)
• smooth() (antialiasing)automatic in canvas
• seeding random-function?
• log(...args) nope

make cheat sheet available by hitting alt-?

editor crashes on some code

this crashes the editor:

push()
let t=ms()*.001,c
treset(1)
//tslate(abs(sin(t)*w),h/2)
//rotate(sin(t)*160)
fellips(w/2,h/2,200+sin(t)*222,200)
c=rgba(255,abs(sin(t)*255),25,1)
fstyle(c)
font('100px menlol')
ftext('L.F.O',w/2-130,h/2+30)
pop()
c

code window is duplicated

code window is sometimes skewed down and another one appears. weird stuff.

sort out fps

ensure frames per second.
check performance

gimg: error handling

editor should handle not ok requests (status code not 200) made by gimg to avoid repeating those requests.