SlideShare a Scribd company logo
Processing on Web
n億のデバイスで走るProcessing
Agenda
• 僕について
• Processingで作った作品をWebページにしよう
-Processingについて
-p5.jsについて
僕について
• 情報理数科7期 委員長
• Firefox学生マーケティングチーム
• 特技は基本情報技術者試験に落ちること
長瀬 幸翼(ながせ こうすけ)
知っていますか
授業であまりプログラミングをしない
呼んでみよう
みんな知ってる
アイツ
Processingとは
• 電子アートのためのプログラミング言語
• MIT生まれOSS育ち
• この学科のみんなに馴染みがある
Processingで
作ったもの
Webページに
したくない?
p5.jsとは
• Processingのコードをjavascriptで使うためのラ
イブラリ
• Processingでつくった作品を簡単にWebサイト
に利用できる
Processing p5.js
DEMO

More Related Content

What's hot

我々はいつまでドキュメント作成に苦しめばいいんだろう
我々はいつまでドキュメント作成に苦しめばいいんだろう我々はいつまでドキュメント作成に苦しめばいいんだろう
我々はいつまでドキュメント作成に苦しめばいいんだろう
Ken Sawada
 
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
Kumiko SHIMIZU
 
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化
Kumiko SHIMIZU
 
非同期プログラミング養成ギブスとしてのNode.js
非同期プログラミング養成ギブスとしてのNode.js非同期プログラミング養成ギブスとしてのNode.js
非同期プログラミング養成ギブスとしてのNode.jsTajima Itsuro
 
プログラミング同好会とすごい合同勉強会
プログラミング同好会とすごい合同勉強会プログラミング同好会とすごい合同勉強会
プログラミング同好会とすごい合同勉強会
nemumu
 
チラ見せ♡ナイト@20150410 LT公開用
チラ見せ♡ナイト@20150410 LT公開用チラ見せ♡ナイト@20150410 LT公開用
チラ見せ♡ナイト@20150410 LT公開用
Keisuke Utsumi
 
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったことエンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
Hirata Tomoko
 
LT within June school
LT within June schoolLT within June school
LT within June school
katosho1
 
名古屋アジャイル勉強会「コンピテンシーを活用した人財育成」
名古屋アジャイル勉強会「コンピテンシーを活用した人財育成」名古屋アジャイル勉強会「コンピテンシーを活用した人財育成」
名古屋アジャイル勉強会「コンピテンシーを活用した人財育成」
hiroyuki Yamamoto
 
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
Keisuke Utsumi
 
Backlogとchatwork進行管理事例
Backlogとchatwork進行管理事例Backlogとchatwork進行管理事例
Backlogとchatwork進行管理事例
Sachiko Kitta
 
0から学んだポストモダンPerl @ YAPC::Asia Tokyo 2013
0から学んだポストモダンPerl @ YAPC::Asia Tokyo 20130から学んだポストモダンPerl @ YAPC::Asia Tokyo 2013
0から学んだポストモダンPerl @ YAPC::Asia Tokyo 2013
Tasuku Suenaga
 
Java5
Java5Java5
あと一つプログラミング言語を
覚えたら死ぬ! 脳みそがパンクしそうな
あなたのための
nodeJSことはじめ
あと一つプログラミング言語を
覚えたら死ぬ! 脳みそがパンクしそうな
あなたのための
nodeJSことはじめあと一つプログラミング言語を
覚えたら死ぬ! 脳みそがパンクしそうな
あなたのための
nodeJSことはじめ
あと一つプログラミング言語を
覚えたら死ぬ! 脳みそがパンクしそうな
あなたのための
nodeJSことはじめ
文樹 高橋
 
Web制作のプロジェクトを前進させるために Backlogで実践した3つのポイント
Web制作のプロジェクトを前進させるために Backlogで実践した3つのポイントWeb制作のプロジェクトを前進させるために Backlogで実践した3つのポイント
Web制作のプロジェクトを前進させるために Backlogで実践した3つのポイント
Naoya Shiraishi
 
Java1~4
Java1~4Java1~4
ユースケース駆動開発のワークショップやってみた!
ユースケース駆動開発のワークショップやってみた!ユースケース駆動開発のワークショップやってみた!
ユースケース駆動開発のワークショップやってみた!
Tomoe Sawai
 
2015 12-19-ruby rails
2015 12-19-ruby rails2015 12-19-ruby rails
2015 12-19-ruby rails
Hiroshi Oyamada
 
BootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみたBootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみた
BeMarble
 

What's hot (20)

我々はいつまでドキュメント作成に苦しめばいいんだろう
我々はいつまでドキュメント作成に苦しめばいいんだろう我々はいつまでドキュメント作成に苦しめばいいんだろう
我々はいつまでドキュメント作成に苦しめばいいんだろう
 
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
 
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化
 
非同期プログラミング養成ギブスとしてのNode.js
非同期プログラミング養成ギブスとしてのNode.js非同期プログラミング養成ギブスとしてのNode.js
非同期プログラミング養成ギブスとしてのNode.js
 
プログラミング同好会とすごい合同勉強会
プログラミング同好会とすごい合同勉強会プログラミング同好会とすごい合同勉強会
プログラミング同好会とすごい合同勉強会
 
チラ見せ♡ナイト@20150410 LT公開用
チラ見せ♡ナイト@20150410 LT公開用チラ見せ♡ナイト@20150410 LT公開用
チラ見せ♡ナイト@20150410 LT公開用
 
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったことエンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
 
LT within June school
LT within June schoolLT within June school
LT within June school
 
名古屋アジャイル勉強会「コンピテンシーを活用した人財育成」
名古屋アジャイル勉強会「コンピテンシーを活用した人財育成」名古屋アジャイル勉強会「コンピテンシーを活用した人財育成」
名古屋アジャイル勉強会「コンピテンシーを活用した人財育成」
 
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
 
Backlogとchatwork進行管理事例
Backlogとchatwork進行管理事例Backlogとchatwork進行管理事例
Backlogとchatwork進行管理事例
 
0から学んだポストモダンPerl @ YAPC::Asia Tokyo 2013
0から学んだポストモダンPerl @ YAPC::Asia Tokyo 20130から学んだポストモダンPerl @ YAPC::Asia Tokyo 2013
0から学んだポストモダンPerl @ YAPC::Asia Tokyo 2013
 
2015 07-04-ruby rails
2015 07-04-ruby rails2015 07-04-ruby rails
2015 07-04-ruby rails
 
Java5
Java5Java5
Java5
 
あと一つプログラミング言語を
覚えたら死ぬ! 脳みそがパンクしそうな
あなたのための
nodeJSことはじめ
あと一つプログラミング言語を
覚えたら死ぬ! 脳みそがパンクしそうな
あなたのための
nodeJSことはじめあと一つプログラミング言語を
覚えたら死ぬ! 脳みそがパンクしそうな
あなたのための
nodeJSことはじめ
あと一つプログラミング言語を
覚えたら死ぬ! 脳みそがパンクしそうな
あなたのための
nodeJSことはじめ
 
Web制作のプロジェクトを前進させるために Backlogで実践した3つのポイント
Web制作のプロジェクトを前進させるために Backlogで実践した3つのポイントWeb制作のプロジェクトを前進させるために Backlogで実践した3つのポイント
Web制作のプロジェクトを前進させるために Backlogで実践した3つのポイント
 
Java1~4
Java1~4Java1~4
Java1~4
 
ユースケース駆動開発のワークショップやってみた!
ユースケース駆動開発のワークショップやってみた!ユースケース駆動開発のワークショップやってみた!
ユースケース駆動開発のワークショップやってみた!
 
2015 12-19-ruby rails
2015 12-19-ruby rails2015 12-19-ruby rails
2015 12-19-ruby rails
 
BootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみたBootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみた
 

Viewers also liked

リアルタイム道路標識検出システムの開発
リアルタイム道路標識検出システムの開発リアルタイム道路標識検出システムの開発
リアルタイム道路標識検出システムの開発
幸翼 長瀬
 
Processing資料(3) 色の指定
Processing資料(3) 色の指定Processing資料(3) 色の指定
Processing資料(3) 色の指定
reona396
 
Processing資料(2) 再帰
Processing資料(2) 再帰Processing資料(2) 再帰
Processing資料(2) 再帰
reona396
 
Processing資料(1) Processingの基本
Processing資料(1) Processingの基本Processing資料(1) Processingの基本
Processing資料(1) Processingの基本
reona396
 
Processingでジャバジャバ稼ぐ
Processingでジャバジャバ稼ぐProcessingでジャバジャバ稼ぐ
Processingでジャバジャバ稼ぐ
reona396
 
20141008物体検出器
20141008物体検出器20141008物体検出器
20141008物体検出器
Takuya Minagawa
 
Pythonによる機械学習
Pythonによる機械学習Pythonによる機械学習
Pythonによる機械学習
Kimikazu Kato
 
機械学習で泣かないためのコード設計
機械学習で泣かないためのコード設計機械学習で泣かないためのコード設計
機械学習で泣かないためのコード設計
Takahiro Kubo
 

Viewers also liked (9)

リアルタイム道路標識検出システムの開発
リアルタイム道路標識検出システムの開発リアルタイム道路標識検出システムの開発
リアルタイム道路標識検出システムの開発
 
Processing資料(3) 色の指定
Processing資料(3) 色の指定Processing資料(3) 色の指定
Processing資料(3) 色の指定
 
Processing
ProcessingProcessing
Processing
 
Processing資料(2) 再帰
Processing資料(2) 再帰Processing資料(2) 再帰
Processing資料(2) 再帰
 
Processing資料(1) Processingの基本
Processing資料(1) Processingの基本Processing資料(1) Processingの基本
Processing資料(1) Processingの基本
 
Processingでジャバジャバ稼ぐ
Processingでジャバジャバ稼ぐProcessingでジャバジャバ稼ぐ
Processingでジャバジャバ稼ぐ
 
20141008物体検出器
20141008物体検出器20141008物体検出器
20141008物体検出器
 
Pythonによる機械学習
Pythonによる機械学習Pythonによる機械学習
Pythonによる機械学習
 
機械学習で泣かないためのコード設計
機械学習で泣かないためのコード設計機械学習で泣かないためのコード設計
機械学習で泣かないためのコード設計