SlideShare a Scribd company logo
1 of 72
Download to read offline
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

More Related Content

What's hot

Static Data Members and Member Functions
Static Data Members and Member FunctionsStatic Data Members and Member Functions
Static Data Members and Member FunctionsMOHIT AGARWAL
 
관리자 화면설계 V 1 0 레이아웃
관리자 화면설계  V 1 0 레이아웃관리자 화면설계  V 1 0 레이아웃
관리자 화면설계 V 1 0 레이아웃guest02cfd10
 
RDBにおけるバリデーションをリレーショナルモデルから考える
RDBにおけるバリデーションをリレーショナルモデルから考えるRDBにおけるバリデーションをリレーショナルモデルから考える
RDBにおけるバリデーションをリレーショナルモデルから考えるMikiya Okuno
 
ぼくとJenkinsおじさんの360日戦争
ぼくとJenkinsおじさんの360日戦争ぼくとJenkinsおじさんの360日戦争
ぼくとJenkinsおじさんの360日戦争goccy
 
Effective Modern C++勉強会#4 Item 17, 18資料
Effective Modern C++勉強会#4 Item 17, 18資料Effective Modern C++勉強会#4 Item 17, 18資料
Effective Modern C++勉強会#4 Item 17, 18資料Ryo Igarashi
 
事例から探る、Redmineの機能とよりよい運用
事例から探る、Redmineの機能とよりよい運用事例から探る、Redmineの機能とよりよい運用
事例から探る、Redmineの機能とよりよい運用Go Maeda
 
ゲームボーイ向けOSの作り方
ゲームボーイ向けOSの作り方ゲームボーイ向けOSの作り方
ゲームボーイ向けOSの作り方Yuma Ohgami
 
Input processing and output in Python
Input processing and output in PythonInput processing and output in Python
Input processing and output in PythonRaajendra M
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginnersjeroenvdmeer
 
Orientation Ceremony GDSC-LBCE
Orientation Ceremony GDSC-LBCEOrientation Ceremony GDSC-LBCE
Orientation Ceremony GDSC-LBCEDiksha71
 
Boostのあるプログラミング生活
Boostのあるプログラミング生活Boostのあるプログラミング生活
Boostのあるプログラミング生活Akira Takahashi
 
Python入門 : 4日間コース社内トレーニング
Python入門 : 4日間コース社内トレーニングPython入門 : 4日間コース社内トレーニング
Python入門 : 4日間コース社内トレーニングYuichi Ito
 
高位合成におけるC++テンプレートメタプログラミングの効果
高位合成におけるC++テンプレートメタプログラミングの効果高位合成におけるC++テンプレートメタプログラミングの効果
高位合成におけるC++テンプレートメタプログラミングの効果Kenichiro MITSUDA
 
Library Management System in c++
Library Management System in c++Library Management System in c++
Library Management System in c++vikram mahendra
 
Lab manual data structure (cs305 rgpv) (usefulsearch.org) (useful search)
Lab manual data structure (cs305 rgpv) (usefulsearch.org)  (useful search)Lab manual data structure (cs305 rgpv) (usefulsearch.org)  (useful search)
Lab manual data structure (cs305 rgpv) (usefulsearch.org) (useful search)Make Mannan
 
Graphics & Animation with HTML5
Graphics & Animation with HTML5Graphics & Animation with HTML5
Graphics & Animation with HTML5Knoldus Inc.
 
익명 채팅 앱 최종 발표 자료
익명 채팅 앱 최종 발표 자료익명 채팅 앱 최종 발표 자료
익명 채팅 앱 최종 발표 자료Young-jun Park
 

What's hot (20)

Introduction to the DOM
Introduction to the DOMIntroduction to the DOM
Introduction to the DOM
 
Static Data Members and Member Functions
Static Data Members and Member FunctionsStatic Data Members and Member Functions
Static Data Members and Member Functions
 
관리자 화면설계 V 1 0 레이아웃
관리자 화면설계  V 1 0 레이아웃관리자 화면설계  V 1 0 레이아웃
관리자 화면설계 V 1 0 레이아웃
 
RDBにおけるバリデーションをリレーショナルモデルから考える
RDBにおけるバリデーションをリレーショナルモデルから考えるRDBにおけるバリデーションをリレーショナルモデルから考える
RDBにおけるバリデーションをリレーショナルモデルから考える
 
ぼくとJenkinsおじさんの360日戦争
ぼくとJenkinsおじさんの360日戦争ぼくとJenkinsおじさんの360日戦争
ぼくとJenkinsおじさんの360日戦争
 
Effective Modern C++勉強会#4 Item 17, 18資料
Effective Modern C++勉強会#4 Item 17, 18資料Effective Modern C++勉強会#4 Item 17, 18資料
Effective Modern C++勉強会#4 Item 17, 18資料
 
事例から探る、Redmineの機能とよりよい運用
事例から探る、Redmineの機能とよりよい運用事例から探る、Redmineの機能とよりよい運用
事例から探る、Redmineの機能とよりよい運用
 
ゲームボーイ向けOSの作り方
ゲームボーイ向けOSの作り方ゲームボーイ向けOSの作り方
ゲームボーイ向けOSの作り方
 
Cookies and sessions
Cookies and sessionsCookies and sessions
Cookies and sessions
 
Input processing and output in Python
Input processing and output in PythonInput processing and output in Python
Input processing and output in Python
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
Orientation Ceremony GDSC-LBCE
Orientation Ceremony GDSC-LBCEOrientation Ceremony GDSC-LBCE
Orientation Ceremony GDSC-LBCE
 
Boostのあるプログラミング生活
Boostのあるプログラミング生活Boostのあるプログラミング生活
Boostのあるプログラミング生活
 
Python入門 : 4日間コース社内トレーニング
Python入門 : 4日間コース社内トレーニングPython入門 : 4日間コース社内トレーニング
Python入門 : 4日間コース社内トレーニング
 
高位合成におけるC++テンプレートメタプログラミングの効果
高位合成におけるC++テンプレートメタプログラミングの効果高位合成におけるC++テンプレートメタプログラミングの効果
高位合成におけるC++テンプレートメタプログラミングの効果
 
Library Management System in c++
Library Management System in c++Library Management System in c++
Library Management System in c++
 
Constructors & destructors
Constructors & destructorsConstructors & destructors
Constructors & destructors
 
Lab manual data structure (cs305 rgpv) (usefulsearch.org) (useful search)
Lab manual data structure (cs305 rgpv) (usefulsearch.org)  (useful search)Lab manual data structure (cs305 rgpv) (usefulsearch.org)  (useful search)
Lab manual data structure (cs305 rgpv) (usefulsearch.org) (useful search)
 
Graphics & Animation with HTML5
Graphics & Animation with HTML5Graphics & Animation with HTML5
Graphics & Animation with HTML5
 
익명 채팅 앱 최종 발표 자료
익명 채팅 앱 최종 발표 자료익명 채팅 앱 최종 발표 자료
익명 채팅 앱 최종 발표 자료
 

Similar to 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
 

Similar to 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
 

More from 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
 

More from 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でプログラミング入門」