トップページに、Processingについて書いた記事を、辞書のように見つけやすくしてみました

【Processing】shape()関数の使い方【あらかじめ作成した図形や画像を画面に表示するために使う】

【Processing】shape()関数の使い方【あらかじめ作成した図形や画像を画面に表示するために使う】
  • URLをコピーしました!

図形をあらかじめ作成していなくても描画可能

ワタタク

今回の記事の目的はProcessingの「shape()関数」を理解し、自分なりに使ってみること。

この記事を書いた人
ワタタク
  • クリエイティブコーディング初心者が、アーティストとして活躍するまでの上達の過程を発信
  • コンセプトは「クリエイティブコーディング1万時間の歩き方」
  • 参考にしてもらえるブログにするため、Processingを独学で勉強して共有中

記事内のProcessingのバージョンは4.3。

動きのある画像は、コードではなく、GIF画像編集で無限再生されるようにしています。

目次

【Processing】shape()関数について

shape()関数について
  • shape()は英語で「形」を意味する
  • shape()は、あらかじめ作成した図形や画像を画面に表示するために使います
  • 主にPShape、loadShape()関数と一緒に使用
  • 書いているコードのファイルに読み込みたい画像を入れておく必要がある
  • 読み込める画像形式はSVGとOBJ

【Processing】shape()関数の使い方【画像とコード】

以下の画像をコードで表示しています。

このブログにはSVGファイル形式を載せることができなかったので、jpeg画像を載せています。

Processing 四角柱6つ。
// svgという名前の変数を作る
PShape svg;

void setup() {
  // 画面のサイズを1000x1000ピクセルに設定する
  size(1000, 1000);
  // "quadrangular prism.svg"という名前のSVGファイルを読み込む
  // quadrangular prismは四角柱という意味
  svg = loadShape("quadrangular prism.svg");
}

void draw() {
  // 画面の背景を白色にする
  background(255);
  // 読み込んだSVGファイルを画面に表示する
  // (0, 0)の位置から画面の幅と高さいっぱいに表示する
  shape(svg, 0, 0, width, height);
}

【Processing】shape()関数はどんな表現で使えそうか

SVG形式の画像で、ロゴなどを作成するときがきたら使おうと思います。

【Processing】shape()関数を使ってみた感想

shapeって形という意味だから、画像も読み込めるとは思わなかったです。

ワタタク

それでは今日もレッツワクワクコーディング。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次