• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
 

メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ

on

  • 1,077 views

 

Statistics

Views

Total Views
1,077
Views on SlideShare
709
Embed Views
368

Actions

Likes
3
Downloads
16
Comments
0

5 Embeds 368

http://yoppa.org 332
http://feedly.com 33
http://reader.aol.com 1
http://www.feedspot.com 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ Presentation Transcript

    • メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ 2013年12月2日、 12月19日 多摩美術大学 情報デザイン学科メディア芸術コース 担当:田所淳
    • 今日の内容 ‣ これまで、この授業で扱ってきた環境 ! ‣ jQuery: ‣ シンプルで簡易な文法で、Webブラウザ上での多彩な表現 ‣ フォトギャラリーの製作 ! ‣ HTML5 + Canvas: ‣ JavaScriptによる、2次元の図形の描画とアニメーション ! ‣ WebGL + Three.js: ‣ 高度な3Dの描画とアニメーション
    • 今日の内容 ‣ いままで扱ってきた環境以外にも、Webブラウザで表現を行う ための様々なライブラリが存在する ! ‣ 代表的なものやユニークなものを紹介していきたい
    • Processing.js
    • Processing.js ‣ http://processingjs.org/   ! ‣ JavaをベースにしたProcessingという言語を、JavaScriptに移 植したもの ‣ Processing譲りの高度な表現を、プログラミング初学者にもわ かり易い文法で実現可能 ‣ MITライセンス
    • Processing.js ‣ プログラムサンプル void setup() { size(400,400); frameRate(60); } ! void draw(){ background(0); fill(0, 127, 255); float diameter = sin(millis() * 0.01) * width/2 + width/2; ellipse(width/2, height/2, diameter, diameter); }
    • Processing.js ‣ 実行結果
    • Google Chart Tools
    • Google Chart Tools ‣ https://developers.google.com/chart/ ! ‣ すぐにカスタマイズして利用可能な、様々なグラフやチャート を生成するライブラリ ‣ Free to use
    • Google Chart Tools ‣ プログラムサンプル <html> <head> <script type="text/javascript" src="https://www.google.com/ jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task','Hours per Day'], ['Work',11], ['Eat',2], ['Commute',2], ['Watch TV',2], ['Sleep',7] ]); var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }
    • Google Chart Tools ‣ 実行結果
    • D3.js
    • D3.js ‣ http://d3js.org/ ! ‣ データの視覚化のための自由度の高いライブラリ ‣ インタラクティブな高度な視覚化が可能 ‣ BSDライセンス
    • D3.js ‣ コードサンプル var width = 960, height = 500; var vertices = d3.range(100).map(function(d) { return [Math.random() * Math.random() * height]; }); var svg = d3.select("#chart") .append("svg") .attr("width", width) .attr("height", height) .attr("class", "PiYG") .on("mousemove", update); svg.selectAll("path") .data(d3.geom.voronoi(vertices)) .enter().append("path") .attr("class", function(d, i) { return i ? "q" + (i % 9) .attr("d", function(d) { return "M" + d.join("L") + "Z"; svg.selectAll("circle") .data(vertices.slice(1)) .enter().append("circle") .attr("transform", function(d) { return "translate(" + d .attr("r", 2); function update() { vertices[0] = d3.mouse(this); svg.selectAll("path") width, + "-9" : null; }) }); + ")"; })
    • D3.js ‣ 実行結果
    • Paper.js
    • Paper.js ‣ http://paperjs.org/ ! ‣ ベクターグラフィクスの描画に特化したフレームワーク ‣ サイズを変更しても直線やカーブの劣化のない、美しいインタ ラクティブな図形を描画可能 ‣ MITライセンス
    • Paper.js ‣ コードサンプル var var var var ! mousePoint = view.center; amount = 25; colors = ['red', 'white', 'blue', 'white']; children = project.activeLayer.children; for (var i = 0; i < amount; i++) { var rect = new Rectangle([0, 0], [25, 25]); rect.center = mousePoint; var path = new Path.RoundRectangle(rect, 6); path.fillColor = colors[i % 4]; var scale = (1 - i / amount) * 20; path.scale(scale); } ! function onMouseMove(event) { mousePoint = event.point; } ! function onFrame(event) { for (var i = 0, l = children.length; i < l; i++) { var item = children[i]; var delta = (mousePoint - item.position) / (i + 5); item.rotate(Math.sin((event.count + i) / 10) * 7); if (delta.length > 0.1) item.translate(delta);
    • Paper.js ‣ 実行結果
    • Arbor.js
    • Arbor.js ‣ http://arborjs.org/ ! ‣ (データ構造の) グラフを表現することに特化したライブラリ ‣ グラフ = ノード(頂点)群とノード間の連結関係を表すエッジ (枝)群で構成される抽象データ型の一種 ‣ MITライセンス
    • Arbor.js ‣ 実行サンプル
    • Timeline
    • Timeline ‣ http://timeline.verite.co/ ! ‣ タイムライン(年表)形式のインタラクティブなページを作成可 能なjQueryプラグイン ‣ GPLライセンス
    • Timeline ‣ 実行サンプル
    • まとめ ‣ 今日紹介したものでも、まだ一部に過ぎません ‣ さらに、今後も様々な個性をもったライブラリが出てくるでしょ う ‣ 一から全てを自分で作るのではなく、ライブラリを適材適所で 使用して、自分の表現したいクリエイションの核となる部分に 集中する ‣ 今後ますます、表現のための引き出し(ライブラリ)を沢山持っ ているということが重要となる