SVG画像を書き出す際に重要な設定「小数点以下の桁数」とはなにか？ - 聴く耳を持たない(片方しか)
これはSVG Advent Calendar 2014の参加記事です。 昨日はmemocarilogのSaori Miyazakiさんによる「filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法」でした。 第3日目は私 id:rikuo が担当します。 （※追記）第4日目はイロドルハナ(@shino212)さんの「はじめてSVGでアニメーションを作った時の話」です。 ちなみにまだ空いている枠はあるので、興味のある方は是非ご参加ください。 はじめにSVGはXMLをベースにしているためテキストエディタでも簡単に作れるとは言え、実際の制作は何らかのオーサリングツールを利用することがほとんどでしょう。 中でもAdobe Illustratorはベクター系ソフトウェアの代表的な存在で広く普及しています。このIllustratorか
SVG 形式で書き出す方法 （Illustrator CC）
SVG オプションダイアログボックスで設定を行い、「OK」をクリックします。 ※ 「詳細オプション」ボタンをクリックすると、さらに設定項目が表示されます。 SVG プロファイル ： 文書型定義（SVG XML DTD）を指定します。 文字 ： テキストの保存形式を指定します。 サブセット ： ファイルに埋め込む文字を指定します。 参考方法 ： ラスタライズされた画像を埋め込むか、リンク配置にするかを指定します。画像を埋め込むとファイルサイズがその分大きくなりますが、画像は閲覧環境に依存せずに必ず表示されるようになります。 Illustrator の編集機能を保持 ： AI ファイルを SVG ファイルに埋め込むことによって、Illustrator 固有のデータを保持します。そのため、このオプションを有効にするとファイルサイズは大きくなりますが、後から Illustrator で修正を加える
openframeworksで自作svgからのpdfからのハードコード
自作のsvgファイルをopenframeworksで表示する方法でいろいろと苦戦したのでメモしておく。 イラレでsvgファイル保存する際に、[SVG プロファイル]を[SVG Tiny 1.2]にして、[詳細オプション]で[レスポンシブ]のチェックを外す。 width、heightのメタデータが無いとダメらしい。また、曲線データもダメなので、頂点を線で結ぶ図形にしておく。 ofxPDFというのもあって、こちらの方がパフォーマンスがでるという話もある。 ただし、iOSでは、svgもpdfも実行時エラーがでてしまう・・。結局はsvgファイルから座標データをコピーして、プログラム上でofPointとして実装した。
2013年7月 – Y.A.M.A.P
openFramworksのofPath、最近初めて使っているのだが、想像以上にいたれりつくせりでよかった。パスと言っても直線だけでなくベジェ等色々サポートしていてofでやりにくいと感じていたベクターグラフィックが思ったより簡単に扱える。ofxSvgでSVGパースもできるし。 ofPathにはofPath::getTessellation();で一撃でmesh面を形成する機能がある。しかしこの３角系分割は、平面走査法（？）みたいな分割が行われるため、ベジェを多用した図形をテッセレートすると、短いレンジで縦方向に大きな分割が入りまくる。これだとテクスチャを貼ったりする場合の歪の原因になるし、あまりに多くの縦ラインの密集は面の色すらうっすらと変えてしまうほど。ポリゴンの変形がやりにくい状態。 三角形分割のライブラリはいろいろあったので５，６個試したところこれが一番良かった。 https://c
ofSite/_tutorials/03_graphics/generativemesh.markdown at master · mikewesthad/ofSite
##Basics of Generating Meshes from an Image This tutorial is hopefully aimed at anyone who feels comfortable with the basic tutorials (setting up openFrameworks, using variables, creating loops, etc.) and is itching to start playing with 3D shapes. It may be pedantic at times, but it will take you through the logic and code for taking this image (from the Hubble star gallery): and making something
ofMeshメモ - okasuke's diary
ofMesh メッシュには多くの情報が含まれている 3D空間での頂点の集合 おのおのの点での法線は点の色 素材感、点の座標値 これらの異なる特性を それぞれのベクターに格納されている void ofMesh::setMode(ofPrimitiveMode mode)について ofPrimitiveModeを引数で設定することができる 利用可能なモードは次の通り OF_PRIMITIVE_TRIANGLES OF_PRIMITIVE_TRIANGLE_STRIP OF_PRIMITIVE_TRIANGLE_FAN OF_PRIMITIVE_LINES OF_PRIMITIVE_LINE_STRIP OF_PRIMITIVE_LINE_LOOP OP_PRIMITIVE_POINTS がOpenGLでいうと GL_TRIANGLES GL_TRIANGLE_STRIP GL_TRIANGLE
(Mac・iPhone)プリミティブについて - 強火で進め
今回はプリミティブについて解説です。OpenGLでプリミティブと言えば点やライン、三角形、四角形、多角形などのことを表します。 OpenGLで使用できるプリミティブには以下のものがあります。 GL_POINTS GL_LINES GL_LINE_STRIP GL_LINE_LOOP GL_TRIANGLES GL_TRIANGLE_STRIP GL_TRIANGLE_FAN GL_QUADS GL_QUAD_STRIP GL_POLYGON それでは順番に解説します。緑色で記述してある数字は頂点の指定の順番です。 GL_POINTS 点を描画。 最初の1つ→頂点1つを指定(頂点データの0番を使用して描画) 2つ目以降→頂点1つを追加で指定(2つ目は頂点データの1番を使用して描画) GL_LINES 2つの頂点を指定して、ラインを描画。2つ目以降のラインもそれぞれ2つの頂点を指定する。 最初
【openFrameworks】oF for iOSでretina対応する（ためにoF初期化コードを読んでみた）話【ofxiOSAppWindow】 - すこしふしぎ．
こんばんは．1000chです． oFを利用するメリットの一つに，モバイル端末向けのアプリを簡単に開発できる，という点があります． oF for iOSだとか，oF for Androidとかですね． ユーザ操作イベントに関するロジックとかは別個になってしまいますが，メインロジックに関しては共通コードで開発することができます． Mac上で作ったアプリがiPhone上で動くと，ちょっとした感動がありますね． で僕もよくoF for iOSでiPadアプリ作ってたりするんですが，デフォルトでは画面解像度が1024*768で固定だったりします． これだと，せっかくiPad Airとか使っても画像がガクガクなんですよね． 今回これをretina仕様に変更する方法を知ったのでメモっておきます． 【記事書き終わって追記】 コード読みながらgdgd書いてたらとんでもない長さに... シンプルに結論だけ気に
【openFrameworks】ofxTweenで連続アニメーションさせる【ofxTween】 - すこしふしぎ．
こんばんは．1000chです． この前ふと思いついたんですが，コード中case1,case2を簡単に切り替えたいときに /* #case1 /*/ #case2 //*/ としておくとcase2， //* #case1 /*/ #case2 //*/ としておくとcase1が適用でき，冒頭の/有る無しでtoggleできます． よく切り替えが発生する部分なら#indef使えって話なんですけど．後々消すつもりでちょっとテストしたいなー，って時には便利...じゃないかなぁ？ さて，それとは関係なく今回もoFネタいきますよ． ofxTweenでchainable animation 前回，ofxTweenの簡単な使い方を見ていきました． 基本は setParametersして updateする って言う感じでしたね． ただ，コレだとTween.jsでいうような target.alpha = 1;
【openFrameworks】ofxTweenでアニメーションさせる【ofxTween】 - すこしふしぎ．
こんばんは．1000chです． 関数型のパラダイムを知りたいなーと思いClojureの勉強を始めました． まだ基本文法を知っただけですが，昔嫌いだったカッコの嵐も今はそこまで抵抗無く読めて成長を感じています． まだ今は，ね． さて今日もoFネタでいきますよ． oFでアニメーション 「oFでアニメーション？updateで値を動かすだけじゃん？」 はい，その通りです．シンプルなアニメーションであればそれでokです． しかし「徐々にゆっくり」とか「最初はゆっくり，最後は急激に」とかの変化を作ろうとすると，以外と式の設計が面倒だったりします． いわゆるイージングというやつですね（イージングについては以下参照）． イージングの仕組み - イージングとはなにか | CodeGrid Easing Function 早見表 また「ある値まで行ったらストップ」とか「複数の値変化の開始，終了同期を取る」とか
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
4.2 三角関数 | Yasushi Noguchi Class
さて、プログラムによって図形を描く場合に避けて通れないのが三角関数（サイン、コサイン）です。円などに代表される曲線を描く際によく使われます。タンジェントは使用頻度が低いので、ここでは省略します。 多少公式的なものが出てくるがゆえに苦手意識が生じる人もいるかもしれませんが、冷静にゆっくり実習してみましょう。公式は覚えなくても使う時に参考書を確認すればいいので、安心してください。 それでは、サイン（sin）、コサイン（cos）を使って曲線を描いてみましょう。 4.2.1 円運動（極座標） まずは円を描いてみます。もちろんellipse(x, y, width, height)でも円が描けますが、このサイン、コサインは円だけでなく様々な曲線運動に使えます。 【図4.2-a】を見てください。円を描く際には、図のθ（シータ）の角度からx, yの座標を求める必要があります。
ofMeshの基礎 - Qiita
始めに 今回はopenFrameworksでよく使われるofMesh及びofVboMeshに関しての記事です. 内容的には、まだopenFrameworksを始めたばかりでofMeshをこれから使ってみたいと思っている人向けだと思います. ofSpherePrimitiveやofBoxPrimitiveなんかも内部ではofMeshを使って描画しています. サンプルコード→meshSample 今回のサンプルでは前回の記事のSceneElementとSceneManagerも用いています. ofMeshと頂点の繋ぎ方 ofMeshとはポリゴンを構成する頂点の座標とその色やテクスチャ座標の集合であり, またその頂点の描画順を持つことが出来ます. 描画順に関しては特に必ず必要という訳ではありませんが知っておいて損はないでしょう. 今回は簡単な四角形を書いてみます こんな感じのイメージで頂点を４つ
アンチエイリアシングを"無効"にする方法 - ofxTips-JP
openFrameworks v0.8.0以降、デフォルトでアンチエイリアシングが有効になりました。 描画が綺麗になるので嬉しい機能ですが、細かいドットを扱うような処理の場合に困ります。 1ピクセルの点を打つような処理の場合、ドットがボケて見えてしまうのです。 そこで、ofDisableAntiAliasing();を呼び出すことでアンチエイリアシングを無効にすることができます。 //-------------------------------------------------------------- void testApp::setup(){ ofSetCircleResolution(40); ofBackground(0, 0, 0); /*アンチエイリアシングを無効に*/ ofDisableAntiAliasing(); } //----------------------
透視変換を行う - 大山昇太の今日このごろ
透視変換とは 変換前後の４点を指定し 画像を変換することです。画像の回転が３点を指定して変換するのに対し４点になるわけです。 OpenCvでは次の手順で行います。 １）変換前後の座標をもとにgetPerspectiveTransformで変換行列を求める。 public static Mat getPerspectiveTransform(Mat src, Mat dst) src : 変換前の４点を示す マトリックス CvType.CV_32F dst : 変換後の４点を示す マトリックス CvType.CV_32F src_mat およびdst_matのCv_TypeはCV_32F以外はエラーになります。 2)変換行列用いて warpPerspective で画像を変換する。 static void warpPerspective(Mat src, Mat dst, Mat M
ofFbo上でのアルファブレンディング - ofxTips-JP
ofFboのバッファ内でアルファブレンディングを行う際、ウィンドウに直接描画するのと同じ方法ではうまくいかない場合があります。 まずはこちらのソースコードと、キャプチャをご覧ください。 ofEnableBlendMode(OF_BLENDMODE_ALPHA); ofBackground(0, 0, 0); ofSetColor(255, 255, 255,100); for (int i = 0;i < 10;i++){ ofRect(i*30, i*30, 50, 50); } 上記ソースを、ウィンドウとFboにそれぞれ描画しています。 左がウィンドウに直接描画したもの、右がFboに描画した後、ウインドウに再度描画したものです。 既に結果が違ってしまっています。アルファ値が、Fboの方が小さいように見えますが、そういうことではありません。次にウィンドウ側の背景色を変更してみます。 Fb
ofFBOのアンチエイリアス方法2つ - Qiita
問題 FBO内にofEnableSmooting()を記述しても以下の様にアンチエイリアスが効かない 解決策 1.fbo.allocate()の第4引数を指定 第4引数は、サンプル数らしい。大きくすればするほど綺麗になる。 結果 2.加算合成を駆使 描画したいコードの直前で、ofEnableBlendMode(OF_BRENDMODE_ADD)。描画が終わったらEnableAlphaBlendong()とofEnableSmoothing()。 ※oFでは、加算合成とスムージングは同時に効かない。その為、加算合成の前にofDisableSmoothing()を記述。 void ofApp::draw(){ fbo.begin(); ofDisableSmoothing(); ofEnableBlendMode(OF_BLENDMODE_ADD); /*描画したいコード*/ ofEnable
線や円を利用して、様々な模様のノイズグリッドを作る - not good but great
ノイズグリッドを作る void setup(){ size(500,500); smooth(); background(255); float xStart = random(10); float xNoise = xStart; float yNoise = random(10); for(int y = 0;y <= height;y++){ yNoise += 0.1; xNoise = xStart; for(int x = 0;x <= width;x++){ xNoise += 0.1; int alpha = int(noise(xNoise,yNoise) * 255); stroke(0,alpha); line(x,y,x+1,y+1); } } } 短い直線を引いて、その透明度を変えて模様を作っています。 四角で描画 float xStart,xNoise,yNoi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像を回転する その２(三角形の座標を指定する方法) - 大山昇太の今日このごろ
GitHub - neilmendoza/ofxStateMachine: openFrameworks state machine design pattern implementation.
