見出し画像

【Processing】初心者がProcessingをVisual Studio Codeで動かす

はじめに(雑談)


 昨日の夜からずっと試行錯誤してようやくできました。今まで私はVisual Studio Code(VSCode)をただの「jsonファイルに色を付けて見やすくするソフト」だと思っていたのですが、なんと書いたプログラムをVSCode上で実行できるらしいではないですか!! ということで、ちょうど試していたProcessingをVSCode上で実行できるよう設定してみました。


 Processingは円や四角などの図形を、簡単なコーディングで描くことができるプログラミング言語なのですが、このエディタがなんとも見づらい!

こんな感じ。書体は私の好きなCicaにしました

 勿論使いやすいようにカスタマイズできるんでしょうけど、よく分からないので、今回はVSCodeに頼っちゃいましょう。他の言語もVSCodeで動かせるらしいので、一緒に使えますしね。また、検索や置換機能などがVSCodeだと整っています。

VSCodeだとこうなります。色合いが慣れているので見やすいですね

 また、これを読んでいる方に忠告ですが、私はこれらのソフトに詳しくはありません。ですが、初心者なりにどうやって解決したか、ここに記録しておこうと思います。


 あと久しぶりにnote書いたらエディタが変わりまくっていて違和感が凄いあります。でもいろいろな機能追加してくれるのは嬉しい……


結論(成功した設定)

環境

  • windows10

  • Processing-3.5.4

  • Processing Language v-1.4.6

設定

 VSCodeのMarketplaceから、拡張機能「Processing Language」をインストールします。

 アンインストールの隣、歯車マークの拡張機能の設定から、Processing: Pathに自分のPC上のprocessing-java.exe(processing.exeと同じ階層にあります)のパスを書きます。

Exampleに沿って書きます
C:\Users\(ユーザー名)\ドキュメント\processing-3.5.4\processing-java

 私の環境ではこのようになりました。


 次にVSCodeで新しいファイルを作り、Ctrl+Shift+Bで実行しようとします。すると上に表示される

  1. 実行するビルドタスクがありません。ビルドタスクを構成する……

  2. テンプレートからtasks.jsonを生成

  3. Others 任意の外部コマンドを実行する例

を選択します。

選ぶのは一番下です

 そうするとtasks.jsonが生成されるので、以下のように書き換えます。"command"の部分は、processing-java.exeのパスを入力してください。また、パス中の区切りは\\(バックスラッシュ2つ)で書いてください。

{
	"version": "2.0.0",
	"presentation": {
		"reveal": "always",
		"panel": "new"
	},
	"tasks": [
		{
			"label": "Run",
			"command": "C:\\Users\\(ユーザー名)\\ドキュメント\\processing-3.5.4\\processing-java.exe",
			"type": "process",
			"args": [
				"--force",
				"--sketch=${fileDirname}",
				"--run"
			],
			"problemMatcher": [],
			"group": {
				"kind": "build",
				"isDefault": true
			}
		}
	]
}

 tasks.jsonを保存した後に、動かしたいpdeファイルを開き、再度Ctrl+Shift+Bで実行すると、うまく実行できます。


参考文献

最終的に解決できたもの

途中で参考にしたもの


いいなと思ったら応援しよう!