SQLの窓 イラストAC フリー素材

2012年12月17日

Analogize(torres-analogize.scm) の解説というか、日本語化『GIMP 用スクリプト』



デフォルト値の表示等、レイヤーを分解したままをデフォルトとする等少し変更していますが、機能そのものは変更していません。メニューバーと、右クリックのメニューのトップに Effects で実行できるようにも変更しています。



要するに、元絵に対してコントラストと彩度を設定して、レイヤーとして白いグラデーションと黒いグラデーションを使って陰影を付けています。標準的な画像にメリハリが出てとてもいい感じになる事が多いです。
※ レイヤーは『オーバレイ』モードで重ねられています。



以下は、スクリプトを適用したものです。



※ UTF-8N で保存して下さい。
;
; The GIMP -- an image manipulation program
; Copyright (C) 1995 Spencer Kimball and Peter Mattis
;
; Analogize script  for GIMP 2.4
; Copyright (C) 2005 Ismael Valladolid Torres <ivalladt@punkass.com>
;
; Tags: photo, old
;
; Author statement:
;; A script-fu for the GIMP that makes any picture look as if it had
;; been taken using an old analog camera. Exaggerates contrast and
;; saturation and creates a bright and a dark overlay randomly
;; placed. Think of it as kind of a Lomo Kompakt or Kodak instantmatic
;; faking effect. However it still can't make anything to emulate the
;; peculiar chromatism usually achieved using the real thing.
;;
;; Check http://analogize.berlios.de/ for more information.
;
;
; --------------------------------------------------------------------
; Distributed by Gimp FX Foundry project
; --------------------------------------------------------------------
;   - Changelog -
;
; --------------------------------------------------------------------
;
;    This program is free software: you can redistribute it and/or modify
;    it under the terms of the GNU General Public License as published by
;    the Free Software Foundation, either version 3 of the License, or
;    (at your option) any later version.
;
;    This program is distributed in the hope that it will be useful,
;    but WITHOUT ANY WARRANTY; without even the implied warranty of
;    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
;    GNU General Public License for more details.
;
;    You should have received a copy of the GNU General Public License
;    along with this program.  If not, see <http://www.gnu.org/licenses/>.
;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

(define (script-fu-analogize img
                 drawable
                 contrast
                 saturation
                 bright-opacity
                 shadow-opacity
                 duplicate-shadow
                 flatten
                 copy)
 (let* (
        (image 0)
        (layer 0)
        (image-width 0)
        (image-height 0)
        (half-image-width 0)
        (half-image-height 0)
        (center-x 0)
        (center-y 0)
        (bright-layer 0)
        (shadow-layer 0)
        (shadow-layer2 0)
        (width-factor 0)
        (height-factor 0)
       )

  (set! image (if (= copy TRUE)
          (car (gimp-image-duplicate img))
          img))

  (gimp-image-undo-group-start image)

  (set! layer (car (gimp-image-flatten image)))

  (set! image-width (car (gimp-image-width image)))
  (set! image-height (car (gimp-image-height image)))

  (set! half-image-width (/ image-width 2))
  (set! half-image-height (/ image-height 2))

  (set! width-factor (/ (- 85 (rand 170)) 100))
  (set! height-factor (/ (- 85 (rand 170)) 100))

  (set! center-x (+ half-image-width (* half-image-width width-factor)))
  (set! center-y (+ half-image-height (* half-image-height height-factor)))

  (gimp-brightness-contrast layer 0 contrast)
  (gimp-hue-saturation layer 0 0 0 saturation)

  (set! bright-layer (car (gimp-layer-new image
                      image-width
                      image-height
                      1 "Brillo" bright-opacity 5)))

  (gimp-image-add-layer image bright-layer 0)
  (gimp-edit-clear bright-layer)
  (gimp-context-set-foreground '(255 255 255))

  (gimp-edit-blend bright-layer 2 0 2 100 0 0 FALSE FALSE 0 0 TRUE
           center-x center-y
           (+ half-image-width center-x) 0)

  (set! shadow-layer (car (gimp-layer-new image
                      image-width
                      image-height
                      1 "Sombra" shadow-opacity 5)))

  (gimp-image-add-layer image shadow-layer 0)
  (gimp-edit-clear shadow-layer)
  (gimp-context-set-foreground '(0 0 0))

  (if (= (rand 2) 0)
      (begin
    (gimp-edit-blend shadow-layer 2 0 0 100 0 0 FALSE FALSE 0 0 TRUE
             0 0
             center-x center-y)

    (gimp-edit-blend shadow-layer 2 0 0 100 0 0 FALSE FALSE 0 0 TRUE
             image-width image-height
             center-x center-y))
      (begin
    (gimp-edit-blend shadow-layer 2 0 0 100 0 0 FALSE FALSE 0 0 TRUE
             image-width 0
             center-x center-y)

    (gimp-edit-blend shadow-layer 2 0 0 100 0 0 FALSE FALSE 0 0 TRUE
             0 image-height
             center-x center-y)))

  (cond ((= duplicate-shadow TRUE)
     (set! shadow-layer2 (car (gimp-layer-copy shadow-layer 0)))
     (gimp-image-add-layer image shadow-layer2 0)))

  (cond ((= flatten TRUE)
     (gimp-image-flatten image)))

  (cond ((= copy TRUE)
     (gimp-display-new image)))

  (gimp-image-undo-group-end image)
  (gimp-displays-flush)
  )
)

(script-fu-register "script-fu-analogize"
            "Analogize..."
            "A simple analog camera faking effect"
            "Ismael Valladolid Torres <ivalladt@punkass.com>"
            "Ismael Valladolid Torres"
            "2005"
            "RGB*"
            SF-IMAGE "The image" 0
            SF-DRAWABLE "The layer" 0
            SF-ADJUSTMENT "コントラスト(20)" '(20 0 60 1 5 0 0)
            SF-ADJUSTMENT "彩度(20)" '(20 0 60 1 5 0 0)
            SF-ADJUSTMENT "レイヤーの不透明度(80)" '(80 0 100 1 10 0 0)
            SF-ADJUSTMENT "影のレイヤーの不透明度(100)" '(100 0 100 1 10 0 0)
            SF-TOGGLE "影のレイヤーを2枚にして濃くする" TRUE
            SF-TOGGLE "処理後の画像を統合する" FALSE
            SF-TOGGLE "Work on copy" TRUE)

(script-fu-menu-register "script-fu-analogize"
             "<Image>/Effects")

analogize.berlios.de は現在存在しません。
現在オリジナルは、http://www.gimphelp.org/script28.shtml よりダウンロードできます



タグ:GIMP
posted by at 2012-12-17 20:40 | GIMP スクリプト | このブログの読者になる | 更新情報をチェックする

2012年12月15日

Three.js を使って DAZStudio でレンダリングした女性をちょっと湾曲した炎の前に立たす 〜 Three.js エフェクトの可能性



これは、マウスホイールで Three.js で動作している背景の炎の遠ざけたものですが、もう少し遠ざけると反転して近づいて来ます。

▼ 表示した直後はこんな感じです。
(ビデオカードが OpenGL 2.0 をサポートしていて、Google Chrome か Firefox なら動作するはずです。)


このコードはもともと、平面画像をパノラマで360度回転させながら、中央でオブジェクトに周りの景色を映りこませるものですが、ここでは単純な以下のような背景を使用しています。



実際の Three.js のデモではこのような背景を使用しており、特別なものを作成する必要がありますが、



イラストのエフェクトとして使う目的であれば、形が固定では無い流体や気体であれば適当に並べるだけで目的を達成する事ができます。

中央で景色が映りこんでいる球体は、背景によって趣が変わりますが、このように一色の上になんらかの物体を置くと、球体に映りこんだ結果をブラシにする事もできます( 背景が真っ黒のところまで持って行って切り取って使う )








これは、所有しているブラシを再度組み合わせてリアルタイムに変形させて作り直せるという事も意味します。

Three.js としての 背景画像は、スケールを -1 とする事で若干歪むようになっており( 仕様は不明 )、エフェクトにはもってこいです。もともと、は背景は球形であり、楕円形の特殊な背景も可能であり、手前の球にも同じ事が言えます。

コードは、最低限のコードで整えましたので、リンク先の WEB ページのソースを見ていただくといいと思います。

切り取った球形炎を他の画像に使ったもの




タグ:Three.js DAZ3D
posted by at 2012-12-15 21:57 | Three.js | このブログの読者になる | 更新情報をチェックする

2012年12月10日

GIMP で星空の作り方

最終的に必要な大きさで最後に『ノイズの浴びせ(乱数度:1,繰り返し:1)』を実行する必要があります。



1) 1200 x 1200 の白いキャンバスを2つ作成。
2) それぞれに、『差分ソリッドノイズ』の違う模様を作成
x:2.3 y:2.3 で行っていますが、もう少し細かくてもいいと思います

3) 二つの模様の白い部分を透明化して、二つのレイヤーとして統合します。
4) 2枚目の模様を 18323a に着色(カラーマッピングの色交換)します。
5) 一番下に 505050 のレイヤーを作成します。



6) 一旦3枚のレイヤーを可視レイヤーの統合で統合して、新しく黒のレイヤーを下に置きます。
7) 統合したもようのレイヤーに対して、『ノイズの浴びせ(乱数度:1,繰り返し:1)』を実行

以下、もようのレイヤーに対してノイズの浴びせ
8) 1000 x 1000 に縮小して 『ノイズの浴びせ(乱数度:1,繰り返し:1)』を実行
9) 800 x 800 に縮小して 『ノイズの浴びせ(乱数度:1,繰り返し:1)』を実行
10) 600 x 600 に縮小して 『ノイズの浴びせ(乱数度:1,繰り返し:1)』を実行

黒いレイヤーを非表示にするとこんな感じです(黒いレイヤーは深みを出すため)。



縮小せずにぼかす場合は、ガウスぼかしで、0.4 くらいにするといいと思います。
( 拡大すると星がわずかに十字にぼけるので、一応きらめき効果でもあります )


posted by at 2012-12-10 14:23 | GIMP | このブログの読者になる | 更新情報をチェックする

2012年12月09日

GIMP で誰でも炎を簡単に作ったり使ったりする方法



GIMP のスクリプトの 『ソリッドノイズ』で炎を作る方法はかなりポピュラーだと思うんですが、実際作ってみるとそれだけでは使いどころがなかなか難しいです。そこで、GIMP FX Foundry release for GIMP 2.6 を使って『灼熱の魔人』というイラストにしてみました。

手順は2か所に作ったのですが、一つは NAVER のまとめです。

ここで GIMP を使える人なら全く同じものができると思います。でも、説明で解りにくいところがある場合は、GALLERIA を覗いていただくと、ちょっとだけ表現が違うので補完できるかもしれません。、



タグ:GIMP
posted by at 2012-12-09 02:47 | GIMP | このブログの読者になる | 更新情報をチェックする

2012年12月07日

Google MAP API V3 : 「ストリートビューのすすめ」のための汎用貼り付けコード

同じページに複数貼り付けても、問題の出無いように二回目以降はAPI のロードを行いません。何も考えずに、緯度と経度と表示位置を指定してしまえば OK です

ちなみに、Google は知らない間に Google カーを降りてどんどんいろんなところへ進出しています。ついこないだまでここは見れなかったはずなのですが。

グリプスホルム城
Google で表示してデータを取得
※ リンクを表示してクリップボードにコピーしてメモ帳に貼り付けます


反転部分が緯度と経度です。( heading と pitch は最後の cbp の部分 )


▼ スマホ対応のコードです( 参照 : スマホ対応の Google MAP API V3 )
<script type="text/javascript">  
if ( window['loadGmap_v3'] !== true ) {
	window['loadGmap_v3'] = true;
	document.write("<"+"script type=\"text/javascript\" src=\"http://maps.googleapis.com/maps/api/js?sensor=false\"></"+"script>");
}
</script>
<script type="text/javascript">  
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
(function() {
	var str="";
	str+="<iframe \n";
	str+="	id=\"frame0001\" \n";
	str+="	frameborder=\"0\" \n";
	str+="	scrolling=\"no\" \n";
	str+="	width=\"600\" \n";
	str+="	height=\"450\" \n";
	str+="	marginwidth=\"0\" \n";
	str+="	marginheight=\"0\" \n";
	str+="></iframe> \n";
	str+=" ";
	document.write(str);

	str="";
	str+="<div id=\"frame_div\" style=\"width: 100%; height: 100%\"></div> \n";
	str+="<"+"script type=\"text/javascript\">  \n";
	str+="	document.write(\"<\"+\"script type=\\\"text/javascript\\\" src=\\\"http://maps.googleapis.com/maps/api/js?sensor=false\\\"></\"+\"script>\"); \n";
	str+="</"+"script>   \n";
	str+="<"+"script type=\"text/javascript\">  \n";
	str+="(function() { \n";
	str+="google.maps.event.addDomListener(window, 'load', function () { \n";
	str+="	var bryantPark = new google.maps.LatLng(59.256077,17.219078); \n";
	str+="	var panoramaOptions = { \n";
	str+="		position:bryantPark, \n";
	str+="		addressControl: true, \n";
	str+="		addressControlOptions: { \n";
	str+="			position: google.maps.ControlPosition.RIGHT_BOTTOM \n";
	str+="		}, \n";
	str+="		pov: { \n";
	str+="			heading: 113.74, \n";
	str+="			pitch: 19.48, \n";
	str+="			zoom:1 \n";
	str+="		}, \n";
	str+="		visible: true \n";
	str+="	}; \n";
	str+=" \n";
	str+="	var targetDiv = document.getElementById(\"frame_div\"); \n";
	str+="	var myPano = new google.maps.StreetViewPanorama(targetDiv, panoramaOptions); \n";
	str+="}); \n";
	str+="})(); \n";
	str+="</"+"script> \n";
	document.getElementById("frame0001").contentWindow.document.write(str);
	document.getElementById("frame0001").contentWindow.document.close();

})();
}
else {
(function() {
	str="";
	str+="<div id=\"cbll59_256077_17_219078\" style=\"width: 600px; height: 480px\"></div> ";
	document.write(str);
	google.maps.event.addDomListener(window, 'load', function () { 
		var bryantPark = new google.maps.LatLng(59.256077,17.219078);  
		var panoramaOptions = {  
			position:bryantPark,  
			addressControl: true,  
			addressControlOptions: {  
				position: google.maps.ControlPosition.RIGHT_BOTTOM  
			},  
			pov: {  
				heading: 113.74,  
				pitch: 19.48,  
				zoom:1  
			},  
			visible: true  
		};  
	  
		var targetDiv = document.getElementById("cbll59_256077_17_219078");  
		var myPano = new google.maps.StreetViewPanorama(targetDiv, panoramaOptions); 
	}); 
})(); 
}
</script>  



コードを取得

ブログ等で使えるストリートビューコードを取得します


posted by at 2012-12-07 20:41 | Google MAP | このブログの読者になる | 更新情報をチェックする

GIMP で爆炎画像作成



まず、ブラシ(16 Explosion Brushes (2500px).abr)をダウンロードして、GIMP のブラシフォルダへ置きます。

後は、画像の手順通りで勝手に出来上がります。モードの組み合わせや色の加減や重ねる枚数等で結果が変わります。ここでは、『覆い焼き』『オーバーレイ』を使用しています





『明度の反転』







『色を透明度に』


















上の赤二枚を『覆い焼き』『オーバーレイ』にします







黒を6枚コピーしているのは、背景透過で画像の統合する際に、炎の色合いには『黒』が必要だからです。



背景が黒なら必要ありませんが、透過ではどこに重ねるか解らないので、以下は確認用です。



つまり、ブラシさえあれば炎は簡単です。このブラシは通常と少し違って(Photoshop使うと色設定なしで使える為)反転の必要がありますが、一般的には最初から色設定します。






タグ:GIMP
posted by at 2012-12-07 01:25 | GIMP | このブログの読者になる | 更新情報をチェックする

2012年12月05日

Windows8(C#) の WebView の LoadComplete で取得した URL 内のアクセストークンを Split で取得

本当は、url_params をループして、key_value[0] が "access_token" の場合で取得するのが正しいですが、手っ取り早くテストするコードです。 
        private async void webView_LoadComplete(object sender, NavigationEventArgs e)
        {

            String token = e.Uri.ToString();

            if (token.IndexOf("access_token=") != -1)
            {

                // 0 番目が 位置情報としてのURL 部分
                String[] url_params = token.Split(new Char[] { '?', '&' });
                String[] key_value = url_params[1].Split(new Char[] { '=' });

                ((TextBox)App.mainPage.FindName("PostBody")).Text = key_value[1];
                
            }

        }

関連する記事

Windows8(C#) で Google にログインしてカレンダーの情報を扱う




posted by at 2012-12-05 13:54 | C# | このブログの読者になる | 更新情報をチェックする

2012年12月03日

炎の画像から GIMP の炎ブラシを作成する方法

まず、画像を表示します。



次に、周りの黒を透明色に変更します。







ファジー選択で外側を選択して消しゴムでごみがあったら消します。





.gbr でブラシフォルダに保存します( 変更したい場合は再び GIMP にロードします )



ブラシ選択から利用できます



※ 色無しのブラシにするには、単色塗りで 000000 を選択するといいです。


タグ:GIMP
posted by at 2012-12-03 20:35 | GIMP | このブログの読者になる | 更新情報をチェックする

ログイン画面からリダイレクトしてアクセストークンを取得するまでの簡単な PHP コード

実用にはなりませんが、とりあえずいろいろテストするのに、Facebook や Google だと時間がかかってしょうがないのです。まあ、こんなものでも PHP 的なコードは結構満載なので、学生の修行ツールにはなります。

エラーメッセージについて、イントラネットの場合はユーザができる限り最短時間で処理できる事を考えますが、一般の WEB の場合セキュリティの意味から、ユーザが存在する事を明示する事を避ける為に、『ユーザまたはパスワードが正しくありません』とするのが良いと思います。
<?
session_start();

//$_SESSION['login'] = '';
//$_SESSION['client_id'] = '';

$login_script = 'http://localhost/lightbox/work/api/login.php';

// 入力では無い
if ( $_SERVER['REQUEST_METHOD'] == 'GET' ) {
	// ログインされていない
	if ( $_SESSION['login'] != 'yes' ) {
		// アプリケーション ID が指定されていない
		if ( $_GET['client_id'] != 'abcdefg0123456789' ) {
			// エラーによるリダイレクトでは無い
			if ( $_GET['er'] != '000' ) {
				// エラーコード 000 でリダイレクト
				header("Location: {$login_script}?er=000");
				exit();
			}
		}
	}
	// ログインされている
	else {
		// ログイン時のアプリ ID と一致しない
		if ( $_GET['client_id'] != $_SESSION['client_id'] ) {
			// ログアウトする
			$_SESSION['login'] = '';
			$_SESSION['client_id'] = '';
			// エラーコード 000 でリダイレクト
			header("Location: {$login_script}?er=000");
			exit();
		}
	}
}

// 入力である
if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
	if ( $_SESSION['login'] != 'yes' ) {
		// ユーザが正しく無い
		// 一般 WEB では、この場合のメッセージは、『ユーザまたはパスワードが正しくありません』とする
		if ( $_POST['login_user'] != 'lightbox' ) {
			header("Location: {$login_script}?er=001&client_id={$_GET['client_id']}");
			exit();
		}
		// パスワードが一致しない
		// 一般 WEB では、この場合のメッセージは、『ユーザまたはパスワードが正しくありません』とする
		if ( hash_hmac('sha256', $_POST['login_pass'], "r101" ) != 'aba283b0fece03ad2e0394cdbd6d163a2c45bbdb3b3697979e8f3c0fde3e939d' ) {
			header("Location: {$login_script}?er=002&client_id={$_GET['client_id']}");
			exit();
		}
	
		// ログイン終了
		$_SESSION['login'] = 'yes';
		$_SESSION['client_id'] = $_GET['client_id'];
		// アプリケーション ID を引き渡して『許可画面』に遷移する
		header("Location: {$login_script}?client_id={$_GET['client_id']}");

	}
}

// ログインしている
if ( $_SESSION['login'] == 'yes' ) {
	// アプリ ID がある
	if ( $_SESSION['client_id'] != '' ) {
		// 許可ボタンを押した
		if ( $_POST['allow_button'] != '' ) {
			header("Location: {$login_script}?access_token=アクセストークン&client_id={$_GET['client_id']}");
		}
	}
}


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>API ログイン</title>
</head>
<body>
<?
if ( $_GET['er'] != '' ) {
	if ( $_GET['er'] == '000' ) {
		print '<span style="color:red;font-weight:bold;">処理できません</span>';
	}
	if ( $_GET['er'] == '001' ) {
		print '<span style="color:red;font-weight:bold;">ユーザが正しくありません</span>';
	}
	if ( $_GET['er'] == '002' ) {
		print '<span style="color:red;font-weight:bold;">パスワードが正しくありません</span>';
	}
}
if ( $_SESSION['login'] != 'yes' ) {
	require_once('pass_1.php');
}
else {
	if ( $_SESSION['client_id'] != '' ) {

		if ( $_GET['access_token'] != '' ) {
			print "アクセストークン処理完了";
		}
		else {
			// 許可ホタンを押す前
			require_once('pass_2.php');
		}

	}
}

?>
<pre>
<? //print_r($_SESSION)  ?>
</pre>

</body>
</html>

パスワードは、aba283b0fece03ad2e0394cdbd6d163a2c45bbdb3b3697979e8f3c0fde3e939d を変えて埋め込みます。実際のパスワードを埋め込む必要の無い書き方ですが、hash_hmac を使わないでインターネットに貼ってしまうと、辞書があると逆引きできてしまうので注意です(パスワードがバレます)。

以下、画面定義
<!-- ログインフォーム -->
<form method="post">
ユーザ <input name="login_user" type="text"/> <br />
パスワード  <input name="login_pass" type="password"/> <br />
<input name="login_button" type="submit" value="ログイン"/> <br />
</form>

<!-- 許可フォーム -->
<form method="post">
<input name="allow_button" type="submit" value="許可する"/> <br />
</form>

pass_1.php と pass_2.php です。


タグ:PHP
posted by at 2012-12-03 13:22 | PHP | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX