1 of 80

Processingで

お絵かきソフトを作ろう！！

Processingではじめるプログラミング入門

第１回　プログラミングって？

2 of 80

全体の目標

  • プログラミングに触れてみる
  • お絵かきソフトを制作する

2

3 of 80

準備！！

  1. https://processing.org/download/
  2. 展開
  3. それっぽいアイコンをダブルクリック
  4. 右上のJavaからモードの追加をクリックし、Python Modeをインストール
  5. 右上のJavaと書いてあるところをPythonに

3

4 of 80

準備！！

4

5 of 80

準備！！

5

6 of 80

準備！！

6

右クリック

7 of 80

準備！！

7

8 of 80

準備！！

8

9 of 80

プログラミングとは？

  • コンピュータへの指示を書くこと
    • マニュアルを書くイメージ
    • コンピュータにさせたい仕事の手順や内容を考え、記述すること

9

10 of 80

今回使う『 Processing 』とは？

Processing（プロセシング）とは、学生やアーティスト、デザイナー向け�に作られた、デジタルアートをシンプルに表現するためのソフトです。

​

10

※Processingは標準ではJavaという言語を使って記述されますが、�今回はPythonという言語を使って記述していきたいと思います。

11 of 80

Processingの作例

11

Processingを利用したオシロスコープ

12 of 80

Processingの作例

12

実演ページ

13 of 80

なぜPythonなのか

​

  • 他の言語と比較して書きやすい
  • 今めちゃくちゃアツい！！！

​

13

Python

Pythonで作られたサービス

14 of 80

プログラミング言語について

​

  • プログラミング言語にはたくさんの種類がある
  • 言語によって得意なこと、不得意なことがある

14

15 of 80

それぞれの目的に応じたプログラミング言語

  • 3Dゲームを作りたい
    • C#, C++など
  • 人工知能の研究をしたい
    • Pythonなど

15

  • Webサイトを作りたい
    • JavaScript, PHPなど
  • スマホアプリが作りたい
    • Swift, Java など

​

16 of 80

もう少し準備

16

17 of 80

もう少し準備

17

Python Mode for …

を選択する

18 of 80

モードの切り替え

18

19 of 80

実行の方法

赤丸のところ

19

参考サイト

20 of 80

停止の方法

赤丸のところ

20

参考サイト

21 of 80

画面のサイズを指定する

size(500 , 500)

21

横幅

高

さ

Reference

size(横幅, 高さ)

22 of 80

背景色の指定方法

size(500 , 500)

background(255)

​

22

23 of 80

座標に関して

23

X座標

Y座標

24 of 80

各種図形の描き方

  • 四角形
    • ex) rect(10, 10, 70, 50)
  • 三角形
    • ex) triangle(40, 80, 10, 130, 80, 130)
  • 円
    • ex) ellipse(130, 40, 40, 40)
  • 直線
    • ex) line(110, 80, 180, 150)

24

25 of 80

四角形の描き方

25

基準になる点は左上（画面の座標と同じ）

Example

rect(10,10,100,100)

rect(x座標 , y座標 , 横幅 , 高さ)

26 of 80

円の描き方

26

ellipseは楕円という意味

横幅と縦の幅を同じにすることで円を描画することができる

Example

ellipse(100,100,50,50)

ellipse(x座標 , y座標 , 横の直径 , 縦の直径)

27 of 80

直線の描き方

27

始点と終点を指定する

Example

line(50,50,100,100)

line(始点x座標 , 始点y座標 , 終点x座標 , 終点y座標)

28 of 80

円を動かそう！

  • mouseX , mouseY
  • それぞれマウスのx座標、y座標が入っている
  • 円がマウスカーソルについてくるようになる

28

29 of 80

円が動かない...!?

29

上から順に

1回だけ実行される

30 of 80

円を動かそう！（真）

def setup():

size(500, 500)

background(255)

rect(50,50,50,300)

line(50,50,150,50)

​

def draw():

ellipse(mouseX, mouseY, 50, 50)

30

1回だけ実行される

繰り返し実行される

31 of 80

ゴール

31

32 of 80

保存の方法

左上の「ファイル」から

32

参考サイト

33 of 80

応用問題

ヒント：今日学んだ内容だけで実現できます！！

＝＞　実演へ

33

34 of 80

次回予告

​

​

34

第２回　お絵描きソフトをつくろう

18日（木）16:30~19:00

20日（土）13:00~16:00

第３回　オリジナルの機能をつけよう

23日（火）16:30~19:00

24日（水）16:30~19:00

35 of 80

第１回終了です

お疲れ様でした

35

今後の予定（4月）

第１回

16日（火）16:30~19:00　図書館セミナールーム２

第２回

18日（木）16:30~19:00　図書館セミナールーム２

20日（土）13:00~16:00　地域デザイン棟

第３回

23日（火）16:30~19:00　地域デザイン棟

24日（水）16:30~19:00　図書館セミナールーム２

新歓食事会

27日（土）18:00~ デザイン棟集合

36 of 80

Processingで

お絵かきソフトを作ろう！！

Processingではじめるプログラミング入門

第２回　お絵かきソフトを作ろう

37 of 80

前回のおさらい

def setup():

size(500, 500)

background(255)

rect(50,50,50,300)

line(50,50,150,50)

​

def draw():

ellipse(mouseX, mouseY, 50, 50)　

37

1回だけ実行される

繰り返し実行される

38 of 80

新しいスケッチを作ろう

ファイル　→　新規

38

39 of 80

図形を自由自在に使いこなそう

線の太さを変えたい！　→　strokeWeight()

線の色を変えたい！　→　stroke()

塗りつぶしの色を変える　→　fill()

線を消したい　→　noStroke()

塗りつぶしを消したい　→　noFill()

39

40 of 80

線の太さを変える

線の太さを変更できる

図形を描く前に指定

ellipseの直前など

40

41 of 80

線の色を変える

図形のフチの線の色

色は光の三原色でも指定できる

256 x 256 x 256 = 16777216 色

こんなに表現できる！

41

42 of 80

色の指定について

42

前回

今回

43 of 80

塗りつぶしの色を変える

図形の中の色を指定できる

43

44 of 80

線、塗りつぶしを消す

noStrokeで線を消す

noFillで中の色を消す

44

45 of 80

演習

45

46 of 80

ランダムな動きを取り入れよう

mouseX だけじゃ物足りないときに！

random(0,255)�23,26,45,212,98,56,9,89,.....�実行されるたびにランダムな数になる！

mouseX , mouseY のところに random(0,500) と書いてみよう。

46

47 of 80

演習

47

48 of 80

お絵かきソフトに近づけよう

def setup():

size(600,350)

noFill()

background(255)

fill(0)

​

def draw():

ellipse(mouseX,mouseY,10,10)

​

48

49 of 80

お絵かきソフトに近づけよう

49

50 of 80

クリックしたときだけ線を引こう

  • mousePressed
    • マウスのボタンが押されているかがわかる

​

50

51 of 80

if文（条件分岐）

if 条件:

させたい処理

させたい処理

...

51

マウスが押されてるときだけ、線を引きたい！！

Example

if mousePressed:

ellipse(mouseX,mouseY,10,10)

52 of 80

if文（条件分岐）

52

53 of 80

難しいおはなし

def draw(): → 1秒間に30回？？？

フレームレート�1秒間に生成させる画像の数 → processingでは30回！！� → 30回drawしている！！

​

53

54 of 80

映像の原理

小さな変化を短い時間でたくさん�繰り返すことで映像として見える

・ストップモーション�・パラパラ漫画�・人間の目

54

55 of 80

途切れない線を引こう

  • pmouseX, pmouseY
    • 1つ前のmouseX、mouseYが入っている
    • 前のフレームのmouseX、mouseYが入っている

55

56 of 80

if文（条件分岐）

if 条件:

させたい処理

else:

させたい処理

56

上の条件が成り立たなかったら

実行される。

57 of 80

if文（条件分岐）

if 条件:

させたい処理

else:

させたい処理

もし スペースキーを押したら:

ジャンプする

違ったら:

前に進む

57

58 of 80

線の太さを変えよう

58

strokeWeight(10)

Reference

strokeWeight(太さ)

59 of 80

線の色を変えよう

stroke(色)

ex)

stroke(122)　　　（白黒）

stroke(0, 0, 255)　（光の３原色で指定できる）

※ 各値は0〜255まで指定できる

59

オリジナルの色を作れるサイト

色の見本と値が載っているサイト

60 of 80

演習

60

61 of 80

次回予告

​

​

61

第３回　オリジナルの機能をつけよう

23日（火）16:30~19:00

24日（木）16:30~19:00

62 of 80

第２回終了です

お疲れ様でした

62

今後の予定（4月）

第２回

20日（土）13:00~16:00　地域デザイン棟

第３回

23日（火）16:30~19:00　地域デザイン棟

24日（水）16:30~19:00　図書館セミナールーム２

新歓食事会

27日（土）18:00~ デザイン棟集合

63 of 80

Processingで

お絵かきソフトを作ろう！！

Processingではじめるプログラミング入門

第３回　オリジナルの機能をつけよう

64 of 80

前回の復習

64

図形を操作できるようになった

65 of 80

前回の復習

条件分岐が使えるようになった

if 条件:

させたい処理

させたい処理

...

65

66 of 80

条件分岐で出来ることを増やそう

条件分岐でできること

mousePressed … マウスのボタンが押されているかを判別

keyPressed … キーボードが押されているかを判別　←New!

比較演算子の使用　←New!

66

67 of 80

比較演算子

２つの値の関係を調べ、その関係が成立するかどうか判断するもの

・「==　（等しいか）」

・「>　 （大きいか）」

・「<　 （小さいか）」

　など

条件分岐で使える！

​

67

68 of 80

比較演算子

２つの値の関係を調べ、その関係が成立するかどうか判断するもの

・「==　（等しいか）」

・「>　 （大きいか）」　　

・「<　 （小さいか）」

　など

条件分岐で使える！

​

68

とりあえず書いてみよう！

69 of 80

比較演算子の例

def setup():� size(500,500)� background(0)

�def draw():� if mouseX > 250:� ellipse(mouseX,mouseY,50,50)

​

​

69

70 of 80

色を変えよう

  • keyPressed
    • キーボードのキーが押されているかわかる
  • key
    • 押されたキーの文字が入る

70

71 of 80

keyPressed のつかいかた

def setup():� size(500,500)� background(255)

def draw():� if keyPressed:� background(random(50,255),random(50,255),random(50,255))

71

72 of 80

keyPressed と key の組み合わせ

def draw():� if keyPressed:� if key == “r”:� background(255, 0, 0)� if key == “g”:� background(0, 255, 0)� if key == “b”:� background(0, 0, 255)

72

73 of 80

入れ子の処理

if keyPressed:� fill(255, 0, 0)� ellipse(mouseX, mouseY, 300, 300)� if key == “a”:� fill(0, 255, 0)� ellipse(mouseX, mouseY, 200, 200)�fill(0, 0, 255)�ellipse(mouseX, mouseY, 100, 100)

73

Column

:

コロン

条件式の終わりを示す

74 of 80

スコープ (入れ子の処理)

if keyPressed:� fill(255, 0, 0)� ellipse(mouseX, mouseY, 300, 300)� if key == “a”:� fill(0, 255, 0)� ellipse(mouseX, mouseY, 200, 200)�fill(0, 0, 255)�ellipse(mouseX, mouseY, 100, 100)

74

if 条件式１:

​

​

​

​

​

​

​

​

fill(0, 0, 255)

​

(させたい処理群１)

…

if 条件式２:

(させたい処理群２)

​

：条件式が成り立つとき

：条件式が成り立たないとき

75 of 80

色を変えよう

  • if文「==」
    • 右と左が等しいかを判断する
    • key == “a”
  • 「”」ダブルクオーテーション　コンピューターに文字であることを認識させる

75

Example

if key == “a” :

ellipse(mouseX,mouseY,10,10)

76 of 80

算術演算子

『+』...「+」の役割を持つ

『-』...「-」の役割を持つ

『*』...「×」の役割を持つ

『\』...「÷」の役割を持つ

『%』... 割った時のあまりを計算してくれる

​

76

77 of 80

お絵かきソフトを作ろう！

クリックしたときだけ線が引ける

キーボードで線の色が変えられる

消しゴム機能

全消し機能

77

78 of 80

絵を画像として保存しよう

  • save(“保存したいファイル名.png”)
    • ex) save(“name.png”)

78

79 of 80

オリジナルの機能を作ろう!!!

わからないことや、気になることがあればどんどん質問してください

79

80 of 80

第３回終了です

お疲れ様でした

新歓食事会でお会いしましょう!!!

80

今後の予定（4月）

第３回

24日（水）16:30~19:00　図書館セミナールーム２

新歓食事会

27日（土）18:00~ デザイン棟集合