Processing Processingでお絵かき.

Slides:



Advertisements
Similar presentations
スライドの挿入・移動・削除 ◎スライドの挿入 挿入メニュー → 新しいスライド ◎スライドの移動 表示メニュー → スライド一覧 に入り 移動したいスライドをドラッグ&ドロップする ◎スライドの削除 表示メニュー → スライド一覧 に入り 削除したいスライドを選択後 キーで削除 ( 注 ) 表示メニュー.
Advertisements

特別支援教育で使える PowerPoint の活用法 研修 最低限必要なスキルはこれでバッチリ!! ICT 活用支援員 高松 崇.
パソコン教室 ( Excel ) ワークフロア清柳. 完成見本 1.ファイルを開く 画面上の Excel 原版をクリック.
Powerpoint 機能の使い方. 1.簡単な図の作成 例として植物個体の図を作成 (1)輪郭を大まかに描く まず、「オートシェイプ」 → 「線」 → 「曲 線」を選び、輪郭を適当に描く.
ファーストイヤー・セミナーⅡ 第13回 2次元グラフィックス(1). 2次元グラフィックス Ultra-C では、これまで利用してきた「標準入出力」 以外に「グラフィックス画面」があり、図形などを 表示できる C 言語のグラフィックスには細かな規定がなく、こ れから学ぶ内容が他の環境、システムでは利用でき.
2010 年マルチメディア論 画像処理演習(2) ( pic1.txt ~ pic8.txt )
初年次セミナー 第13回 2次元グラフィックス(1).
Processing + WiiRemote
上手なプレゼンのための ワンポイント・アドバイス
Cornell Spectrum Imagerの使い方
情報処理演習 (9)グラフィックス システム科学領域 日浦 慎作.
情報処理実習 第05回 Excelマクロ機能入門 操作マクロ入門.
図の挿入 ●方法1 ①図を挿入する位置にカーソルを置く。 ②「挿入」タブ ⇒「図」 → 「ファイルから」とクリックする。 ③挿入するファイルを選択し、「挿入」をクリックする。 ●方法2(書式までコピーされるので、ファイルサイズが大きくなる) ①挿入する図をコピーする。 ② 挿入する位置にカーソルを移動し、ツールバーまたは右クリックメニューの「貼り付け」をクリックする。
PowerPoint活用マニュアル スライドショーにせず、そのまま見てね。.
情報処理 第8回.
HTML 5の表現力 楽しいアプリ制作の会 TWorks 蜜葉.
情報A 第12回授業 04情報のディジタル化 対応ファイル:12exp12.xls
タグの直接入力によるウェブページの制作 練習課題1~3
デスクトップを画像として保存する(1) ① デスクトップの画像をクリップボードへコピーする。
パソコン教室(作図編) ワークフロア清柳.
ファイルやフォルダを検索する ①「スタート」→「検索」→「ファイルとフォルダ」とクリックする。
Imageの描画 画像を読み込んで表示すること。 import java.awt.*;が必要。
PowerPoint の基本操作 情報機器の操作(e) 2016.
Applet 岡部 祐典 鈴木 敬幸.
JAVA GUIプログラミング 第1回 JAVAの実行 絵を描こう.
アプレット (Applet)について.
ただで使えるソフトウェア ーインストールとお絵かきー
第4回:ボールを画面内で弾ませよう! (オブジェクトの移動、二次元)
画像の作成と編集.
デスクトップを画像として保存する(1) ① デスクトップの画像をクリップボードへコピーする。
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
発表課題 インターネット上においての色の表現 調査期間:2012年05月~06月 発表日:2012年06月07日
専門ゼミⅠ 南ゼミ 特別授業③ 2002年6月7日 金曜日 4限目 今泉 裕隆.
第3回:ボールを上下に動かそう! (オブジェクトの移動、一次元)
プロセッシング入門1 初歩のプログラミング.
アプレット プログラミング 第10回 アプレット プログラミング第10回.
文字化けの背景を知る.
オーサリングツール&ブラウザの 技術的トピック
Unity, C# 移動するモデルの位置を 指定した位置へ自動修正
基礎プログラミング演習 第10回.
JAVA GUIプログラミング 第2回 グラフィックスを使っての演習 グラフを描こう.
オブジェクト指向 プログラミング 第二回 知能情報学部 新田直也.
第9回 卒業研究1
PowerPoint の基本操作 情報機器の操作(e).
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
諸連絡 USBメモリの販売について 日時:6月23日(月)授業開始前 商品:プリンストン社製32MBのUSBメモリ
パソコンのしくみ ハードウェア OS(Operating System) アプリケーション NEC DOS
ゲームプログラミング講習  第3章 ゲーム作成 ブロック崩しを作ります ゲームプログラミング講習 第3章 ゲーム作成.
VIII. 空間情報表現.
プログラミング基礎a 第12回 Java言語による図形処理入門(3) アニメーション入門
プログラミング基礎a 第11回 Java言語による図形処理入門(3) アニメーション入門
プロジェクトの エクスポートとインポート 2014/10/7.
Visual Studio 2005の使用方法 新入生セミナー 
画像の情報量 Copyright(C)2008 Tsutomu Ohara All rights reserved.
ここに 表題や引用文が入る 背景への図の使用とキャプションへのテクスチャの適用 (中級)
Processing Processingでお絵かき.
(C)Hiroshi Tanaka/Yoshihiro Sato
Smart Graphic Layout トピック ステートメント 赤色の背景に画像を含む SmartArt グラフィック (中級)
課題 5/25 以下の指示に従って作成した pptx あるいは ppt ファイルを電子メールで へ送りなさい。
JAVA GUIプログラミング 第3回 イベント処理① マウスイベント.
画面への描画 Graphics オブジェクト 紙 ペン Pen オブジェクト Brush オブジェクト 画面のピクセルをカプセル化
画像の情報量 Copyright(C)2008 Tsutomu Ohara All rights reserved.
プログラミング基礎a 第9回 Java言語による図形処理入門(1) Javaアプレット入門
【GeoAFM】オリジナルの探針形状データの作成/使用 1/2
Javaとは Javaとはオブジェクト指向言語でJava VM(Java仮想マシン)と呼ばれるプログラム上で動作します。
サンプル見出し テキスト 1 行目 テキスト 2 行目 テキスト 3 行目 (中級) 図の背後でタイトルを移動させるアニメーション効果
Viscuit の使い方 1/7
5-5 文字列の描画 (1)基本的な文字列描画 A.手順
PowerPoint の基本操作 情報機器の操作 (e).
PowerPoint の基本操作 情報機器の操作(e).
Presentation transcript:

Processing Processingでお絵かき

自己紹介 たけこ(takeco) Processingとの出会い 立ち読みがきっかけで

Ben FryとCasey Reasが創めたプロジェクト Processingとは Ben FryとCasey Reasが創めたプロジェクト コンピュータアートに特化して生まれ、進化してきたプログラミング環境、言語 最初に公開利用されたのは 2001年8月、日本でのワークショップ http://processing.org/ svn://processing.org/trunk/processing

表現するためのシンプルな開発環境 お手軽に使える インターラクティブなデザインができる プログラマのためだけではない Processing ここが素敵 表現するためのシンプルな開発環境 お手軽に使える プログラマのためだけではない インターラクティブなデザインができる

シンプルな開発環境 スケッチブック PDE(Processing Development Environment) IDE (Integrated Development Environment) GNU/Linux, Mac OS X, Windows GNU General Public License

Processingプログラム スケッチ Java スクリプト風 ライブラリ プログラミングモード GNU Lesser General Public License プログラミングモード Basic Continuous draw()が繰り返し呼ばれる

まず、動かしてみる スケッチブックを開く スケッチする スケッチをみる //大文字小文字関係あるよ void setup() { //一番最初に一回だけ呼ばれる。 } void draw() //setup()の後、呼ばれ続ける。 スケッチをみる frameRate(回数);で一秒間に呼ばれる回数を指定できる

背景色 background(色); 初期化の時に塗りつぶしてみる void setup() { background(#FF8000); 塗りつぶしてみよう 背景色 background(色); 初期化の時に塗りつぶしてみる void setup() { background(#FF8000); }

#123456 5-1.色 RGB 黒 白 赤 緑 青 赤色 緑色 青色 #000000 #FFFFFF #FF0000 #00FF00

5-2.色 問題 赤+緑= 緑+青= 青+赤= 赤+緑+青=

colorMode(Mode,各最大値・・・・); 5-4.色 HSB Hue 色相 Saturation 彩度 Brightness 明度 colorMode(Mode,各最大値・・・・); colorMode(RGB,R,G,B,A); colorMode(HSB,H,S,B,A);

キャンバスを大きくしたい 幅を知る、高さを知る 6.キャンバスを大きくしたい size(幅,高さ); 画面の幅 画面の高さ width height

線(点)の色 太さ 点 直線 点と線 stroke(色); strokeWeight(太さ); point(横,縦); line(縦1,横1,縦2,横2); 2 1

四角と円 四角 楕円 線 塗りつぶし ずらす 回転 rect(横,縦,幅,高さ); ellipse(x,y,幅,高さ); stroke(色); noStroke(); 塗りつぶし fill(色); noFill(); ずらす translate(横,縦); 回転 rotate(アングル);

マウス マウスで絵を描いてみる マウスの位置 マウスが動いたとき呼ばれる マウスをクリックしたとき呼ばれる mouseX mouseY void mouseMoved() { } マウスをクリックしたとき呼ばれる void mouseClicked()

Alpha 透ける 0% ⇔ 100% 透けない マウスをクリックした時に透明な円を描く 透明度 void mouseClicked() { 透ける 0% ⇔ 100% 透けない マウスをクリックした時に透明な円を描く void mouseClicked() { //stroke(色,alpha); stroke(#0000ff,100); //fill(色,alpha); fill(#ffff00,50); ellipse(mouseX,mouseY,20,20); }

保存 スケッチを保存 描いた絵を保存する アプレットとして保存 アプリケーションとして保存 [File]-[Save] [File]-[Save As…] 描いた絵を保存する saveFrame(ファイル名); “*.tif", “*.tga", “*.jpg", “*.png" クリックした時に保存する void mouseClicked () { //##をつけると自動採番 F##.jpg→F07.jpg saveFrame(“Wankuma.png”); } アプレットとして保存 [File]-[Export] アプリケーションとして保存 [File]-[Export Application]

Processing ビジュアライジング・データ http://processing.org/ Processingによる情報視覚化手法 参照 Processing http://processing.org/ ビジュアライジング・データ Processingによる情報視覚化手法 Ben Fry 著、増井 俊之 監訳 、加藤 慶彦 訳 オライリー ISBN978-4-87311-378-4