i2i無料WEBパーツ
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
今年も無料のセミナーが熱い。
クリエイティブコーディングは定員20名とぼやぼやしてると
参加できなそうで怖い・・・(汗
オープンソースカンファレンスは、変わり映えしないなーなんて思うようになってきたのは、年を取ったせいかしら・・・。

◆オープンソースカンファレンス2015Hokkaido
6/12(金)
6/13(土)

クリエイティブキャンプ2015
第1回:【6/13(土)】「アニメーション制作テクニック」
第2回:【6/27(土)】「iPhoneアプリ開発Swift入門講座(前半)」
第3回:【6/28(日)】「iPhoneアプリ開発Swift入門講座(後半)」
第4回:【7/11(土)】「ソーシャルネットワークの連携技術を正しく理解する」
第5回:【7/25(土)】「ノンプログラマでもWordPressでサイト制作!」
第6回:【8/1(土)】「ライブデモで学ぶ!HTML・CSSのコーディング速度を上げる手法」
第7回:【8/22(土)】「YouTubeで収益を得る!新時代の動画サイト活用法」
第8回:【9/5(土)】「Unityでゲームを作ろう -プログラミング入門編-」
第9回:【9/6(日)】「Unityでゲームを作ろう -ゲームビルド編-」
第10回:【9/26(土)】「急変する環境の今を学び、ぶれずに積み重なる自分軸をつくる」

クリエイティブコーディング2015
第1回「講座案内/Processingでコーディング入門」 8月8日(土) 13:00-14:30
第2回「Processing実践編」 8月8日(土) 15:00-18:30
第3回「JavaScriptでサウンドプログラミング入門編」 8月9日(日) 13:00-14:30
第4回「JavaScriptでサウンドプログラミング実践編」 8月9日(日) 15:00-18:30
第5回「openFrameworksでアルゴリズミック表現入門編」 8月22日(土) 10:30-12:00
第6回「MAXでVJパフォーマンス入門編」 8月22日(土) 13:00-14:30
第7回「MAXでVJパフォーマンス実践編」 8月22日(土) 15:00-18:30
第8回「openFrameworksでアルゴリズミック表現実践編」 8月23日(日) 14:00-17:30
第9回「成果発表会」(クロージングパーティ) 8月23日(日) 19:00-21:00

スポンサーサイト
Google Mapの画像を読み込み、都市の緯度経度を画像の位置とマッピングさせる手法を試してみました。
ものすごく簡単にできるんですね。。。驚きますわ。

GoogleMapperってのを使ったんですが、経度緯度を画面にマッピングしてくれるんですね。
便利。郵便番号から経度、緯度を取得するAPIを使ってみたかったんですが、
xmlのパースがうまくいかずにとりあえず保留にしました。

参考にしたサイトはこちら↓。
Processingでお手軽にGoogleマップから画像を取得する - Imaginable Reality

googlemapper


import googlemapper.*;
//import processing.xml.*;

XML xml;
GoogleMapper gMapper;
PImage mapImage;

void setup() {
size(640, 640);

double mapCenterLat = 35.709961; // 緯度
double mapCenterLon = 139.810858; // 経度
int zoomLevel = 5; // ズームレベル
String mapType = GoogleMapper.MAPTYPE_HYBRID; // 表示の種類
int mapWidth = width; // 横サイズ
int mapHeight = height; // 縦サイズ

// インスタンスの作成
gMapper = new GoogleMapper(mapCenterLat, mapCenterLon, zoomLevel, mapType, mapWidth, mapHeight);

//マップ画像の取得
mapImage = gMapper.getMap();

//xml = loadXML("http://geoapi.heartrails.com/api/xml?method=searchByPostal&postal=0030808");
//XML[] children = xml.getChildren();
//println(xml.listAttributes());
//for(int i=0; i // println(i);
// println(children[i].listAttributes());
//}

}

void draw() {
image(mapImage, 0, 0); // 画像の描画
//center(=Tokyo) add point
float tokyoX = 320;
float tokyoY = 320;

noFill();
ellipse(tokyoX,tokyoY,10,10);

//Sapppro add point
//String[] str = loadStrings("http://geoapi.heartrails.com/api/xml?method=searchByPostal&postal=0030808");
double sapporoLat = 43.062859;
double sapporoLon = 141.379781;
float sapporoX = (float)gMapper.lon2x(sapporoLon);
float sapporoY = (float)gMapper.lat2y(sapporoLat);
ellipse(sapporoX ,sapporoY ,10,10);

//line
smooth();
stroke(0);
line(tokyoX, tokyoY, sapporoX, sapporoY);

}


こんな感じになります。
WS000450.jpg

ニュースとかでよくある、GoogleMapをズームしていく演出とか、Processingでできそうですね。
おもしろいな。これ。
データビジュアライゼーション・ツール20選のメモ
Processingもちょっとだけ紹介されています。
いろんなツールがあるんですねぇ。。。

データビジュアライゼーション・ツール20選 | lab.sugimototatsuo.com


最近、プログラムでCGを作成するとかいう事に興味がありまして、Processingを試してみました。
プログラムで線を引くなんて、中学生の時にMSXでやった以来かな・・・(汗
line文とかで。懐かしすぎますね><

↓こんか感じのCGがプログラムで作成できるとは容易に想像できませんが、まあ、物は試しですからね。
Processing | Neu Black

↓こちらのサイトを参考に挑戦してみました。
Processing 学習ノート
a-06 図形を描く, 色を使う(その2) - Processing 学習ノート

太陽の絵を描いてみようという課題があったので、以下を作ってみました。
三角関数の知識は必須ですね。。久しぶりに頭を使った気がします。


size(1200, 1200);
colorMode(HSB, 100);
background(99);

int intInitX = 600;
int intInitY = 600;
float d = 250.0;
float colorIndex = 0;

//write circle
for(int i = 0; i < d; i++){
noFill();
float fRand = random(20);
float digit = random(4);
float w = random(3);
colorIndex = i*20/500;
println(colorIndex + ":" +i);
stroke(colorIndex,100,100);
strokeWeight(0 + w);
if(digit > 1 && digit < 2){
ellipse(intInitX + fRand, intInitY + fRand, i+ fRand, i+ fRand);
}else if(digit > 2 && digit < 3){
ellipse(intInitX - fRand, intInitY - fRand, i+ fRand, i+ fRand);
}else if(digit > 3 && digit < 4){
ellipse(intInitX - fRand, intInitY + fRand, i+ fRand, i+ fRand);
}else{
ellipse(intInitX + fRand, intInitY - fRand, i+ fRand, i+ fRand);
}
}

//
stroke(colorIndex,100,100);
strokeWeight(1);
float baseLength = 25.0;
float trHeight = 60.0;
for(int z=0; z<36 ; z++){
float angle = 10.0 * z;
float r=d/2;
//println ((intInitX+r*cos(r-0.1432)) + "," + (intInitY+r*sin(r-0.1432)));
//println ("---:"+angle);
//println ("1:"+(intInitX+r*cos(angle-atan(baseLength/r))) + "," + (intInitY+r*sin(angle-atan(baseLength/r))));
//println ("2:"+(intInitX+(r+40)*cos(angle)) + "," + (intInitY+(r+40)*sin(angle)));
//println ("3:"+(intInitX+r*cos(angle+atan(baseLength/r))) + "," + (intInitY+r*sin(angle+atan(baseLength/r))));
fill(0,99,99);
text(z,(intInitX+(r+trHeight)*cos(angle)),( intInitY+(r+trHeight)*sin(angle)));
fill(colorIndex, 100, 100, 20+random(30));
triangle(
intInitX+r*cos(angle-atan(baseLength/r)), intInitY+r*sin(angle-atan(baseLength/r)),
intInitX+(r+trHeight)*cos(angle), intInitY+(r+trHeight)*sin(angle),
intInitX+r*cos(angle+atan(baseLength/r)), intInitY+r*sin(angle+atan(baseLength/r))
);
}

save("test.jpeg");


で、出力された画像がこちら。なんか三角形の位置が思ってたのと違うなぁ・・・(汗
10度づつ出力させるつもりだったんだけどw

WS000449.jpg

■感想
なかなか、おもしろいですね。これ。Sound Visualizerみたいの作ってみたいですな。
できれば、家であそぶなら、PureDataとかvvvvみたいにノードをグニグニしてたらできちゃった
みたいなノリでやりたいんですが、地道にコーディングしなきゃいけないのがだるいですね。


■Processingに関連するリンクのメモ
Processing 1.0 _ALPHA_ » Reference
Processing入門8
JAXAでWebAPI公開してるらしい。メモっとこ。


JAXA OPEN API COMPETITION

JAXAは、宇宙のデータをより多くの人々に使っていただくために、「地球観測データを簡単に扱えるAPI」を公開します!

だそうです。なんか使えそうだけど、どうだろう。


APIとは、アプリケーション・プログラミング・インターフェース(Application Programming Interface)の略で、ソフトウェアやアプリケーションが持つ機能の一部を外部のアプリケーション(ソフトウェアやウェブサービス)から簡単に利用できるようにしたインターフェースのことです。APIによって提供されている機能は自分で開発する必要がないので、プログラムの開発を省力化することが出来ます。

JAXA(宇宙航空研究開発機構)では、JAXAが所有する膨大な地球観測データを、これまでそのようなデータに触れたことのない他分野の方々が利用できる仕組みを提供し、多種多様なアプリケーション開発に利用して頂くことを目的として、このたび 「JAXA OPEN API」を整備しました。


だそうです。
>>次のページ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。