{"id":317,"date":"2012-10-09T15:30:39","date_gmt":"2012-10-09T16:30:39","guid":{"rendered":"http:\/\/www.tamats.com\/blog\/?p=317"},"modified":"2012-11-05T18:12:40","modified_gmt":"2012-11-05T19:12:40","slug":"web-experiment-simple-coding","status":"publish","type":"post","link":"https:\/\/www.tamats.com\/blog\/?p=317","title":{"rendered":"Web Experiment: Simple Canvas"},"content":{"rendered":"

Today I’m going to talk about a tiny web app I coded the last week to create images and animations programatically, it is called Simplecanvas.<\/p>\n

\"\"<\/a>
Click the image to try it<\/figcaption><\/figure>\n

The idea is to create images using simple functions like move or drawImage, and test the results instantly by pressing control+enter.<\/p>\n

<\/p>\n

Introduction<\/h3>\n

As a graphics programmer and pseudo-artist I’m always ashamed that if somebody ask me to code some kind of procedural image using simple shapes and algorithms, although I have the knowledge, I wouldnt have the tools to do it right away.<\/p>\n

I can create an OpenGL application from scratch but to do a nice image it I will have to program first\u00c2\u00a0 the framework with some useful functions like drawing circles, loading images and so. I have coded plenty of frameworks with different parts of that idea but none of them will fit for this specific purpose.<\/p>\n

This kind of frameworks already exists (Processing for Java, openFrameworks or Cinder for C++) but I wanted something I could use right away without having to install anything.<\/p>\n

Thats why I started thinking about creating my own little framework for fast coding graphics applications using Javascript and the Canvas element so it can be used right away just entering the site.<\/p>\n

How does it works<\/h3>\n

You can code your image or animation similar to what I did in previous web experiments like hotcoding<\/a> or mathnimatics<\/a>.You code and you press control+enter to execute. There are lots of webs where you can code on the web and test it clicking a button, like jsfiddle<\/a>, or webglplayground<\/a>, even you can share your creations with the rest of the users.<\/p>\n

But I wanted to make it simplier and more compact. I wanted to make it so simple that I could use to teach programming to people how doesnt know where to start.<\/p>\n

This are some of the features:<\/p>\n