夏の暑さに負けるのは困るけど、勝てる見込みもなく。
こんにちは、muchoです。
以前、若きホープのきょんたろ君がアップしたHtml5 Canvas Templete ver.1を
クラスっぽく作り直してみました。
ついでにcoffee scriptで書いてみました。

Processing.jsを試してみたんですが、IE8でエラーが出て動かなかったため、
簡易Processing風なテンプレートを自作することにした次第です。
そんな背景があるので、記述の仕方はProcessingになるべくあわせています。

基本となるCanvasクラスを拡張して書くことを前提にしています。
coffee scriptだとこんな感じ

class Canvas1 extends Canvas
	#---------------------------------------------------
	setup: ->
		@fillColor = "#202020"
		@strokeColor = 'rgba(0, 0, 0, 0.1)'
		@backgroundColor = 'rgb(240, 240, 240)'

		@pi = Math.PI * 2
		@pointMin = 5
		@pointMax = 60
		@Num = 0

		@play()

	update: ->
		pointNum = (@mouseX / @width * @pointMax + @pointMin)
		@Num += (pointNum - @Num) * 0.1

	draw: ->
		@background()
		points = @getPoints()

		l = points.length
		i = 0
		while i < l
			j = i + 1
			while j < l
				@line points[i][0], points[i][1], points[j][0], points[j][1]
				j++
			i++

吐き出されたJSはこんな感じ

(function() {
  var Canvas1,
    __hasProp = {}.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

  Canvas1 = (function(_super) {

    __extends(Canvas1, _super);

    function Canvas1() {
      return Canvas1.__super__.constructor.apply(this, arguments);
    }

    Canvas1.prototype.setup = function() {
      this.fillColor = "#202020";
      this.strokeColor = 'rgba(0, 0, 0, 0.1)';
      this.backgroundColor = 'rgb(240, 240, 240)';
      this.pi = Math.PI * 2;
      this.pointMin = 5;
      this.pointMax = 60;
      this.Num = 0;
      return this.play();
    };

    Canvas1.prototype.update = function() {
      var pointNum;
      pointNum = this.mouseX / this.width * this.pointMax + this.pointMin;
      return this.Num += (pointNum - this.Num) * 0.1;
    };

    Canvas1.prototype.draw = function() {
      var i, j, l, points, _results;
      this.background();
      points = this.getPoints();
      l = points.length;
      i = 0;
      _results = [];
      while (i < l) {
        j = i + 1;
        while (j < l) {
          this.line(points[i][0], points[i][1], points[j][0], points[j][1]);
          j++;
        }
        _results.push(i++);
      }
      return _results;
    };
  this.Canvas1 = Canvas1;

}).call(this);

ソースをGithubにアップしてみました。まだ慣れてないのでgitドキドキ
https://github.com/devjam/canvas.js

はじめまして。きょんたろです。
今回はhtml5のcanvasをすぐ使うようにTempleteを作ってみました。
まだいろんな技能はないですけどどんどんupdateする予定です。
そして追加したらいいな～ものがあれば教えてくださったら追加しておきます。

１．cssはdevjamのtempleteを使っています。
２．utils.jsにはいろいろutilのjsがicludeされています。
３．canvasUtils.jsにはcanvasの関するjsがicludeされています。
４．canvasBase.jsは基本になるjsです。
CanvasBasic_ver1.zip

 
/**
 * @author shiftBrain DevJam
 * canvas groung ver1 
 * 2012.02.23
 */

//--------------------------------------------------------------------------------
// window loaded
//--------------------------------------------------------------------------------
function canvasStart(canvasID)
{
   if(canvasSupport){
       canvasApp(canvasID);
   }
}

//--------------------------------------------------------------------------------
// canvas support ture ? false
//--------------------------------------------------------------------------------
function canvasSupport(){
    return Modernizr.canvas
}

function canvasApp(canvasID)
{
    // ---------------------------------------------------------------------------
    // Common Variables ----------------------------------------------------------

    var sw;     // window Width
    var sh;     // window height 

    var cvs;    // canvas
    var ctx;    // canvas context
    var resize  = false; // canvas resize function true / false
    var frame   = new FrameRateApp(10); //bin/common/js/utils/frameRateApp.js
    var timer   = new Timer(); //bin/common/js/utils/timerApp.js

    //Debugger.log(frame.getInteval());
    //Debugger.log(frame.getFRAME());

    cvs     = document.getElementById(canvasID);
    ctx     = cvs.getContext("2d");
    resize  = false;
    canavsResize();

    // ---------------------------------------------------------------------------
    // canvas resize -------------------------------------------------------------
    // ## HOW TO USE ##
    // canavsResize()       --> window Size Setting
    // canavsResize(10,10)  --> width=10 height=10 customer size setting
    // ---------------------------------------------------------------------------

    window.addEventListener("resize",canavsResize, false);
    function canavsResize(w,h){
        sw = WindowSize.width();  //bin/common/js/utils/getSize.js
        sh = WindowSize.height();       
        Debugger.log("resizeEvent="+sw+"x"+sh);
        if(!w || !h){
            if(cvs && resize){
                cvs.width  = sw;
                cvs.height = sh;
            }
        }else{
            if(cvs){
                cvs.width  = w;
                cvs.height = h;
            }
        }
        Debugger.log("canvasSize="+cvs.width+"x"+cvs.height);
    }

// ***************************************************************************
// Code main ***********************************************************
    // ここから　変数と関数は　気に入るように変更してもいいです。

    function setup(){

    }

    function main(){
        update();
        draw();
    }

    function update()
    {

    }

    function draw()
    {

    }

// ---------------------------------------------------------------------------
// rendering Setting ---------------------------------------------------------
    setup();
    frame.setFRAME(30);    
    timer.start(main,frame.getInteval());
//setTimeout(timer.stop,3000)
}

こんばんわ
Devjamのコータローです。

本日、ご紹介するのは
GameSaladです。

GameSaladは難しいObjective-CなしでドラッグアンドドロップだけでiOS用のゲームが
作成できてしまう、SDKです。
デモで上がっている物も、シンプルではあるが結構面白い物もあります。

SDKはGameSaladのサイトからDLできます。
Mac OSX専用なので、どんな物なのか確認は出来ていないが
Macを購入予定なので、購入したら試してみたいと思います。

最終的なアウトプットはHTML5で出力されるので
ブラウザ上でもプレイ可能です。

当然、変数やフラグや配列などを使って作成するため
まったくプログラミングの知識がなくても出来るという物ではないが、
1からObjective-Cを覚えるよりは、敷居は低いかと。

ドラックアンドドロップで作るのでRPGやシュミレーションなど
複雑な物の作成は難しいだろうが
パズルゲームやシューティングには向いているかと思います。

Macを購入するまで、しばらく新しいゲームのアイディアを
考えるとしよう。

以上コータローでした。