冬合宿でOpenProcessing

冬合宿で
OpenProcessing!!
52代 takowasabi

目次
OpenProcessingって何？
OpenProcessingの始め方
p5.jsの基本
JavaScriptの基本
付録（外部ファイルとライブラリ）

OpenProcessingは、
ブラウザ上で簡単に
作る
遊ぶ
見せる
ことができるプログラミング環境です

こんな感じのデジタルアートや

こんな感じのゲームが作れちゃいます

なんと環境構築
必要なし!!
※メアドでアカウントを作る手間はあります

携帯でも、
作品を遊ぶ
作品の共有
コーディング ※
ができちゃいます！
※携帯のキーボードはコーディングに向いてない

まずは以下のURLにアクセス
https://www.openprocessing.org

必要事項を入力して登録

登録したらマイページに到着

左上アイコンでメニューへ
Create a Sketchで作品を作る

メニューからは作品の検索ができます

作品の編集画面はこんな感じ

再生ボタンで作品を見れる

実際に作品をアップロードしてみよう in PC
まずは新規の
スケッチブック（作品）
を作成

再生マークで
挙動を確認しよう
スケッチブックを
作成すると、
すでにデフォルトの
コードが書かれています

確認したら
</>マークで
編集画面に戻ろう
マウスの動きに合わせて
白丸が出来ます

「Save」を押して
アップロード画面へ
では、作品をアップロード
していきましょう

ここに作品の
タイトルを入力します

ここに作品の
説明を書きます

ここに作品の
操作説明を書きます
この説明文は作品を見る
ときに表示されるように
なっています

ここに作品に
つけたいタグを
書きます
「misw」タグを
お忘れなく

LICENSEは
とりあえず気にしなくて大
丈夫です

Cameraボタンで
スクリーンショットを
撮り直せます

ここら辺で
アクセス範囲を
指定できます

入力が終わったら
「Submit」で公開！

作品の視聴画面に行けたら公開完了です！！！

公開した作品はマイペー
ジのSketchesから確認で
きます

ここでは基本を説明しますので
詳しく知りたい方は
以下のリファレンスを参照してください
https://p5js.org/reference/
※リファレンスにあるサンプルコードはなんと
書き換え可能です、リファレンス見てるだけで楽しい！

四角を表示しよう！（rect）
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
rect(20, 20, 100, 100);
}
こんな感じで書くと、画面の左上に四角が表示されるようになりま
す！

コードを順に見ていこう
function setup() {
}
function draw() {
rect(20, 20, 100, 100);
}
createCanvas(windowWidth, windowHeight)という一文は
表示画面のサイズを決めるためのものです
（試しにcreateCanvas(50, 50)に書き換えてみると四角形の表示
がはみ出して変な感じになるよ）

function setup() {
}
function draw() {
rect(20, 20, 100, 100);
}
function setup()の後の{}で囲んだところに書いたプログラムは、
再生ボタンを押した後に一回だけ動くきます
（表示画面サイズの変更は一回でいいからここに書くよ）

function setup() {
}
function draw() {
rect(20, 20, 100, 100);
}
function draw()の後の{}で囲んだところに画面に描画したいもの
を書いていきます

function setup() {
}
function draw() {
rect(20, 20, 100, 100);
}
ここが今回のメイン部分です
このrectで四角形を描画させることができます

rectの書き方
rect(x, y, w, h)
xのところに書いた数字が四角形の左上のx座標です
yのところに書いた数字が四角形の左上のy座標です
wのところに書いた数字が四角形の幅になります
hのところに書いた数字が四角形の高さになります

改めてもとのコードを見てみます
function setup() {
}
function draw() {
rect(20, 20, 100, 100);
}
プログラミングに慣れていない人はここで違和感を感じるのではな
いでしょうか？
（ポイント：四角形が実際に描画される位置）

processingでの座標
画面
実はprocessingでは原点が左上にあります
なので、左上座標(20, 20)でも四角形が左上に表示されたのです
x軸
y軸

丸をマウスの位置に表示しよう！（ellipse）
function setup() {
}
function draw() {
ellipse(mouseX, mouseY, 20, 20);
}
こんな感じで書くと、マウスの位置に丸が描かれ続けるようになり
ます！

function setup() {
}
function draw() {
}
とりあえずここら辺まではさっきと一緒です

function setup() {
}
function draw() {
}
ここで円を表示させています
何だかrectに似ていますが、括弧の中には数字ではなくmouseX
やmouseYなどが書かれています

マウスの扱い方を学ぼう！
mouseX mouseY … それぞれ画面内のマウスのx座標、y座標を表します。
mouseX、mouseYと書くことで、そこにマウスの座標の数字が書かれているのと同じ
扱いになります
では、次にellipeseについて見ていきましょう
function draw() {
}

ellipseの書き方
ellipse(x, y, w, h)
xのところに書いた数字が楕円の中心のx座標です
yのところに書いた数字が楕円の中心のy座標です
wのところに書いた数字が楕円の幅になります
hのところに書いた数字が楕円の高さになります

ということで下線の部分は
function setup() {
}
function draw() {
}
マウスの座標を中心に、
幅20、高さ20の楕円を描画するという意味になります

ところで、なんで丸がたくさん表示されるの？
function setup() {
}
function draw() {
}
この下線部分が原因です
この、function draw()の後の{}で囲んだところに書いた処理は、1
秒間に60回くらい動きます（そうすることでマウスの位置などの細
かく変化する値を描画に反映できるのです）

色付けたり線を太くしたりしよう
function setup() {
}
function draw() {
strokeWeight(5);
fill(255, 0, 0);
}
こんな感じで書くと、マウスの位置に赤く塗られ、太い黒線ので囲
われた丸が描かれ続けるようになります！

ポイント①　strokeWeight
function setup() {
}
function draw() {
strokeWeight(5);
fill(255, 0, 0);
}
ellipseやrectなどの図形描画の前にstrokeWeightを書くと
線の太さが設定できます（デフォルトは1）

ポイント②　fill
function setup() {
}
function draw() {
strokeWeight(5);
fill(255, 0, 0);
}
ellipseやrectなどの図形描画の前にfillを書くと
塗りつぶしの色が設定できます

fillの書き方
fill(r, g, b)
rのところに書いた数字が赤色の強さ(0~255)です
gのところに書いた数字が緑色の強さ(0~255)です
bのところに書いた数字が青色の強さ(0~255)です
CG研でもおなじみRGBで色を指定します

乱数を使おう
function setup() {
}
function draw() {
noStroke();
fill(random(255), random(255), random(255));
ellipse(random(windowWidth), random(windowHeight), 20, 20);
}
画面のランダムな位置にカラフルな丸が描かれるようになります

ポイント①　noStroke
function setup() {
}
function draw() {
noStroke();
}
noStroke()を図形描画の前に書くと、枠線が描画されなくなります
（strokeWeight(0)と同じ意味）

ポイント②　random
function setup() {
}
function draw() {
noStroke();
}
randomで0から括弧までの数の中から、ランダムな値を得ること
ができます（例えばrandom(255)は0~255の間の整数に置き換え
られます）

ポイント➂　windowWidth、windowHeight
function setup() {
}
function draw() {
noStroke();
}
windowWidthはブラウザのウインドウの幅を
windowHeightはブラウザのウインドウの高さを表しています
（createCanvasをするときの値にもよく使います）

ということで下線の部分は
function setup() {
}
function draw() {
noStroke();
}
ウインドウのランダムな位置に幅高さ20の楕円を描くという処理を
表しています

JavaScriptの基本は
Progateで勉強しましょう......
https://prog-8.com/languages/es6
p5.jsはJavaScriptで記述するので、ここで学んだ文法は、
作品にそのまま使えます（当たり前）
※冬合宿中余裕があれば加筆していきます

付録
（外部ファイルとライブラリ）

外部ファイルやライブラリ
さらに複雑な作品を作るために重要になるのは
外部ファイルと追加のライブラリです
外部ファイルを取り込むことで、
任意の画像や音楽を作品に取り入れることができます
追加ライブラリを入れることで、
さらに便利な機能を追加することができます

外部ファイル追加して、より複雑な表現を
右のメニューの
「Files」で
外部ファイルを取り込むこ
とができます

さらにライブラリを追加して、できることを増やそう
右のメニューの
「Libraries」で
追加のライブラリを入れる
ことができます

冬合宿でOpenProcessing

Recommandé

Recommandé

Contenu connexe

Similaire à 冬合宿でOpenProcessing

Similaire à 冬合宿でOpenProcessing (20)

Dernier

Dernier (20)

冬合宿でOpenProcessing