お絵かきプログラミングProcessingサンプルコード解説の第12弾です！ ProcessingをまだPCに導入されていない方は、 こちらの記事 を参考に導入してみてください！ 今回は Button というサンプルコードを見てみましょう。 難易度は ★★★☆☆ くらい。 クリックに反応する部分の処理の流れを追うのは、慣れないと少し難しいかもしれませんが、汎用性が高く便利です。 注意！ 説明は全てMac版で 、Processing (4.0b3) を実行した際の画面を示しながら行いますが、Windows版やその他バージョンのProcessingでもほとんど同じものが現れると思います。 …

processingには、cp5というGUIライブラリがあり、多くの場合このライブラリを使えば、必要とするボタンコントロールをスケッチに搭載することができます。 ただ、時々デザインに凝った独自ボタンを使いたくなります。 そのような用途に備え、class関数を使った例を掲載します。 完成したスケッチの実行すると以下のようにボタンが２つ表示され、プッシュスイッチ、とOnOffスイッチです。 プログラムのButton作成の括弧内は、順に になります。 size(150,150); background(0); btn1.drawBtn(); btn2.drawBtn(); fill(brt); …

マウスがボタンに重なると色が変わり、またクリック後に別シーンにうつるようなものを作ります。 シーン用に変数を用意してシーン用変数が特定の値の時に特定のシーンの処理を実行する、という感じです。 これはswitch文などを使うとわりと簡単に実装できます。 ボタンに用意した関数を使ってシーンを切り替えます。 float x, y; float sizeX, sizeY; int state; color baseCol; float nb; float sb; float pb; String str; Button(float x, float y, float sizeX, float …

今回の記事の目的はProcessingの「mouseButton」を理解し、使えるようにする こと。 記事内のProcessingのバージョンは4.3。 動きのある画像は、コードではなく、GIF画像編集で無限再生されるようにしています。 CENTERに設定してスクロールボタンを押し込んでみたが、僕のマウスでは動かなかった。 マウスによる？ mouseButtonを使って、簡単なコミュニケーションツールを作成。 左クリックで◯、右クリックで☓が出て簡単な質問に答えたりできます。 【問題】マウスを動かすと表示が消えてしまうこと。 …

このチュートリアルではJavaScriptによるProcessing (p5.js)の使い方を紹介しています。 基本的な図形の書き方から、色の指定方法やランダムな値の使い方、マウスの入力を受け取る方法まで学習できます。 基本的な内容ですが、アイデア次第で素晴らしい作品を作ることができます！ もしチュートリアルを終えてもっと学びたいと思っていただけたら本家サイトのドキュメントをのぞいてみてください。 プログラミング自体が初めてという方はまずJavaScriptのチュートリアルから始めることをお勧めします。 …

ControlP5はGUIライブラリで、buttons, sliders, knobs, toggles, textfields, checkboxes, accordions, charts, timers, drop-downsなどのユーザーインターフェイスを processing に提供します。 この記事では、buttonコントロールの使い方を整理しました。 1. 基本スケッチ Processingに新規スケッチを作成し、次のコードを追加します。 最も基本的な ボタンが画面に表示され、ボタンをクリックすると、右の四角内の色が変化します。 import controlP5.*; …