LoginSignup
0
0

More than 3 years have passed since last update.

簡単にプログラミングができる方法を教えます!【Processsing#1】

Last updated at Posted at 2020-10-24

今回の目標

GOAL.pde
開発環境を構築して簡単なプログラムを実行してみよう!

目次

1. Processingをダウンロード
2. 開発環境を理解しよう
3. 実行してプログラミングを体験しよう
4. 最後に

1. Processingをダウンロード

※2020/10/24 現在

ステップ1

以下のURLよりダウンロード。
ProcessingのダウンロードはこちらのURLから

ステップ2

サイトにいくことができたら、下図の「Download Processing」よりダウンロード。
image.png

ステップ3

ご自身のOSに合わせてダウンロードしてください。
Windows,MacOS,Linuxがあります。
Windowsのbitの確認は「スタート→設定→システム→バージョン情報→システムの種類」で確認してください。
image.png

ステップ4

zipファイルができた方は解凍作業に入ります。
image.png
エクスプローラー(Windows)やFinder(MacOS)のダウンロード欄より先程のzipファイルを右クリック等して任意の場所に展開します。
image.png
展開できたらフォルダの中に入り「prosessing.exe」を確認できたらダウンロード完了です。
image.png

2. 開発環境を理解しよう

確認しよう

上記で確認した「processing.exe」をダブルクリックして実行してください。
↓このような画面が出てきたら成功です。
image.png
▶:実行ボタン
■:実行停止ボタン
白い欄:プログラムコード欄
下の黒いコンソール欄:実行結果欄

コードを打って実行ボタンを押すだけです。

3. 実行してプログラミングを体験しよう

サンプルコードをコピペして実行しよう

sample.pde
void setup() {
  size(500, 500);
}

void draw() {
  strokeWeight(10);
  stroke(0);
  line(mouseX, mouseY, pmouseX, pmouseY);
}

上記のコードを下記のようにコピペして▶実行しましょう。
image.png
すると、新しいウィンドウが出てくると思います。
ウィンドウが出てくれば成功です。
image.png
マウスをウィンドウ内に入れてみてください。
すると、このように黒線を描くことができます。
このプログラムは黒い線を描くコードだったというわけです。
image.png

実行して終わりではない

プログラミングしてみてどう思いましたか?
つまらないと思いましたか?
もっといろいろなプログラムを実行してみたいと思いましたか?
いずれにせよ、上記のコードを実行して「なるほど」と思うだけでは成長しません。

・stroke(0)をstroke(100)にしたらどうなる?
・線じゃなくて点線とかできないの?
・黒い線じゃなくて赤い線にはできない?

このように疑問を抱き、実際に進んで改変することが成長の近道です。
スポーツや勉強でもそうですよね。

4. 最後に

私がC言語の次に知った言語が、このProcessingでした。
Processingを使うと描写できるので、やってて楽しいですよね。
この記事でもしかしたら偉そうなことを書いていたかもしてませんが、まだまだ初心者です。
今回は復習も兼ねて開発環境の構築から実行までをやりました。
次回からは「こんなの作りたい!」というのを決めてからプログラミングしていきたいと思います。
最後まで読んでいただき、ありがとうございました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0