画像に集中線を入れてアニメーションGIFにしてくれるウェブサービスを作りました!!!集中線GIFメーカー!!! speedline.herokuapp.com 見慣れたおにぎりを持った男性の写真から，こんなGIFが作れます!!! 高級寿司が流れるだけでも，とにかく!!勢いがある!!!!! 歴史上の人物も!!!本人は動いてないのに勢いがある!!!! 今すぐ無料でお使いいただけます!!!!! speedline.herokuapp.com 追記 意外とみなさまに使っていただいていて，サーバーが重くなっているようです．失敗しても，しばらくしてやり直すとうまくいくかもしれません．どんどん使ってください．
こんにちは、おじいちゃんです 今回はSVGのpathを使ったモーションパスアニメーションの実装方法について書きたいと思います。 【こちらもおすすめ】 ☞ SVGとjQueryで絵を描いているようなアニメーションを実装する方法 SVGのpath要素 path要素を使うことで、好きな図形を描くことができます。 Illustratorを使っている方はよく使ってますよね。Illustratorで描いたパスからSVGを書き出して使うこともできるのですが、今回は直接SVGタグのpath要素に描いて作ってみましょう。 d=”M 50,50 L 200,50 Z” SVGでpathを描く場合は、上のように各コマンドにパラメータをいれることでpathを描画できます。少しクセがありますが、自分で好きなpathを描いてみると慣れてきますので、遊んでみてください。 pathを描画するためのコマンドは下記があります
こんにちは、おじいちゃんです。 今回は進捗率を計算して、スクロールアニメーションを実装する方法について書きたいと思います。 進捗率とは 進捗率とは、作業がどのくらい進んでいるかをパーセンテージ（0％から100％）で表したものになります。 スクロールアニメーションで進捗率を使うポイント スクロールアニメーションで進捗率を利用する場合は、スクロール開始地点（始点）からスクロール終了地点（終点）までの進捗率を、0から1で求めるように計算するとより使い勝手がよくなります。 どうして進捗率を0から1で取得するの？ なぜ使い勝手がよくなるかというと、理由は0から1という値にあります。 CSSのプロパティには、各々のプロパティで個別の最小値・最大値あるいは任意の値をいれることができます。 例えば、透明度を扱うopacityは最小値が0で最大値が1ですが、要素の回転を扱うrotationは最小値0で最大値
はじめまして、新人デザイナーのほっしゃんです。 LIGに来る前はフリーでイラストやグラフィックデザインや美術作品を作っていました。最近ハマっているものは詰め将棋。好きな棋士は谷川浩司です。よろしくおねがいします。 今日は初心に返ったつもりで、ロゴやフォントのデザインの際に覚えておきたい「ベジェ曲線」の基本をおさらいします。実際にロゴを作っていきながら覚えましょう。 ロゴ作りから学ぶライブトレースとベジェ曲線 1. 下絵を準備する まずは作りたいロゴやフォントを考えます。 ロゴ作りの際、作り慣れていない方が一から作ろうとすると大変なことになってしまうので、下絵となるものを準備しましょう。バレンタイン＆ホワイトデーシーズンということで、あの有名な文字を作ってみたいと思います。 それがこれ。 ロバート・インディアナ『LOVE』です。日本だと新宿のアイランドタワーにあります。NYほか各地に置かれて
『imagettftext』を使用しTrueTypeフォントの文字を画像に合成します。 文字列は『utf-8』でimagettftextに渡し、別の文字コードの場合は『mb_convert_encoding』で変換し渡します。 以下の画像が実行結果です。 画像に『SilverFox2nd〜狐の小屋〜』という文字を合成しました。 フォントは『VLGothicフォントファミリ』を使用しています。 以下のソースコードは、テキストボックスに入力した文字列を画像の左上に表示するものです。 文字の表示位置は、x、y座標で指定しますが、y座標はフォントのベースラインの位置を指定するので、 『x,y』の座標を『0,0』とすると文字列は左上で上に少しはみ出ます。 <? header( "Content-Type: text/html; Charset=euc-jp" ); header( "Expires:
ふとワクワクするようなアイディアが浮かんだ時、もし自分でwebサービスを作れたらなーって思う方も多いんじゃないでしょーか。 実際、twitterやfacebookを徘徊してても、結構頻繁に「webサービス作ってみたい☆」みたいな投稿をみかけますが、中には「何から手を付け始めれば良いか分からない！」的な迷える子羊達もちらほら。 そんなワケで、ささやかながら今まで当ブログでもいくつかの自作webサービスを公開してきて、企画からデザイン・コーディング・プログラミング・宣伝に至るまで、若輩ながら全て一人で担ってきた私の知見をご紹介したいと思います。 だいじょーぶ、やりゃーできる！ webサービスを作るための技術と知識 技術に関する最大のポイントは「全てを知る必要はあるが、全てに精通する必要は無い」、つまり「広く浅く」で良いというコト。 その中でどこかに自分の強みが持てると尚良しですが、手始めであれ
Deep Neural Networkを使って画像を好きな画風に変換できるプログラムをChainerで実装し、公開しました。 https://github.com/mattya/chainer-gogh こんにちは、PFNリサーチャーの松元です。ブログの1行目はbotに持って行かれやすいので、3行目で挨拶してみました。 今回実装したのは”A Neural Algorithm of Artistic Style”(元論文)というアルゴリズムです。生成される画像の美しさと、画像認識のタスクで予め訓練したニューラルネットをそのまま流用できるというお手軽さから、世界中で話題になっています。このアルゴリズムの仕組みなどを説明したいと思います。 概要 2枚の画像を入力します。片方を「コンテンツ画像」、もう片方を「スタイル画像」としましょう。 このプログラムは、コンテンツ画像に書かれた物体の配置をそのま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
