初めてのOpenProcessing – プログラミング de 落描き

[ View / Source ]

[ About ]
Processing Advent Calendar 2017 – Day7の記事として投稿させて頂きます。
普段はopenFrameworks(C++)を使ってプログラミングで落書きをしていますが、Processingな方ともお知り合いになるべく、今まで気になっていても触る機会の無かったOpenProcessing.orgを使用してみました。

毎日、1日1つの動画＆ソースコードをノルマ(縛りプレイ)としてSNSやBlogにあげているのですが、ここ最近で評判が良かったやつをOpenProcessingで書き直してみました。

var frame_number = 0;

function setup() {
	createCanvas(500, 500);
	
	stroke(255);
	strokeWeight(3);
}

function draw() {
	translate(width / 2, height / 2);
	background(0);
	
	for(var radius = 10; radius < 250; radius += 15){
		rotate(radians(frame_number));
		for(var deg = 30; deg < 300; deg += 1){
			var x_1 = radius * cos(radians(deg));
			var y_1 = radius * sin(radians(deg));
			var x_2 = radius * cos(radians(deg + 1));
			var y_2 = radius * sin(radians(deg + 1));
			line(x_1, y_1, x_2, y_2);
		}
	}
	frame_number += 1;
}

var frame_number = 0;

function setup() {

createCanvas(500, 500);

stroke(255);

strokeWeight(3);

}

function draw() {

translate(width / 2, height / 2);

background(0);

for(var radius = 10; radius < 250; radius += 15){

rotate(radians(frame_number));

for(var deg = 30; deg < 300; deg += 1){

var x_1 = radius * cos(radians(deg));

var y_1 = radius * sin(radians(deg));

var x_2 = radius * cos(radians(deg + 1));

var y_2 = radius * sin(radians(deg + 1));

line(x_1, y_1, x_2, y_2);

}

frame_number += 1;

}

Rotate C @ OpenProcessing.org

処理の流れとしては、比較的単純で、sin関数・cos関数を使用して30°-300°までの円弧を、半径の長さ変えながら描写していきます。そこに、一つの円を描くごとにRotate関数を使って、描写エリアをフレーム番号を角度とした回転を加えるという処理を加えています。

バラバラに見えたり、妙な規則性が見えてきたりと眺めてて楽しいです。

初めてOpenProcessingを書いてみましたが、Webブラウザだけで完結しているので良いですね。そのままWebサイトに組み込めるのも便利でした。動画ではなくスクリプトが動いているので、ユーザー操作を取り入れれる所も面白そうです。

LeapMotion用のライブラリもあるようで試してみたいですね。また、触って見たいと思います。
ありがとうございました。

[ Link ]
Processing Advent Calendar 2017

[ほしいものリスト]
Amazon

[ Sponsor Link ]

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30