a-07 画像を使う

2011年5月23日

このエントリーをはてなブックマークに追加

PImage 変数で画像を扱う場合のデータ型, image() 画像を表示するための関数

ウェブ上の画像を表示する

logo

size(300, 100);

// PImage 型の変数 logo に画像データを読み込む
PImage logo = loadImage("http://k.yimg.jp/images/top/sp/logo.gif");

// 画像を表示
image(logo, 0, 0);

画像を表示する

この画像をデスクトップにダウンロードしてから、表示させる

dandelion.jpg

手順

  1. sketch(プログラム)を書く
  2. メニューの「File > Save As」で「書類 > Processing」にsketchを保存
  3. Processingのエディタに画像ファイルをドラッグ

08-17

size(500, 500);

// PImage型の変数photoに「dandelion.jpg」を読み込む
PImage photo = loadImage("dandelion.jpg");

// 画像を表示
image(photo, 0, 0);

表示位置を調整する

08-05

size(500, 500);

PImage photo = loadImage("dandelion.jpg");

image(photo, 50, 100); //画像の左上を(50,100)に指定

表示サイズを調整する

08-06

size(500, 500);

PImage photo = loadImage("dandelion.jpg");

image(photo, 50, 100, 300, 200);//画像の幅を300, 高さを200に指定

色を調整する

tint

size(500, 500);

colorMode(HSB);

PImage photo = loadImage("dandelion.jpg");

//黄色を付ける
tint(50, 255, 255);

image(photo, 0, 0);

複数の画像を配置する

bus.png

上の画像をデスクトップにドラッグして、Processingのエディタにドラッグしておく。

tint

size(500, 500);
background(255);

PImage photo1 = loadImage("dandelion.jpg");
PImage photo2 = loadImage("bus.png");

image(photo1, 0, 0);
image(photo2, 350, 250);

画像を画面の中央に配置する

width-height

size(500, 500);
background(255);

PImage photo2 = loadImage("bus.png");

imageMode(CENTER); //基準点を画像の中心に設定
image(photo2, width / 2, height / 2);

練習

1. 写真をランダムな位置に配置する(10個)

08-09

2. 写真をランダムな位置に配置する(小さくして100個)

08-10

3. 写真をランダムな位置に配置する(サイズもランダムにして100個)

08-11

このエントリーをはてなブックマークに追加

Archives

以下の記事は、2011年度に筆者が大学での授業で利用していた補足資料です。現在、これらをベースに本ウェブサイトを再構築しています。完了するまで一時的に掲載します。


About

筆者: @mathatelle

ジェネラティブ・アート -Processingによる実践ガイド Processing: A Programming Handbook for Visual Designers and Artists Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction (Morgan Kaufmann Series in Computer Graphics and Geometric Modeling) Processingをはじめよう (Make: PROJECTS) Built with Processing[Ver. 1.x対応版] -デザイン/アートのためのプログラミング入門 Processing アニメーションプログラミング入門 デザイン言語 Processing入門 - 楽しく学ぶコンピュテーショナルデザイン Processingプログラミング入門―Javaベースのオープンソース統合開発環境 ProcessingでかんたんAndroidプログラミング FORM+CODE -デザイン/アート/建築における、かたちとコード Form+Code in Design, Art, and Architecture (Design Briefs) Generative Art: A Practical Guide Using Processing Generative Gestaltung ビジュアライジング・データ ―Processingによる情報視覚化手法 ARプログラミング—Processingでつくる拡張現実感のレシピ— Arduinoをはじめよう 第2版 (Make:PROJECTS) +GAINER―PHYSICAL COMPUTING WITH GAINER Beyond Interaction ―メディアアートのためのopenFrameworksプログラミング入門 ビューティフルビジュアライゼーション ビジュアル・コンプレキシティ ―情報パターンのマッピング