HTML5 CANVAS chapter 3

3章はテキストの扱い方。プロパティをインタラクティブにいじれるものを作りながらText属性に関して学んでいく感じ。これといって難しい所はなくて、さくっとこなした。

text

ProductName HTML5 Canvas: Native Interactivity and Animation for the Web
Steve Fulton
Oreilly & Associates Inc / 2922円 ( 2011-05-13 )


Express+jade+coffeeで書いたのはGitHubにあげている。

ベルマンフォード法とダイクストラのアルゴリズム

プログラミングコンテストチャレンジブックから

ProductName プログラミングコンテストチャレンジブック
秋葉 拓哉
毎日コミュニケーションズ / 3444円 ( 2010-09-11 )


ベルマンフォード

高々|V|-1回で最安定経路にたどり着くっていうのがなかなか理解できなくて、紙に書きながら理解した。

edge = [[0,1,2],[0,2,5],[1,2,4],[1,3,6],[1,4,10],[2,3,2],[3,5,1],[4,5,3],[4,6,5],[5,6,9],
       [1,0,2],[2,0,5],[2,1,4],[3,1,6],[4,1,10],[3,2,2],[5,3,1],[5,4,3],[6,4,5],[6,5,9]]

def shortest_path(edge,num_v,start):
    inf = float("inf")
    d = [inf for f in range(num_v)]
    d[start] = 0;
    while True:
        update = False
        for e in edge:
            if d[e[0]] != inf and d[e[1]] > d[e[0]] + e[2]:
                d[e[1]] = d[e[0]] + e[2]
                update = True
        if not update:
            break
    return d

print shortest_path(edge,7,0)[6]

ダイクストラ

こっちは馴染み深い

edge = [[0,1,2],[0,2,5],[1,2,4],[1,3,6],[1,4,10],[2,3,2],[3,5,1],[4,5,3],[4,6,5],[5,6,9],
       [1,0,2],[2,0,5],[2,1,4],[3,1,6],[4,1,10],[3,2,2],[5,3,1],[5,4,3],[6,4,5],[6,5,9]]

def dijkstra(edge,num_v,start):
    inf = float("inf")
    cost = [[inf for i in range(num_v)] for j in range(num_v)]
    for e in edge: cost[e[0]][e[1]] = e[2]
    used = [False for i in range(num_v)]
    d = [inf for j in range(num_v)]

    d[start] = 0;
    while True:
        v = -1
        for u in range(num_v):
            if (not used[u]) and (v == -1 or d[u] < d[v]):
                v = u
        if v == -1: break
        used[v] = True
        for x in range(num_v):
            d[x] = d[x] if d[x] < d[v] + cost[v][x] else d[v] + cost[v][x]
        print d
    return d[num_v-1]

print dijkstra(edge,7,0)

最短経路の本もいいっすね。数学ガールとともに子供の為にとってある。

ProductName 最短経路の本
R. ブランデンベルク
シュプリンガー・ジャパン株式会社 / 3675円 ( 2007-12-13 )


今日の畑(110919)

苗木屋に行ってにんにくを調達したついでに、今から植えるのになにがいいかなと質問したら、人参植えとけって言われたので、ひとみ五寸っていう種類を買って早速撒いてきた。 (次の日雨降ってどうしようもないので、昨日のうちに種まいておいて正解だった。)

レーキが欲しかったのでついに購入。

1316514967

モロヘイヤは成長が鈍ってきた。そろそろ終了かも。

1316514970

おくらは思ったより収穫量が少なかった。来年はもっと早くから種をまこう。

1316514972

ゴーヤは種取り用に少し残してある。熟したのを家に持って帰ると虫が入ってたりして、嫌がられるので、このままにしておいて、地面にこぼれた種を拾うのが楽でいい。

1316514974

あと、ゴーヤを処分したいときには、根っこを引きぬいて何日かほうっておくと、良い感じに枯れてくれるので 処分が楽ですね。

御殿場アートクラフトフェア2011

去年に引き続き今年も御殿場アートクラフトフェアに行ってきた。

今年は娘のワークショップがメインだった。

クラッカー作ったり、

1316412938 1316412940

サノユカシさんとこでバッグに絵描いたりしてきた。

1316412942 1316412944

お約束の風車。秋晴れが気持ちのいいクラフトフェアであった。

1316412946 1316412948

最近飲んだ日本酒

いけたにさんから。

末廣は福島のお酒。かなり美味い。それから神渡は経営が変わる前の神渡。H7BYくらいだったかな。優しい味わいですね。

1316412346 1316412349

相模灘は酒のいわせで購入。ここのお酒はしっかり系ですね。グビグビ飲んだらすぐに空いたような?

1316412351

今飲んでるのが先週末にコメヤスさんで購入した久礼の山間米。これもしっかり系で味わい深い。個人的にはさらっとしているのよりはじっくり旨い日本酒がすきなので、こういうタイプは好きですね。

1316412353 1316412356

HTML5 CANVAS chapter 2

Shapeの扱い方全般。グラデーションのかけかたや、影の落とし方を覚えた。それからsaveとリストアが何をしているのかとか。

ProductName HTML5 Canvas: Native Interactivity and Animation for the Web
Steve Fulton
Oreilly & Associates Inc / 2922円 ( 2011-05-13 )


Express+jade+coffeeで書いたのはGitHubにあげている。

HTML5 CANVAS chapter 1

文字当てクイズをCanvasで。コードはGitHubにおいた。

1-4

ProductName HTML5 Canvas: Native Interactivity and Animation for the Web
Steve Fulton
Oreilly & Associates Inc / 2922円 ( 2011-05-13 )


javascript読書会終了、来月からはHTML5読書会

JGPの最終話はJSLintの話

ProductName JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
Douglas Crockford
オライリージャパン / 1890円 ( 2008-12-22 )


PythonにはPEP8、PerlにはPBPそしてjavascriptにはJSLint

綺麗なコードは好きですか?YES

そんな感じで。

時間が余ったので、LTっぽい話も。みんなネタ持ってんので、時間が余ってもそれはそれで有意義。

Project Euler @ksmakoto

もうすぐ100問超えなのか、すごいな。

CoffeeScript @kzfm

CoffeeScriptを使うことでJGPで指摘されているようなルールは結構解決すると思う。関数の最初で全ての変数宣言してくれるし、同値演算子もわかりやすいし。

ただ、デバッグはしにくいよね。

Windows8 @ishisaka

Windows8の起動はやい。うちのWinはXPで止まっているが「いいじゃん」って思った。あとjavascriptでデスクトップアプリの開発ができるらしい。

Soundation @yoshinabu

Chuckに続き、またも音ネタ。

さらにかぶせた。

次回からはHTML5の読書会になり、初回は10/29@三島の予定ですが、ラッキーなことに当日は三島バルが開催されるので、読書後、飲み歩きという楽しみが待っていますね。

ProductName HTML5&CSS3実践入門 最新Web標準を使いこなす (The Pragmatic Programmers)
ブライアンP.ホーガン
インプレスジャパン / 2940円 ( 2011-07-08 )


HTML5 Canvasを読み始めた

600ページ超の熱い本だが、一通りきちんとコードを追いかけようと。

ProductName HTML5 Canvas: Native Interactivity and Animation for the Web
Steve Fulton
Oreilly & Associates Inc / 2922円 ( 2011-05-13 )


ただ写経するだけではつまらないので、coffeescriptで書いていくことにする。

class Debugger
  log: (message) ->
    try
      console.log(message)
    catch exception
      return

canvasSupport = -> Modernizr.canvas

canvasApp = ->
  return if !canvasSupport()

  theCanvas = document.getElementById("canvasOne")
  context = theCanvas.getContext("2d")

  d.log("Drawing Canvas")

  drawScreen = ->
    context.fillStyle = "#ffffaa"
    context.fillRect(0, 0, 500, 300)
    context.fillStyle = "#000000"
    context.font = "20px _sans"
    context.textBaseline = "top"
    context.fillText("Hello World!", 195, 80)

    context.strokeStyle = "#000000"
    context.strokeRect(5, 5, 490, 290)

  drawScreen()

d = new Debugger
canvasApp()

Express+jade+CoffeeScriptという構成で書いてみている。 コードはGitHubに置いてある。

部分関数でFizzBuzz

部分関数って離散数学とかの集合論をやると理解しやすいよなぁと。

ProductName 離散数学への招待〈上〉
J. マトウシェク
シュプリンガー・フェアラーク東京 / 2835円 ( 2002-12 )


ScalaのPartialFunctionを使って。

object FizzBuzz {
  val PFizz:PartialFunction[Int,String] = { case n if n%3==0 => "Fizz" }
  val PBuzz:PartialFunction[Int,String] = { case n if n%5==0 => "Buzz" }
  val PFizzBuzz:PartialFunction[Int,String] = { case n if n%15==0 => "FizzBuzz" }
  val PInt:PartialFunction[Int,String] = {case n => n.toString}

  val FizzBuzz = PFizzBuzz orElse PBuzz orElse PFizz orElse PInt

  def main(arg:Array[String]) = {
    println((1 to 30).toList.map(FizzBuzz(_)))
  }
}

Scalaはコップ本よりもこっちのほうが好みかな

ProductName Scalaプログラミング入門
デイビッド・ポラック
日経BP社 / 3360円 ( 2010-03-18 )