ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
![クリエイティブコーディングの教科書](https://cdn-ak-scissors.b.st-hatena.com/image/square/2e669dab83d606bb777c380ed30f6fa39e2f5b98/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--u2YyvEl5--%2Fg_center%252Ch_280%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci83N2QxZDUwOWQ4LmpwZw%3D%3D%252Cw_200%2Fv1627283836%2Fdefault%2Fog-base-book_yz4z02.jpg)
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
html5j-begin.doorkeeper.jp javascriptの勉強が一通り終わったので、参加してきました! javascriptの勉強会に参加するまでの道のりが長かったぜ...(T_T) 話の内容 4名のJSオジサンからのありがたきお話+質問タイムって感じでした。 一つずつ、つらつら書いていきます(※長文注意ですぞ!) 1.ソースレビューから学ぶ Javascript + 1 株式会社サイバーエージェントの、宗定 洋平さんのお話です。 speakerdeck.com ざっくりまとめると、以下の4点についてのお話でした。 レビューでみているポイント 「バグがない」という言葉の定義 関数名のつけ方 ステップアップするために必要なこと 印象的だったのが...ステップアップするために必要なこと...それは... 「情報処理技術者試験を勉強する」です。 な、なんじゃそりゃー!初耳です。
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
はじめに この記事は東京Node学園祭2012 アドベントカレンダーの 23 日目の記事です。 現在、オープンソースの大語彙連続音声認識エンジン Julius を利用して音声による家電操作を行なっているのですが、どんな言葉を認識させるかの文法をゴリゴリ書いたり、コールバックの処理を C++ でゴリゴリ書くのが大変だったので、これらを簡単に実現してくれる Node.js のモジュールをつくってみました。 WEB 関連の話題で扱われることの多い Node.js ですが、C++ でネイティブモジュールを作成することによる Node.js の可能性を感じてもらえれば、と思います。 出来るようになること 以下のように音声認識させる言葉を登録、その文言を Julius が解釈できる形式にコンパイルして、Julius インスタンスを生成、スタートするだけで音声認識が可能になります。 var Julius
米Intelは9月15日、マルチコアプロセッサ向けJavaScriptエンジン「River Trail」を発表した。JavaScriptの並列プログラミング向け拡張で、複雑な処理を可能にするWebアプリケーション開発を支援する。 River TrailはIntel Labsのオープンソースプロジェクトで、Webアプリケーションでのデータ並列処理を可能にすることを目的にJavaScriptを拡張する。Webアプリケーションの重要性が高まる中、ハードウェア側の処理能力を活用できていないという問題に対応するもので、Webアプリ開発者が並列プログラミングを利用できるようにする。 River Trailではマルチコアやベクトル命令へのアクセスが可能で、処理能力を要求する写真編集のようなアプリがWebブラウザでも提供可能になるという。同時に、既存のJavaScriptを拡張することで、通常のJavaS
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量(約3K)のスクリプトを紹介します。 デモページ Sonicの実装 Square(矩形)とCircle(円形)を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square(矩形) あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
キャッシュを防ぐ方法はAdobeのサイト(http://kb2.adobe.com/jp/cps/228/228621.html)より、3つあるのですが、 ここでは『ファイル名のあとに ? でパラメータをつけてリンクを設定する方法』を使いたいと思います。 このパラメータをリロードのたびに変えることで、Flashのキャッシュを防ぎます。 ではどのように変えるのかというと、Javascriptで現在の日付と時刻を取得し、それをパラメータとして付け加えます。 Flashの表示方法は、『swfobject.js』を用いる方法が一般的ですので、これを使います。 ちなみに、swfobject.jsはこちら(http://code.google.com/p/swfobject/)からダウンロード。 まず、<head>~</head>内に時刻を取得する『reload.js』と、swfを表示する『swfo
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
Equalbox.js デモページ [ad#ad-2] Equalbox.jsの実装 HTML 各div要素はjQueryのセレクタで指定できるように、idなどを指定します。 <div id="box-container"> <div id="box1" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> </div> <div id="box2" class="box"> <p>dsfsdfsdfsdf</p> </div> <div id="box3" class="box"> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdfsdfsdf</p> <p>dsfsdf
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 2011年01月31日- Activity Indicator 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」。 通常こうしたローディングイメージを実装するにはアニメーションgif等で対応しますが、このプラグインを使うと、画像なしに綺麗なアニメーション付きの読み込みエフェクトを実装出来ます。 SVGやVMLを使ってクロスブラウザで動作するように設計されており、なんとIE6等でもOKだそう。 背景が何色だって気にする必要もありません。 関連エントリ クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoade
jQueryとprettyPopin.jsを配置し、以下のように宣言します。 Javascriptに以下のように書き開く動作を指定できます。(例です) 呼び出したいリンク先を指定します。(今回はPHPファイルにしました) (サンプルです)メール送信ポップアップウィンドウ サンプルのとおり、Submitボタンを押してもそのウィンドウで処理が進みます。 送信時のLoadingもおしゃれですね。 画像の大きさが決まっているので、更に大きくしたい場合や、色を変える場合には以下です。 ボタンを画像にしたりできます。 サンプルページ2 まずsamplebutton1.gifを作成します。(ボタン画像) 次に背景画像のpopinRight.gifを編集します。(prettyPopinに標準で入っている画像) 今回は50px×50px程度の画像にしました。 最後にprettyPopin.css
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
Notobiは11月1日(米国時間)、PhoneGapの最新版であるPhoneGap 0.9.2をリリースした。PhoneGapはクロスプラットフォーム・モバイルアプリケーションの開発フレームワーク。デベロッパはHTML+CSS+JavaScriptを用いて、iPhone/Android/BlackBerry/Symbian/Palmのネイティブアプリケーションを開発できる。各デバイスのモーションセンサやカメラ、GPSにはPhoneGapにて提供されているJavaScript APIをもちいて操作する。同ライブラリはThe "New" BSD LicenseおよびThe MIT Licenseのデュアルライセンスのもとで公開されているオープンソースソフトウェア。 PhoneGapでのスマートフォン別機能対応表 - PhoneGap Supported Featuresより抜粋 iPhone
JavaScriptFirefox + QuickTimeでMIDIを鳴らした。midi.Play() / midi.Stop()などで再生をコントロールできる。(最初の発音時、大きなノイズがなることがありました。原因不明。ご注意を) 参考リンク詳説MIDI規格JavaScript Scripting Guide for QuickTime: Introduction to JavaScript Scripting Guide for QuickTime
本稿では、簡単なマクロ(MML)でMIDIファイルを生成する「JavaScriptSakura」を利用したWebオルゴールを作成します。オルゴールの本体は、Flashで作成し、MIDIファイルの作成に、「JavaScriptSakura」を利用しました。また、せっかくのWebオルゴールなので、簡単な掲示板の機能も持たせてみようと思います。 はじめに 本稿では、簡単なマクロ(MML)でMIDIファイルを生成する「JavaScriptSakura」を利用したWebオルゴールを作成します。オルゴールの本体はFlashで作成し、MIDIファイルの作成に「JavaScriptSakura」を利用しました。また、せっかくのWebオルゴールなので、簡単な掲示板の機能も持たせてみようと思います。 本稿は、クジラ飛行机と「JavaScriptSakura」の作者であるadasの共著です。 対象読者 Webア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く