SlideShare ist ein Scribd-Unternehmen logo
1 von 72
Downloaden Sie, um offline zu lesen
2時間で!
Processingでプログラミング入門
@reona396
自己紹介
● reona396 / レオナ
● インタラクション&フロントエンドエンジニア
● Processing歴8年くらい
● 「[普及版]ジェネラティブ・アート」編集協力
名前(※旧姓の本名)載せていただいてます。良い本なのでオススメです!
みなさんのことが知りたいです!!!
● プログラミング初めてor初心者という方!
● 逆に、プログラミングでご飯食べてますという方!
● Processingが初めての方!
● このワークショップに参加した理由は?
○ Processingってなんだろうと思って
○ デジタルアートに興味があって
○ プログラミング教育に興味があって
○ 数学や三角関数というキーワードが気になって
○ なんとなく
○ 他のワークショップに行きたかったが売り切れてたので仕方なく…
2時間しかないので急ぎ足進行ですが
ご質問があればどうぞお気軽に!
あとからTwitterとかで質問していただいても大丈夫です!!
本ワークショップの目標
Processingでお花を描きます!
本ワークショップでお伝えしたいこと
● プログラミングの楽しさ
● Processingの面白さ
● プログラミングの基礎
● 三角関数の便利さ
プログラミングの基礎
● 順次:プログラムは順番通りに動く
● 反復:プログラムは繰り返しが得意
● 分岐:条件によってプログラムから異なる結果を得る
Processingを動かしながら実際に体験していきましょう!
まずはProcessingを起動!
おめでとうございます!!最初の一歩を踏み出しましたね!
Processingの画面構成
実行ボタン / 停止ボタン
プログラム(コード)を書くところ
エラーメッセージが出るところ
(エラーは怖くないです!)
キャンバスをつくる
void setup() {
size(400, 400);
}
キャンバスをつくる
キャンバスをつくる
void setup() {
size(400, 400);
}
ひとかたまり
キャンバスをつくる
void setup() {
size(400, 400);
}
文の終わりに必ずつける
キャンバスをつくる
void setup() {
size(400, 400);
}
キャンバスの
横の長さ
キャンバスの
縦の長さ
円を描く
void setup() {
size(400, 400);
}
void draw() {
ellipse(200, 200, 100, 100);
}
円を描く
円を描く - setup関数とdraw関数
void setup() {
size(400, 400);
}
void draw() {
ellipse(200, 200, 100, 100);
}
開始時に一度だけ
読み込まれる
何度も
繰り返す
円を描く - パラメータ
〜このスライド以降setup関数省略〜
void draw() {
ellipse(200, 200, 100, 100);
}
円の中心の
x座標
円の中心の
y座標
円の横の長さ
円の縦の長さ
円を描く - Processingの座標について
void draw() {
ellipse(200, 200, 100, 100);
ellipse(100, 100, 50, 25);
ellipse(350, 250, 80, 150);
}
x軸方向
y軸方向
色をつける - 背景色、線の色、塗りつぶし
void draw() {
background(50, 100, 200);
stroke(250, 250, 0);
fill(250, 150, 250);
ellipse(200, 200, 100, 100);
}
色をつける - 背景色、線の色、塗りつぶし
色をつける - 背景色、線の色、塗りつぶし
void draw() {
background(50, 100, 200);
stroke(250, 250, 0);
fill(250, 150, 250);
ellipse(200, 200, 100, 100);
}
背景色の指定
図形の枠線の色の指定
図形の塗りつぶしの色の指定
色をつける - RGBで色を指定する
void draw() {
background(50, 100, 200);
stroke(250, 250, 0);
fill(250, 150, 250);
ellipse(200, 200, 100, 100);
}
(赤, 緑, 青)がそれぞれ
どれくらいの割合かを
0〜255の数値で示す
RGB で指定している
2行ずつ順番を入れ替えてみよう
void draw() {
background(255, 255, 255);
noStroke();
fill(255, 0, 0);
ellipse(150, 200, 150, 150);
fill(0, 0, 255);
ellipse(200, 200, 100, 100);
}
2行ずつ順番を入れ替えてみよう
void draw() {
background(255, 255, 255);
noStroke();
fill(0, 0, 255);
ellipse(200, 200, 100, 100);
fill(255, 0, 0);
ellipse(150, 200, 150, 150);
}
2行ずつ順番を入れ替えてみよう
void draw() {
background(255, 255, 255);
noStroke();
fill(0, 0, 255);
ellipse(200, 200, 100, 100);
fill(255, 0, 0);
ellipse(150, 200, 150, 150);
}
図形の枠線を非表示
プログラミングの基礎その1、順次
● プログラムは書かれた順番に処理されていく
○ 命令は上から下へ、順々にこなされていく
○ Processingは順々に上に重ねるように描画していく
○ 料理の手順と同じで、順序を考えて物事を進めるのが大事!
「料理のさしすせそ」みたいなもの!
円の位置や大きさを変数で制御する
void draw() {
background(255, 255, 255);
int x = 150;
int y = 200;
int d = 130;
ellipse(x, y, d, d);
}
円の位置や大きさを変数で制御する
void draw() {
background(255, 255, 255);
int x = 150;
int y = 200;
int d = 130;
ellipse(x, y, d, d);
}
y = 200
x = 150
整数型
円の位置や大きさを変数で制御する
void draw() {
background(255, 255, 255);
int x = 150;
int y = 200;
int d = 130;
ellipse(x, y, d, d);
}
d = 130
整数型
円の位置や大きさを変数で制御する
void draw() {
background(255, 255, 255);
int x = 150;
int y = 200;
int d = 130;
ellipse(x, y, d, d);
}
色々な値に
変えてみよう!
円をたくさん描く
void draw() {
background(255, 255, 255);
int x = 20;
int y = 200;
int d = 30;
ellipse(x, y, d, d);
}
円をたくさん描く
void draw() {
background(255, 255, 255);
int x = 20;
int y = 200;
int d = 30;
for (int i = 0; i < 8; i++) {
ellipse(x + i * 40, y, d, d);
}
}
円をたくさん描く
void draw() {
background(255, 255, 255);
int x = 20;
int y = 200;
int d = 30;
for (int i = 0; i < 8; i++) {
ellipse(x + i * 40, y, d, d);
}
}
初期値
継続条件
{ }の中身の後に
毎回やる事
円をたくさん描く
void draw() {
background(255, 255, 255);
int x = 20;
int y = 200;
int d = 30;
for (int i = 0; i < 8; i++) {
ellipse(x + i * 40, y, d, d);
}
}
初期値
継続条件
{ }の中身の後に
毎回やる事
x = 20, 60, 100, 140, 180,
220, 260, 300
i = 0, 1, 2, … , 6, 7
プログラミングの基礎その2、反復
● 同じ命令を決められた回数だけ繰り返す
○ 指定された条件になるまで何回でも同じ処理ができる
○ 繰り返しの回数に応じた計算も書ける
○ 同じ大きさの円を100個でも1000個でもそれよりもっとでも描ける!
小さい円を円状に配置するには?
円状配置の特徴を考える
外周の中心からの距離は
どの小さい円も同じ
円状配置の特徴を考える
外周の中心からの距離は
どの小さい円も同じ
右の横線を基準にすると
同じ長さの線を違う角度で
配置しているだけ
コンパスと同じ!
円状配置の特徴を考える
あれ?
円状配置の特徴を考える
これ三角形な気がする
!!!これが噂の三角関数だ!!!
画像中央を(0, 0)、
斜め線の長さをR、
水平線からの角度をθとすると、
x(横点線の長さ) = R * cos(θ)
y(縦点線の長さ) = R * sin(θ)
x
y
R
(0, 0)
θ
cos(θ) = x / R
sin(θ) = y / R
!!!これが噂の三角関数だ!!!
画像中央を(0, 0)、
斜め線の長さをR、
水平線からの角度をθとすると、
x(横点線の長さ) = R * cos(θ)
y(縦点線の長さ) = R * sin(θ)
x
y
R
(0, 0)
θ
cos(θ) = x / R
sin(θ) = y / R
なんか学生の時
やった気がする
!!!これが噂の三角関数だ!!!
θ(角度)について :
8個の小さな円を円状に並べたい
→ 360度(2π)を8等分して何番目か
x
y
R
(0, 0)
θ
Processingで円を円状に配置する
※灰色の線はガイド線なので
無視してください
Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 30;
int num = 8;
for (int i = 0; i < num; i++) {
int R = 150;
float x = R * cos(i * TWO_PI / num);
float y = R * sin(i * TWO_PI / num);
ellipse(x, y, d, d);
}
popMatrix();
}
Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 30;
int num = 8;
for (int i = 0; i < num; i++) {
int R = 150;
float x = R * cos(i * TWO_PI / num);
float y = R * sin(i * TWO_PI / num);
ellipse(x, y, d, d);
}
popMatrix();
}
pushMatrix〜popMatrixの間は
(0, 0)の位置を左上から
キャンバスの中心に移動
(translate)
width : キャンバスの横の長さ
height : キャンバスの縦の長さ
Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 30;
int num = 8;
for (int i = 0; i < num; i++) {
int R = 150;
float x = R * cos(i * TWO_PI / num);
float y = R * sin(i * TWO_PI / num);
ellipse(x, y, d, d);
}
popMatrix();
}
intが整数型だったのに対し、
floatは浮動小数点数型
TWO_PI = 2π
Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 30;
int num = 8;
for (int i = 0; i < num; i++) {
int R = 150;
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}
Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 30;
int num = 8;
for (int i = 0; i < num; i++) {
int R = 150;
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}
radians関数が角度を
ラジアン(弧度法)に
変換してくれる
360度→2π
小さな円を花の形に配置する
花の形の配置の特徴を考える
中心から一番遠いところへの
距離は毎回一定
距離の増え方/減り方も一定
(ゼロ-[増加]->一番遠い所-[減少]->ゼロ)
花の形の配置の特徴を考える
さっきの円状配置の
三角形をあてはめるとこんな感じ→
R が一定に増えたり減ったりすれば
なんとかなりそう x
y
R
(0, 0)
θ
花の形の配置の特徴を考える
R が一定に増えたり減ったりすれば
なんとかなりそう
x
y
R
(0, 0)
θ
中心からの距離 R
水平線とRの間の角度 θ
増!
減!
突然ですがサイン波でも見て休憩しましょう
どっかで見た気がしますね
真ん中で折ってみますか
お前…まさか……!!!
さっきのグラフじゃないか!!!
中心からの距離 R
水平線とRの間の角度 θ
「一定の増減」はサイン波で表せる
サイン波は -1と1 を
いったりきたりする
1
-1
マイナス部分をプラスに持ってきた
サイン波
Processingで小さな円を花の形に配置する
Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 10;
int num = 360;
int t = 4;
for (int i = 0; i < num; i++) {
float R = 150 * abs(sin(radians(i * t)));
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}
Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 10;
int num = 360;
int t = 4;
for (int i = 0; i < num; i++) {
float R = 150 * abs(sin(radians(i * t)));
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}
R を0から150の間で
いったりきたり増減させている
abs関数を通すと絶対値の値が
出力されるので
マイナス部分がプラスとして
得られる
絶対値 : 0からの距離
(例 : -3と3は0から3の距離)
Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 10;
int num = 360;
int t = 4;
for (int i = 0; i < num; i++) {
float R = 150 * abs(sin(radians(i * t)));
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}
1から順に数字に変えてみましょう!
花に凝った色をつける
Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 10;
int num = 360;
int t = 4;
for (int i = 0; i < num; i++) {
noStroke();
if (i % 3 == 0) {
fill(0, 0, 200);
d = 10;
} else {
fill(0, 150, 200);
d = 5;
}
float R = 150 * abs(sin(radians(i * t)));
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}
Processingで円を円状に配置する
void draw() {
background(255, 255, 255);
pushMatrix();
translate(width/2, height/2);
int d = 10;
int num = 360;
int t = 4;
for (int i = 0; i < num; i++) {
noStroke();
if (i % 3 == 0) {
fill(0, 0, 200);
d = 10;
} else {
fill(0, 150, 200);
d = 5;
}
float R = 150 * abs(sin(radians(i * t)));
float x = R * cos(radians(i * 360 / num));
float y = R * sin(radians(i * 360 / num));
ellipse(x, y, d, d);
}
popMatrix();
}
もしも3で割った余りが0なら
→ 3で割り切れる数字ならば
そうでない時は...
プログラミングの基礎その3、分岐
● ある条件の時にだけ処理する
○ 条件に合っているかどうかで結果を出し分けられる
○ 「暑い日はカレーが食べたいし、寒い日は鍋が食べたい!」
→ 気温が20度以上ならばカレーを食べ、そうでない時は鍋を食べる
完成
完成のその先へ!!!!!!!!!!!!!!
画像1枚あればグッズ販売が無料で始められるサービスの利用
(SUZURI、pixivFactory/BOOTHなど)
完成のその先へ!!!!!!!!!!!!!!
最後に
● ご質問はお気軽に!イベント内でも後日Twitterでも
● お悩み相談とかもあればどうぞ〜 お答えできる範囲のことなら …
○ 「エンジニアになりたいんだけど…」
○ 「情報系の大学に行きたいんだけど…」
○ 「今日の晩ごはん何にしよう…」
● 本日はご参加いただきありがとうございました!
引き続きPCDを一緒に楽しみましょう!
@reona396

Más contenido relacionado

Was ist angesagt?

openFrameworks 動きを生みだす様々なアルゴリズム - 多摩美メディアアートII
openFrameworks 動きを生みだす様々なアルゴリズム - 多摩美メディアアートIIopenFrameworks 動きを生みだす様々なアルゴリズム - 多摩美メディアアートII
openFrameworks 動きを生みだす様々なアルゴリズム - 多摩美メディアアートIIAtsushi Tadokoro
 
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門Takashi Yoshinaga
 
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法Hiroshi Yoshida
 
Media Art II 2013 第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
Media Art II 2013  第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCvMedia Art II 2013  第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
Media Art II 2013 第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCvAtsushi Tadokoro
 
WASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみたWASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみたMITSUNARI Shigeo
 
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門Atsushi Tadokoro
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発Yuta Matsumura
 
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLMedia Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLAtsushi Tadokoro
 
これからの「async/await」の話をしよう
これからの「async/await」の話をしようこれからの「async/await」の話をしよう
これからの「async/await」の話をしようKouji Matsui
 
Jenkinsの構成・運用パターン
Jenkinsの構成・運用パターンJenkinsの構成・運用パターン
Jenkinsの構成・運用パターンSEGADevTech
 
Xamarin.forms navigation overview
Xamarin.forms navigation overviewXamarin.forms navigation overview
Xamarin.forms navigation overviewAtsushi Nakamura
 
基礎からのCode Contracts
基礎からのCode Contracts基礎からのCode Contracts
基礎からのCode ContractsYoshifumi Kawai
 
Enterprise Tic-Tac-Toe
Enterprise Tic-Tac-ToeEnterprise Tic-Tac-Toe
Enterprise Tic-Tac-ToeScott Wlaschin
 
【Unity道場スペシャル 2017博多】クォータニオン完全マスター
【Unity道場スペシャル 2017博多】クォータニオン完全マスター【Unity道場スペシャル 2017博多】クォータニオン完全マスター
【Unity道場スペシャル 2017博多】クォータニオン完全マスターUnity Technologies Japan K.K.
 
CPythonを読もう
CPythonを読もうCPythonを読もう
CPythonを読もうAkira Nonaka
 
SAT/SMTソルバの仕組み
SAT/SMTソルバの仕組みSAT/SMTソルバの仕組み
SAT/SMTソルバの仕組みMasahiro Sakai
 
Refactoring: A First Example - Martin Fowler’s First Example of Refactoring, ...
Refactoring: A First Example - Martin Fowler’s First Example of Refactoring, ...Refactoring: A First Example - Martin Fowler’s First Example of Refactoring, ...
Refactoring: A First Example - Martin Fowler’s First Example of Refactoring, ...Philip Schwarz
 
Effective Modern C++ 勉強会#7 Item 27
Effective Modern C++ 勉強会#7 Item 27Effective Modern C++ 勉強会#7 Item 27
Effective Modern C++ 勉強会#7 Item 27Mitsuru Kariya
 
zshでコマンドライン履歴を活用する
zshでコマンドライン履歴を活用するzshでコマンドライン履歴を活用する
zshでコマンドライン履歴を活用するHideaki Miyake
 

Was ist angesagt? (20)

openFrameworks 動きを生みだす様々なアルゴリズム - 多摩美メディアアートII
openFrameworks 動きを生みだす様々なアルゴリズム - 多摩美メディアアートIIopenFrameworks 動きを生みだす様々なアルゴリズム - 多摩美メディアアートII
openFrameworks 動きを生みだす様々なアルゴリズム - 多摩美メディアアートII
 
ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門ノンプログラミングで始める AR 開発入門
ノンプログラミングで始める AR 開発入門
 
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
Android上での3D(OpenGL)描画の基礎とNDKによる実践的高速化手法
 
Media Art II 2013 第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
Media Art II 2013  第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCvMedia Art II 2013  第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
Media Art II 2013 第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
 
WASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみたWASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみた
 
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
 
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLMedia Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
 
これからの「async/await」の話をしよう
これからの「async/await」の話をしようこれからの「async/await」の話をしよう
これからの「async/await」の話をしよう
 
Jenkinsの構成・運用パターン
Jenkinsの構成・運用パターンJenkinsの構成・運用パターン
Jenkinsの構成・運用パターン
 
Xamarin.forms navigation overview
Xamarin.forms navigation overviewXamarin.forms navigation overview
Xamarin.forms navigation overview
 
基礎からのCode Contracts
基礎からのCode Contracts基礎からのCode Contracts
基礎からのCode Contracts
 
Enterprise Tic-Tac-Toe
Enterprise Tic-Tac-ToeEnterprise Tic-Tac-Toe
Enterprise Tic-Tac-Toe
 
【Unity道場スペシャル 2017博多】クォータニオン完全マスター
【Unity道場スペシャル 2017博多】クォータニオン完全マスター【Unity道場スペシャル 2017博多】クォータニオン完全マスター
【Unity道場スペシャル 2017博多】クォータニオン完全マスター
 
CPythonを読もう
CPythonを読もうCPythonを読もう
CPythonを読もう
 
SAT/SMTソルバの仕組み
SAT/SMTソルバの仕組みSAT/SMTソルバの仕組み
SAT/SMTソルバの仕組み
 
Refactoring: A First Example - Martin Fowler’s First Example of Refactoring, ...
Refactoring: A First Example - Martin Fowler’s First Example of Refactoring, ...Refactoring: A First Example - Martin Fowler’s First Example of Refactoring, ...
Refactoring: A First Example - Martin Fowler’s First Example of Refactoring, ...
 
ETL in Clojure
ETL in ClojureETL in Clojure
ETL in Clojure
 
Effective Modern C++ 勉強会#7 Item 27
Effective Modern C++ 勉強会#7 Item 27Effective Modern C++ 勉強会#7 Item 27
Effective Modern C++ 勉強会#7 Item 27
 
zshでコマンドライン履歴を活用する
zshでコマンドライン履歴を活用するzshでコマンドライン履歴を活用する
zshでコマンドライン履歴を活用する
 

Ähnlich wie PCD2019 TOKYO ワークショップ「2時間で!Processingでプログラミング入門」

プログラミング技法特論第4回
プログラミング技法特論第4回プログラミング技法特論第4回
プログラミング技法特論第4回Noritada Shimizu
 
競技プログラミングのためのC++入門
競技プログラミングのためのC++入門競技プログラミングのためのC++入門
競技プログラミングのためのC++入門natrium11321
 
OpenGLと行列
OpenGLと行列OpenGLと行列
OpenGLと行列miyosuda
 
OpenGLと行列
OpenGLと行列OpenGLと行列
OpenGLと行列miyosuda
 
Processing資料(6) 様々な図形
Processing資料(6) 様々な図形Processing資料(6) 様々な図形
Processing資料(6) 様々な図形reona396
 
プログラミング技法特論第3回
プログラミング技法特論第3回プログラミング技法特論第3回
プログラミング技法特論第3回Noritada Shimizu
 
Implicit Explicit Scala
Implicit Explicit ScalaImplicit Explicit Scala
Implicit Explicit ScalaKota Mizushima
 
JOI春季ステップアップセミナー 2021 講義スライド
JOI春季ステップアップセミナー 2021 講義スライドJOI春季ステップアップセミナー 2021 講義スライド
JOI春季ステップアップセミナー 2021 講義スライドKensuke Otsuki
 
シェーダー伝道師 第二回
シェーダー伝道師 第二回シェーダー伝道師 第二回
シェーダー伝道師 第二回hixi365
 
プログラミング技法特論第8回
プログラミング技法特論第8回プログラミング技法特論第8回
プログラミング技法特論第8回Noritada Shimizu
 
プログラミング技法特論第6回
プログラミング技法特論第6回プログラミング技法特論第6回
プログラミング技法特論第6回Noritada Shimizu
 
2011.12.10 関数型都市忘年会 発表資料「最近書いた、関数型言語と関連する?C++プログラムの紹介」
2011.12.10 関数型都市忘年会 発表資料「最近書いた、関数型言語と関連する?C++プログラムの紹介」2011.12.10 関数型都市忘年会 発表資料「最近書いた、関数型言語と関連する?C++プログラムの紹介」
2011.12.10 関数型都市忘年会 発表資料「最近書いた、関数型言語と関連する?C++プログラムの紹介」Hiro H.
 
20150725 オープンキャンパス資料
20150725 オープンキャンパス資料20150725 オープンキャンパス資料
20150725 オープンキャンパス資料Takeo Kunishima
 
Processing授業テキスト
Processing授業テキストProcessing授業テキスト
Processing授業テキストSuzuki Junko
 
岡山県立大学オープンキャンパス資料
岡山県立大学オープンキャンパス資料岡山県立大学オープンキャンパス資料
岡山県立大学オープンキャンパス資料Takeo Kunishima
 
Nagoya.R #12 入門者講習
Nagoya.R #12 入門者講習Nagoya.R #12 入門者講習
Nagoya.R #12 入門者講習Yusaku Kawaguchi
 
15パズルを作ってみた
15パズルを作ってみた15パズルを作ってみた
15パズルを作ってみたHota Oku
 

Ähnlich wie PCD2019 TOKYO ワークショップ「2時間で!Processingでプログラミング入門」 (20)

プログラミング技法特論第4回
プログラミング技法特論第4回プログラミング技法特論第4回
プログラミング技法特論第4回
 
競技プログラミングのためのC++入門
競技プログラミングのためのC++入門競技プログラミングのためのC++入門
競技プログラミングのためのC++入門
 
OpenGLと行列
OpenGLと行列OpenGLと行列
OpenGLと行列
 
OpenGLと行列
OpenGLと行列OpenGLと行列
OpenGLと行列
 
Processing資料(6) 様々な図形
Processing資料(6) 様々な図形Processing資料(6) 様々な図形
Processing資料(6) 様々な図形
 
プログラミング技法特論第3回
プログラミング技法特論第3回プログラミング技法特論第3回
プログラミング技法特論第3回
 
Implicit Explicit Scala
Implicit Explicit ScalaImplicit Explicit Scala
Implicit Explicit Scala
 
JOI春季ステップアップセミナー 2021 講義スライド
JOI春季ステップアップセミナー 2021 講義スライドJOI春季ステップアップセミナー 2021 講義スライド
JOI春季ステップアップセミナー 2021 講義スライド
 
勉強会課題①
勉強会課題①勉強会課題①
勉強会課題①
 
シェーダー伝道師 第二回
シェーダー伝道師 第二回シェーダー伝道師 第二回
シェーダー伝道師 第二回
 
プログラミング技法特論第8回
プログラミング技法特論第8回プログラミング技法特論第8回
プログラミング技法特論第8回
 
会津合宿2015Day3:D問題
会津合宿2015Day3:D問題会津合宿2015Day3:D問題
会津合宿2015Day3:D問題
 
プログラミング技法特論第6回
プログラミング技法特論第6回プログラミング技法特論第6回
プログラミング技法特論第6回
 
2011.12.10 関数型都市忘年会 発表資料「最近書いた、関数型言語と関連する?C++プログラムの紹介」
2011.12.10 関数型都市忘年会 発表資料「最近書いた、関数型言語と関連する?C++プログラムの紹介」2011.12.10 関数型都市忘年会 発表資料「最近書いた、関数型言語と関連する?C++プログラムの紹介」
2011.12.10 関数型都市忘年会 発表資料「最近書いた、関数型言語と関連する?C++プログラムの紹介」
 
20150725 オープンキャンパス資料
20150725 オープンキャンパス資料20150725 オープンキャンパス資料
20150725 オープンキャンパス資料
 
Processing授業テキスト
Processing授業テキストProcessing授業テキスト
Processing授業テキスト
 
岡山県立大学オープンキャンパス資料
岡山県立大学オープンキャンパス資料岡山県立大学オープンキャンパス資料
岡山県立大学オープンキャンパス資料
 
Nagoya.R #12 入門者講習
Nagoya.R #12 入門者講習Nagoya.R #12 入門者講習
Nagoya.R #12 入門者講習
 
15パズルを作ってみた
15パズルを作ってみた15パズルを作ってみた
15パズルを作ってみた
 
Ssaw08 0916
Ssaw08 0916Ssaw08 0916
Ssaw08 0916
 

Mehr von reona396

PWAnight_20221019_クリエイティブコーディングとは?
PWAnight_20221019_クリエイティブコーディングとは?PWAnight_20221019_クリエイティブコーディングとは?
PWAnight_20221019_クリエイティブコーディングとは?reona396
 
PCD Tokyo 2020 ワークショップ「Processingでクリエイティブコーダーデビュー!」資料
PCD Tokyo 2020 ワークショップ「Processingでクリエイティブコーダーデビュー!」資料PCD Tokyo 2020 ワークショップ「Processingでクリエイティブコーダーデビュー!」資料
PCD Tokyo 2020 ワークショップ「Processingでクリエイティブコーダーデビュー!」資料reona396
 
Processingについて
ProcessingについてProcessingについて
Processingについてreona396
 
p5.js について
p5.js についてp5.js について
p5.js についてreona396
 
Processingでジャバジャバ稼ぐ
Processingでジャバジャバ稼ぐProcessingでジャバジャバ稼ぐ
Processingでジャバジャバ稼ぐreona396
 
WordPress でプロフィールサイトをつくってみた
WordPress でプロフィールサイトをつくってみたWordPress でプロフィールサイトをつくってみた
WordPress でプロフィールサイトをつくってみたreona396
 
プログラミング初心者さんにもオススメ!アートなプログラミング言語 Processingについて
プログラミング初心者さんにもオススメ!アートなプログラミング言語 Processingについてプログラミング初心者さんにもオススメ!アートなプログラミング言語 Processingについて
プログラミング初心者さんにもオススメ!アートなプログラミング言語 Processingについてreona396
 
Processing資料(10) リファレンス
Processing資料(10) リファレンスProcessing資料(10) リファレンス
Processing資料(10) リファレンスreona396
 
Processing資料(9) モード
Processing資料(9) モードProcessing資料(9) モード
Processing資料(9) モードreona396
 
Processing資料(8) 文字
Processing資料(8) 文字Processing資料(8) 文字
Processing資料(8) 文字reona396
 
Processing資料(7) マウスとキーボード
Processing資料(7) マウスとキーボードProcessing資料(7) マウスとキーボード
Processing資料(7) マウスとキーボードreona396
 
Processing資料(5) 正弦波と極座標
Processing資料(5) 正弦波と極座標Processing資料(5) 正弦波と極座標
Processing資料(5) 正弦波と極座標reona396
 
Processing資料(4) アニメーション
Processing資料(4) アニメーションProcessing資料(4) アニメーション
Processing資料(4) アニメーションreona396
 
Processing資料(3) 色の指定
Processing資料(3) 色の指定Processing資料(3) 色の指定
Processing資料(3) 色の指定reona396
 
Processing資料(2) 再帰
Processing資料(2) 再帰Processing資料(2) 再帰
Processing資料(2) 再帰reona396
 
Processing資料(1) Processingの基本
Processing資料(1) Processingの基本Processing資料(1) Processingの基本
Processing資料(1) Processingの基本reona396
 
プログラミング初心者さん歓迎! アートでデザインなプログラミング言語 Processing について
プログラミング初心者さん歓迎! アートでデザインなプログラミング言語 Processing についてプログラミング初心者さん歓迎! アートでデザインなプログラミング言語 Processing について
プログラミング初心者さん歓迎! アートでデザインなプログラミング言語 Processing についてreona396
 

Mehr von reona396 (17)

PWAnight_20221019_クリエイティブコーディングとは?
PWAnight_20221019_クリエイティブコーディングとは?PWAnight_20221019_クリエイティブコーディングとは?
PWAnight_20221019_クリエイティブコーディングとは?
 
PCD Tokyo 2020 ワークショップ「Processingでクリエイティブコーダーデビュー!」資料
PCD Tokyo 2020 ワークショップ「Processingでクリエイティブコーダーデビュー!」資料PCD Tokyo 2020 ワークショップ「Processingでクリエイティブコーダーデビュー!」資料
PCD Tokyo 2020 ワークショップ「Processingでクリエイティブコーダーデビュー!」資料
 
Processingについて
ProcessingについてProcessingについて
Processingについて
 
p5.js について
p5.js についてp5.js について
p5.js について
 
Processingでジャバジャバ稼ぐ
Processingでジャバジャバ稼ぐProcessingでジャバジャバ稼ぐ
Processingでジャバジャバ稼ぐ
 
WordPress でプロフィールサイトをつくってみた
WordPress でプロフィールサイトをつくってみたWordPress でプロフィールサイトをつくってみた
WordPress でプロフィールサイトをつくってみた
 
プログラミング初心者さんにもオススメ!アートなプログラミング言語 Processingについて
プログラミング初心者さんにもオススメ!アートなプログラミング言語 Processingについてプログラミング初心者さんにもオススメ!アートなプログラミング言語 Processingについて
プログラミング初心者さんにもオススメ!アートなプログラミング言語 Processingについて
 
Processing資料(10) リファレンス
Processing資料(10) リファレンスProcessing資料(10) リファレンス
Processing資料(10) リファレンス
 
Processing資料(9) モード
Processing資料(9) モードProcessing資料(9) モード
Processing資料(9) モード
 
Processing資料(8) 文字
Processing資料(8) 文字Processing資料(8) 文字
Processing資料(8) 文字
 
Processing資料(7) マウスとキーボード
Processing資料(7) マウスとキーボードProcessing資料(7) マウスとキーボード
Processing資料(7) マウスとキーボード
 
Processing資料(5) 正弦波と極座標
Processing資料(5) 正弦波と極座標Processing資料(5) 正弦波と極座標
Processing資料(5) 正弦波と極座標
 
Processing資料(4) アニメーション
Processing資料(4) アニメーションProcessing資料(4) アニメーション
Processing資料(4) アニメーション
 
Processing資料(3) 色の指定
Processing資料(3) 色の指定Processing資料(3) 色の指定
Processing資料(3) 色の指定
 
Processing資料(2) 再帰
Processing資料(2) 再帰Processing資料(2) 再帰
Processing資料(2) 再帰
 
Processing資料(1) Processingの基本
Processing資料(1) Processingの基本Processing資料(1) Processingの基本
Processing資料(1) Processingの基本
 
プログラミング初心者さん歓迎! アートでデザインなプログラミング言語 Processing について
プログラミング初心者さん歓迎! アートでデザインなプログラミング言語 Processing についてプログラミング初心者さん歓迎! アートでデザインなプログラミング言語 Processing について
プログラミング初心者さん歓迎! アートでデザインなプログラミング言語 Processing について
 

PCD2019 TOKYO ワークショップ「2時間で!Processingでプログラミング入門」