Processing lesson(1) アルゴリズムとプログラミング

Learning Objectives

• アルゴリズムとは何か、理解し、アルゴリズムの作成を体験する
• プログラムとは何かについて理解し、コーディングを体験する
• 良いアルゴリズムとは何か、プログラムとは何かについて考える

講義資料: アルゴリズム

Processingでビジュアル・アート

今週から数週間、Processingというプログラミング言語を学びます。

数週間後の皆さんのミッションは、“動くアートの作成"です。

Generative Art : コンピューターにルールを与えて生成的に描き出すアート

プログラミングとは何か、なぜ学ぶのか (講義)

Hello Processing (ハンズオン)

演習の進め方

Hello Processingのリンク先を読みがながら、各自のPCにProcessingをインストールしてください。

Hello Processingでは、Processingの開発環境の使い方と、基本的な図形の描画方法について、プログラム例を交えて記載があります。授業の講義でも解説しますが、各自で必要に応じて、自分のペースで読み進めながら、「演習：自分を表すアイコンを描いてみよう」まで進めてください。

プログラミング演習のルール

• 自分のペースで進める。演習が完了した人は、サイトにある他のコンテンツを進めて構わない * 目が疲れた時は休憩する。25分に1回はディスプレイから目をそらす * 立ち歩いたり、周りの人と一緒に画面を見せ合ったりしながら進めても良い。ただし人の邪魔をしないこと／体に負担がかかる姿勢を取らないこと／Social Distancingに配慮すること * 質問は自由にして構わないが、まず自分で調べてみて、動かしてみること。何をやろうとして、何が分かって、何が分からないかを自分の中で明確にしてから質問をする。

補足(Processing のダウンロード)

1. Official Site https://processing.org/download/ にアクセスする 2. 自分のPCの環境を確認する（Windowsの場合、設定⚙→システム→バージョン情報 で32bit/64bitを確認) 3. 該当するバージョンをダウンロードし、クライアントPC上でインストールファイルを実行する（インストールは全てデフォルトでOK)

• 注意事項：ProcessingのWindows64bit版は実行できない場合があります（エラーメッセージ：”このアプリはお使いのPCでは実行できませんと表示される”）。その場合は、Windows32bit版をダウンロードして、Windows64bit上で実行してください。 * 注意事項：(補足 JDKのダウンロード) Processingの実行ができない場合、JDK(Java Development Kit - Processingを実行するためのJava実行環境）のインストールが必要である場合があります。Java SE ダウンロードページ　からダウンロードし、規約に合意するチェックボックスをクリックして実行してください。

どうしてもProcessingのインストールがうまく行かない人は・・

OpenProcessing.org で、Webサイト上でp5.js (ProcessingをJavascriptに移行した言語) で試してみてください。プログラム言語の仕様が少し異なるため、コピペでは動きません

Sample program

shapes.pde

void setup() {
  
  // set canvas to 600px x 600px
  size(600, 600);
  
  // set background color to (R:194, G:251, B:252)
  background(194, 251, 252);
  
  // set color of shape to (R:75, G:240, B:30)
  fill(240, 145, 247);
  
  // draw rect(x, y, width, height)
  rect(50, 50, 150, 100);
  
  // set color of shape to R:240, G:124, B:247, opacity:150)
  fill(240, 145, 247, 150);
  rect(250, 50, 100, 100);
  rect(275, 75, 100, 100);

  noFill();  // set no fill (color off)
  rect(400, 50, 100, 100, 10);  // set r for corners
  fill(250, 160, 114);
  
  fill(114, 250, 155);
  // draw ellipse(x at center of ellipse, y at center of ellipse, width, height)
  ellipse(125, 250, 150, 100); 
  
  // set color of stroke
  stroke(60, 77, 255); 
  strokeWeight(15);  // set width of stroke
  ellipse(325, 250, 150, 100);
  
  // draw line (x at start, y at start, x at end, y at end);
  line(50, 350, 200, 450);
  
  stroke(255, 255, 0);
  strokeWeight(5);
  // draw triangle(x1, y1, x2, y2, x3, y3);
  triangle(250, 350, 350, 450, 450, 350);
  
  // draw polygon
  beginShape();
  vertex(50, 500);
  vertex(50, 525);
  vertex(85, 560);
  vertex(125, 575);
  vertex(165, 560);
  vertex(200, 525);
  vertex(200, 500);
  endShape(CLOSE);
  
  
  stroke(255, 100, 100);
  noFill();
  // draw curve(x1 for beginning control point, y1 for beginning control point, 
  //            x2 for the first point, y2 for the first point
  //            x3 for the second point, y3 for the second point
  //            x4 for ending control point, y4 for ending control point, 
  curve(200, 100, 250, 500, 500, 500, 550, 100); 
}

実行結果

shape.pde の実行結果

Unit07-1の課題

Hello Processing を各自で読み進め、実際にProcessingで動かしながら、演習を実施してみてください。

演習：自分を表すアイコンを描いてみよう ここまで紹介してきた機能を駆使して、自分自身を表すアイコンを作ってみましょう。Twitterのプロフィール画像のようなものを想定してください。

作成物の例

自分を表すアイコン

評価基準（アルゴリズムとプログラミングの講座を通して）

• プログラムや結果の画像の提出
• 学んだ技術を活かしている
• 技術の使い方に自分なりの工夫がある
• 内容（表現力、新規性、面白さ、クレイジーさ、モラル、再利用性など）

提出方法

• 以下の作成物（プログラムファイル、画像のスクリーンショット）をOneDriveに提出してください

• Processingのプログラムファイル
• 実行結果の画像のスクリーンショット
  • ファイルには、出席番号、氏名が分かるように名前をつける
• 28XX_XX太郎_unit7-1_face.pde (Processingのプログラムファイル)
• 28XX_XX太郎_unit7-1-face.png (実行結果の画像）
  • 提出先 Onedrive (学校のOffice 365ログインが必要です）
  • Processingのプログラムは"Sketch"と言います。Sketchの配置場所は、“Processing” > “環境設定” > “Sketchの場所” に記載がありますので、その場所を見つけて、アップロードしてください。
  • スクリーンショットの撮り方
• Windows の場合 : 実行結果の画面をアクティブにして、“Alt”+“Print Screen(PrtScn)"。コピーされた画像を、“Paint"ツールなどを使って保存する。
• Macの場合: ”Command”+“Shift”+“4” で、範囲を選択（デスクトップにpng形式で画像が保存される)

次回について

次回からは、制御構造を使って動きのある作品をつくります。

Ref:

• 情報学研究所　「アルゴリズムってなんでしょか」
• Qiita - 【Unity】ソートアルゴリズム12種を可視化してみた
• JEITA アルゴリズム体験ゲーム「アルゴロジック」
• Java SE Downloads
• Processingでゼロから学ぶプログラミング・ビジュアルアート
• Processing 公式リファレンス