まゆたまガジェット開発逆引き辞典

電子工作やプログラミングのHowtoを逆引き形式で掲載しています。作りたいモノを決めて学んでいくスタイル。プログラマではないので、コードの汚さはお許しを。参照していないものに関しては、コピペ改変まったく問いません

Processing幾何学

Processingで立方体をランダムな位置&ランダムな方向に回転させる

イラストの背景用にまた自動生成グラフィックを使ってしまったのでメモ。 楽なんですもの・・・下記の画像のように、ランダムな方向を向いた立方体をランダムな位置に配置しました。 マウスを押すと新たに描画してくれます。 好きな画像が生成されるまで、マ…

Processingで特定の数だけ+特定の色の中からランダムな色で線を描く

ランダムな数だけ+特定の色の中からランダムな色で図形を描く、というのは以前やりましたが、特定の数だけ必要になったのでメモです。 こちらですね。これを参考に少し書き換えました。 prince9.hatenablog.com コードは下記です。PDF書き出しも入れてありま…

MESHのデータをProcessingに送ってアニメーションさせる

Bluetooth通信でスマホやタブレットにセンサーのデータを簡単に送れるSonyのMESH。 このセンサーのデータをIFTTT+Googleスプレッドシート経由でProcessingに送って、アニメーションの速度と色を変えてみました。 APIを使っていないので、Googleスプレッドシ…

Processingで曲線を描くときに楽できるツール

Processingで思ったような曲線を描くのがめんどいのーと検索してたところ、こんなツールがあったのでご紹介です。 Illustratorのようにハンドルを動かすと、自動的にvertexとbezierVertexの座標を出してくれます。www.khanacademy.orgこんな感じです。 void …

Processingでイラレから出力したSVGを使う

Processingで全自動生成したいところですが、自分の気にいったパーツを使いたいというときもあるハズ。 ということで、ProcessingにSVGファイルを読み込ませて、複数個ランダムな位置・大きさ・角度にしてみました。 イラレから書き出すときに設定に気をつけ…

Processingで集中線を描く

集中線はあまり使わないかもですが、線を一定角度回転させるということはありそうなのでメモです。 太さをランダムに、そして線の角の種類を変えることで、集中線っぽくしてます。 //角度。小さくすると密度が増える int angle = 3; void setup() { size(600…

Processingで紙ふぶきを描く

よくイラストで飛んでる三角形です。 色数多すぎたかも・・・完全に形までランダムだといびつになったりするので、欲しい三角形の形を拡大縮小と回転させたほうがよさげです。 int tx,ty; //三角形の数 int triangleCount = 20; //最大個数分、または色のパ…

Processingでコロナみたいなのを描く

ロマサガ3の死食(日食)っぽい? こちらfrilly ring - OpenProcessing でProcessing.jsのモードになってたので、P5モードかつマウスクリックでランダムに形が切り替わるようにしました(ので変数名変えてないです)。 参考にさせて頂きました。ありがとうござい…

Processingで折れ線グラフみたいなのを描く

折れ線グラフ的なものが欲しかったので、作ってみました。 こちらneralt.com を参照させて頂きました。 イメージ背景に使えそうですね。こんな感じです。 三角形やらと組み合わせると、こんなのもできます。 color[] colarray = { #fdf4ac,#3de3d6,#b564c5,#…

Processingで3Dの立方体に簡単にテクスチャをつける

本家ではvertexを使ってテクスチャを生成してますが、それテクスチャの形ごと作ってるだけやんと思い、もっと簡単な方法がないか調べてみました。 下記のサイトを参照させて頂きました。 OpenGLまで探してたので、単にboxでできることが分かってよかったです…

Processingで作った画像をPNGとPDFで書き出す

よく忘れてしまうのでメモです。 redraw(); を使っている場合はredraw();を書いた箇所によってはエラーになったり、何も描画されてないことになったりするので注意です。こちらprince9.hatenablog.com のコードでできた画像をPDF書き出ししてみました。 PDF…

Processingでランダムな個数、かつ特定の色の中からランダムな色で描く

図形をランダムな個数生成して、色もランダムにしたい場合です。 色は特定の色からランダムに選ばれるので、多少の重複はあります。まずはこんな感じで1つのパーツにつき1色の場合。 //最大個数分、または色のパターンの数配列を用意する int[] col1 = new i…

Processingでランダムな回数ぶん繰り返す

Processingでランダムな回数ぶん繰り返し描画します。 マウスをクリックするたびに四角形の個数が変わります。 メモです。 int col; void setup() { size(600,600); noLoop(); } void draw() { background(255); //0から10のランダムな回数ぶん、rectを繰り…

processingで同じ範囲の乱数を複数パターン生成する

0から10までの乱数が欲しいけど、変数を同じにすると同じパターンになっちゃう・・・というときの解決策です。 同じ範囲の乱数を複数パターン生成しています。下記の場合、0と1の乱数を10パターン作っています。重複はしていますが、変化のパターンは異なり…

Processingで特定の色の組み合わせからランダムに色を選ぶ

Processingで特定の色の組み合わせからランダムに色を選ぶ方法です。 4色の中からランダムに選ぶ、みたいなときに使います。基本ですが、私がswitch使ってめんどくさいことをしてたので、違うやり方を忘れないようにメモ。 //ランダム用 int col; //色の配列…

Processingで図形を特定の個数&ランダムな位置に描く、その2

Macのビジュアルプログラミング環境「Quartz Composer」では、図形をグループ化してそれごと動かすというのが簡単にできます。 が、Processingだとfor使って計算しなくちゃアカンからめんどいのーと思ってこのハコの記事 prince9.hatenablog.com を書いてい…

Processingで四角形を3つくっつけてハコをつくる

今度は四角形を3つくっつけて、ハコをつくってみました。 forの使い方がポイントですね。一定間隔で図形を並べる場合はforを使いますが、うちわけは下記のようになります。 これはサイズ100の四角形を50ずつ空けて、3つ描いています。 30は上と左の空き量(描…

Processingで四角形を2つくっつけて、複数ランダムに描く

タイルに色を塗ろうと思ったのですが、配色がメンドくてプログラムに任せた第二弾。 今度は四角形タイルです。書き換えればパズルもいけそうですね。quadを2つくっつけて四角形にしています。例によってマウスクリックでランダムに形が生成されます。 参考に…

Processingで円グラフを描く

半円の向きをランダムにしてくっつけて、1つの円にしようと思っていろいろやってたら、円グラフを描くやり方が公式で解説されていた PieChart \ Examples \ Processing.org のでそちらを参考にしました。こんな感じです。半円の角度と色がマウスボタンを押す…

Processingでクレヨンスクラッチもどきをつくる

先日テレビでクレヨンスクラッチをやっていたので、processingで実装してみました。 実際のクレヨンスクラッチは、1.適当に色つきクレヨンで塗る 2.その上から黒のクレヨンで全体をぬりつぶす 3.クギなどでひっかくという手順ですが、 Processingでは、0.「…

Processingで円が重ならないようにランダムに描く

Processingで円が重ならないようにランダムに描きます。 2点間の距離を出す「dist」を使って、2つの円の半径の合計が2点間の距離より小さくなればOKです。 つまり、cとpの2点間の距離 > cの半径+pの半径の場合に描画されます。 processing本家の掲示板にお世…

Processingで図形の色を特定の色の中からランダムに変える

今回はメモ程度。 例えば、赤・緑・青・黄色の中から1色ランダムに選びます。 条件分岐のswitchと配列を使います。 マウスクリックで色を変更します。 //色ランダム int colrd; void setup() { size(600, 600); background(255); smooth(); noLoop(); } void…

Processingでランダムに記号を描く2

形と色がランダムに変わるようにしました。 ストライプに関してはforで書いていたのですが、色がうまいこといかなかったので、ひとまずは力技の汚いコードです。 //グリッドのサイズ int gridSize = 50; //ランダムの値 int rd1; //色ランダム int colrd; //…

Pressingで水玉模様を描く

水玉とチェック柄をまとめてみました。書き方は同じで、rect/ellipseを変えるだけです。水玉模様 //水玉ひとつのサイズ int rSize = 60; int rnum = 600 / rSize; void setup() { size(600, 600); background(255); smooth(); noLoop(); noStroke(); } void …

Processingでハコをランダムに複数描く2

前回は色は固定で表示/非表示の切り替えをランダムに行っていましたが、今回は色の切り替えと表示/非表示がランダムに切り替わるようにしました。 色はfill()の色だけでなく、チェック柄も使えます。 模様を色として使う場合、ハコのそれぞれの面の形にマス…

Processingでチェック柄を描く

ハコのテクスチャにするつもりで、Processingで赤と黒のチェック柄を描きました。 条件分岐をもうちょいスマートに書きたいところ。 int rSize = 60; int rnum = 600 / rSize; void setup() { size(600,600); background(255); noLoop(); noStroke(); } void…

Processingでハコをランダムに複数描く

前回のハコを応用して、ハコの面がランダムであったりなかったりなモノを作ってみました。 メモリ的に「描画しない」という方法がちと分からなかったので、noFillとnoStrokeで強引にやってしまいました。 コードを整えてないので、かなり汚いです。 箱シリー…

Processingで特定の個数をランダムな位置に描く

Processingでほとんど使わなかった機能のことがすっかり頭から抜けていて、しばらく格闘してしまったのでメモ。円や四角などの図形を特定の個数ぶんだけ、ランダムな位置に描きます。 noLoop();の存在をすっかり忘れていた・・・マウスボタンを押すと再描画…