【加工】クリエイティブプログラミングのゼロベース学習ノート

ブログプロフィール

最近は趣味でProcessingクリエイティブプログラミングを学んでいます。このブログは、Processingクリエイティブ プログラミングの学習を記録するために使用されており基础知识、Processing の学習の過程で、このブログを改訂して更新し続けます。ProcesingProcessing を使用して作成されたいくつかの興味深い小規模プロジェクトは、このコラムの他の記事で更新される予定です。

処理とは

ProcessingJava によって開発されたプログラミング言語で、画像、アニメーション、インタラクティブ ソフトウェアの生成に使用され、デジタル クリエイティビティを表現するための電子アートやビジュアル インタラクション デザインのために特別に作成されています。

ダウンロード処理

Processing公式Webサイトにアクセスしてダウンロードしてください

加工の設置と使用

圧縮パッケージをダウンロードした後、IDE无自分でインストールする必要があります。解凍後、次のようなフォルダーが表示されます。

このフォルダーを開いて見つけprocessing.exe、ダブルクリックして実行します。使いやすいように、processing.exeショートカット キーを送信できます。デスクトップに。

IDEインターフェース

Processing コンパイラーのインターフェースは非常にすっきりしていて、ユーザーにとって使いやすいものです。

左上の再生キーと停止キーが最もよく使用されます。

基本知識

関数の設定と関数の描画

setupプログラムを起動するときに使用するコードであり、エントリ関数として理解できます。drawプログラムが実行し続けるコード、つまりプログラムの本体部分であり、例えば画像が出現する箇所や色が変化する箇所などをこの関数に記述することができます。

プレイウィンドウ

再生ボタンをクリックすると、処理再生インターフェイスである小さな灰色のウィンドウが表示されます。デフォルトのサイズは 100x100 ピクセルです。

コードを通じて再生ウィンドウのサイズを設定することもできます。

属性サイズ

これは、再生ウィンドウのサイズを 400x400 ピクセルに設定するなど、再生ウィンドウのサイズを設定するために使用されます。

void setup(){
    
    
  size(400,400);
}

void draw(){
    
    
  
}

コマンドの後に英語のセミコロンがあることに注意してください。各コマンドを記述した後、最後に英語のセミコロンを追加する必要があります。追加しないとエラーが報告されます。

背景色を設定する

背景色を設定するコードは継続的に実行されるため、draw関数内に記述する必要がありますが、処理で使用されるカラーモードは、RGB 255模式RGB 255 モードの赤、緑、青の 3 つの基本色を 0 ～ の数値で表します。それぞれ 255 色 基本の 3 色 色を混ぜて 1,600 万色以上を作ることができます。
背景色を設定するコマンドはbackground、

void setup(){
    
    
  size(400,400);
}

void draw(){
    
    
  background(255,0,0);
}

多くの色の RGB 値がわからないことを考慮すると、処理では非常に便利なツールであるカラー セレクターが提供されます。これは [ツール] にあります。「カラー セレクター、好きな色を選択できます。次に、色の RGB 値を表示します。

グラフィックを描く

1.長方形を描画する
コマンドはrect
図に示すとおりです。左上隅の座標は (0, 0) で、長方形を描画するコマンドはrect(100,50,100,20)左上隅を基準として、次のことを意味します。長方形の x 軸の座標は 100、y 軸の座標は 50 です。100、幅 20。

2.楕円 (または円) を描画する
コマンドはYes ですellipse。
たとえば、ellipse(300,200,100,200)
楕円の中心の X 軸座標が 300、Y 軸座標が 200、楕円の幅が 100、高さが 200 であることを意味します。

println()

変数

• グローバル変数
• ローカル変数

//定义一个全局变量
int xpos = 0;

void setup(){
    
    
size(800,800);
}

void draw(){
    
    
background(255,255,255);
rect(xpos,100,50,50);
// 需求：通过增加xpos的值让小方块运动起来
xpos = xpos + 1;
println(xpos);
}

パラメータmouseX、mouseY

これら 2 つのパラメータにより、グラフがマウスの動きに追従できるようになります。
長方形を設定します。rect
(mouseX,mouseY,50,50)
を実行すると、この長方形の位置がマウスによって変更されます。

UleadGIFAnimator5.10は動画を圧縮するソフトウェアです。

上記はマウス操作です。
キーボード操作を学びましょう

ファンクションキーが押されました

キーボードのキーが押されると、機能が実行されます。
P は大文字であることに注意してください。
変数 key は関数で使用でき、 key はキー情報を記録する処理プログラム内の事前作成された変数です。
例: コードを実行した後、ボタンをランダムにクリックすると、長方形が右に 2 ピクセル移動します。

int xpos = 0;

void setup(){
    
    
size(800,800);
}

void draw(){
    
    
  background(255,255,255);
  rect(xpos,0,50,50);
}

void keyPressed(){
    
    
println(key);
xpos = xpos + 2;
}

ゲームのプレイ中にキャラクターを移動させる WASD など、特定のボタンが押されたときにオブジェクトを特定の方向に移動させたい場合は、処理中に if 条件文を学習する必要があります。

if 条件文

事前に作成された変数 (キー情報を記録するシステム組み込み変数) が d に等しい場合、四角形はxpos2 ピクセル右に移動します。

void keyPressed(){
    
    
  println(key);
  if(key == 'd'){
    
    
    xpos = xpos + 2;
  }
}

Processing で画像を読み込む方法

1. スケッチブック—「プログラム ディレクトリを開くと、編集中のファイルが
表示されます。2. このフォルダー内に新しいフォルダーを作成し、 という名前を付けます。名前は英語で小文字にする必要があることに注意してください。3. 使用する画像をフォルダにコピーします。 4. グローバル変数を定義します。 5.属性を使用して画像を画面にロードします。 パラメータは3 つあり、1 つ目は画像、2 つ目と 3 つ目は位置パラメータです。例: image(bunny,0,0) は、ウサギの画像を位置 (0,0) にロードすることを意味します。.pde
data
data
PImage bunny;
image
image

画像の 4 番目と 5 番目のパラメータを設定するだけで、画像の幅と高さをカスタマイズできます。

PImage bunny;

void setup(){
    
    
  size(800,800);
  bunny = loadImage("bunny.png");
}

void draw(){
    
    
  background(0,255,0);
  image(bunny,0,0,100,100);
}

ウサギの座標を に設定するimage(bunny,mouseX,mouseY,200,200);と、ウサギはマウスの動きに従います。

属性 imageMode(CENTER)

アンカーポイントを (0,0) からマウスの位置に変更できます。

乱数ランダム

random(a,b) は a と b の間の乱数を生成でき、その乱数を使用してロードされる画像のサイズと位置を設定できます。
1. ウサギと大根の写真をロードします:

2. ロードした写真のサイズと位置を

ランダムに設定します。実行して効果を確認します。サイズと位置が異なる多数のウサギがランダムに生成されます。