HDRiな生活

HDR(ハイダイナミックレンジ)写真の連載。ストックフォトでカメラ機材代の捻出を目論む。


HDRiな生活 - 「JavaScript」によるタグ検索結果 : 6件

ロードバイクのパーツ配色シミュレータ作ったー

ロードバイクのパーツって色のバリエーション豊富なんだけど、結構お値段するし、いざ装着した時に配色が悪いとスゴク残念な気持ちになる。あれいくない。 ということで、事前にある程度配色のアタリが付けられるシミュレータを作りました(要 IE9 以上)。いまのところ、フレーム、フォーク、ステム、シート、シートポスト、タイヤ、ホイール、ブラケットカバー、バーテープ、の色がカスタマイズ可能。 色々自転車 以下、サイト制作の備忘兼お役に立てば。 canvas で描画された画像を pngファイルとして保存する流れ canvas への描画について イラストレータなどでベクター作成 -> svg 出力 -> 以下サイトのコンバーターで Javascript化 SVG to HTML5 Canvas Converter パーツ毎に上記 Javascript化して関数化、色をピックアップするたびに全部再描画する。 var canvas = document.getElementById('canvas_id'); var ctx = canvas.getContext('2d'); function draw_bike(){ draw_tire(ctx,color); draw_wheel(ctx,color); draw_frame(ctx,color); . . . } var draw_tire = function(ctx,color) {...} var draw_wheel = function(ctx,color) {...} var draw_frame = function(ctx,color) {...} . . . canvas で描画された画像を pngデータ化 -> png画像ファイルとして保存 の流れ Javascript 側 var canvas = document.getElementById('canvas_id'); // toDataURL()メソッドで canvas に描画された画像を pngデータに変換 var dataURL = canvas.toDataURL('image/png'); php 側 // pngデータの文頭 data:image/png;base64,… の22桁は不要なのでトル // hash値などユニークなファイル名をつけて base64_decode()メソッドで png画像に変換、保存 $bike_picture_data = substr_replace($dataURL, '', 0, 22); $fp = fopen('path_to_png_images/'. $unique_file_name . '.png',w); fwrite($fp,base64_decode($bike_picture_data)); fclose($fp); 変数を含むページで Smarty のキャッシュを利用する方法 $variables= $_GET['xxxx']; $smarty -> display("index.tpl",$variables); GET から得た値をまんま使うと不具合があるので、あり得ない文字数が入力されたらエラーページに飛ばすなど何らかの前処理は必須。 手探りグリグリなのでもっと要領いい方法あったら是非教えてください・・・っ

ティッシュを何回折ると月に届くかJavaScript

たまに聞く、にわかには信じられないティッシュ(新聞紙?)を○回折ると月まで届いちゃう数字マジック。実際JavaScriptで計算して試してみた。 ティッシュの厚みを0.1mm、月までの距離を38万kmとして折る回数xを求める。 380000km = 0.1mm * 2^x MKS単位統一↓ 38 * 10^7 = 10^-4 * 2^x 2^x = 38 * 10^11 上記の二進対数一次方程式を解くJavascript組めと。答えを知りたい人は以下をコピペってブラウザ放り込んで確認あれ。 ティッシュは何回折れば月に届くのか document.write('ティッシュは'); document.write(Math.LOG2E * Math.log(38*(Math.pow(10,11)))); document.write('回折ると月に届くよ☆'); せっかちな人用ボタン。 function answer(){ answer = 'ティッシュは'; answer += Math.LOG2E * Math.log(38*(Math.pow(10,11))); answer += '回折ると月に届くよ☆'; alert(answer); } はー。これだけに1時間くらいかかた。高校の時は関数電卓バリバリ使ってたけどもー全然あかん。指の隙間からこぼれる砂ただ眺めるごとし。 個人的にはこういう雑学好きだけど、コンパで言うと見事に空気がおだやか〜になってしまう方刃の剣。

トーンマッピングの「トーン」とはなんぞや?

今まで流れに任せてトーンがトーンが言ってましたが、おそらくトーンの定義をした人物の書物を読んだので備忘エントリ。 トーンの定義 ある色が、最大限の刺激純度(彩度)を持つとき、白の混合で薄めたり黒の混合で深めたりするとき、それぞれが変化して異なった色調になることをさす意味だけに限定して、「トーン」の用語を定義したい。 今までにわか知識で漠然と口にしていたことも多く、不安な要素もたくさんあったのですが、とりあえずこれ一冊で、色に関しての知識は網羅できました。 ついでにJavascriptで赤(#ff0000)のトーンを表現してみた 赤の純色を#ff0000とすると、#000000→#ff0000→#ffffffを順番に塗りつぶせばトーンが表現できるなぁと。以下スクリプト。 function makeScale() { var color; for(var i=0;i255){ if(i"); document.write(""); } } Javascriptで赤(#ff0000)のトーンを表現 makeScale(); 以下、実行結果。 function makeScale() { var color; for(var i=0;i255){ if(i"); document.write(""); } } makeScale(); また、現在のweb技術上に限ってはこのトーンは純色の赤のスケールであると定義できる。 こんなどシロウトが寸分の狂い無く純色のスケールを描けるんだから、本当、感謝。シュブルール先生が見たら驚くだろうな。

ヘッダのJavaScript読み込みをincludeっぽくスッキリさせる方法☆

【追記】ロード順が保証されておらず、依存関係にあるjsを読み込むと不具合の可能性があります。指摘いただきました。 PrototypeやjQueryなどのjsライブラリを複数使用すると、ヘッダ内にjs読み込み文が並んでしまって、見栄えが悪くなる、保守性は低くなるわで、クローラフレンドリーも期待できなくなります。多分。 そういった時に、jsをスッキリ一文にまとめてしまう方法です。 【Before】 【After】 【pack.jsの中身】 (function() { document.open(); var l = arguments.length; for(i = 0; i '); document.close(); })( "/path/to/hoge1.js", "/path/to/hoge2.js", "/path/to/hoge3.js", "/path/to/hoge4.js", "/path/to/hoge5.js", "/path/to/hoge6.js", ); 外部JavaScriptを使用する場合は絶対パスで指定してください。ちなみにPrototypeやjQueryはgoogleが公開してますので、先生のリソースにあやかりましょう。 はい、まんま星海社の仕組みを頂きました。ガハァと衝撃を受けたサイトの作り、なんとも小憎らしいスマートな作り。コメントアウトからすると外注してるぽいけどどこなんでしょう。ご存知でしたら教えてください。iPhoneアプリや電子書籍だなんだと世が騒ぎ始めてますが、htmlサイトもまだまだ伸びしろがあるという可能性を感じます。 じゃぁHDRやらずに単写真で可能性探れよと言われそうでビクンビクンでごはざいますが。今年9月にオープンするという"最前線"、講談社に期待大。

tumblr用ハンズフリー自動スクロールブックマークレット"Dashr"作ったー

Dashboard閲覧の際に両手が張り付いてるのがおっくうだったので、ハンズフリー機能あればいいなぁと思い、作った。イメージ的にはマトリックス1作目、初期のネオがアホに起こされるシーン中の、自動でニュースなどがカタカタ流れていたアレ。未来ハズカム。 ハンズフリースクロールの設定手順 tumblrの設定変更 ブックマークレットをドラッグアンドドロップ Dashboardでブックマークレットをクリック! あばばばばばば 1.tumblrの設定変更 tumblrにログインしてから、Account -> Preference -> Enable endless scrollingをチェック! これでDashboardが無限スクロールできるようになります(既にアドオンでAutoPagerなどをインストールしてる人は必要ありません)。 2.ブックマークレットをドラッグアンドドロップ Dashr←をドラッグしてブックマークツールバーにドロップしてください。 3.Dashboardでブックマークレットをクリック! tumblrのDashboardにてブックマークレットをクリック!すると画面右上に再生・早送り・巻き戻しのパネルが現れるので、好きなようにクリックしてください。自動で画面が流れ始めます。10/6/11現在、Mac:Firefox、Mac:Safariしか動作確認していません。不具合あったらコメント頂ければ直すかもしれませんがIEは基本放置です。ブラウザを変えてください。 4.あばばばばばば ヒゲ剃りしながら、ご飯食べながら、別ウィンドウで作業しながら、プロジェクターがあればBGVがてらにますます泥沼にハマる予感。 ただ、流れているテキストはさすがに読めないので、Dashboardは写真のみを流す方が無難かもしれません。その場合は以下アドレスで写真だけ表示できます。 http://www.tumblr.com/show/photos/ また、PROTO.JPさんのtumblrAutoPagerと組み合わせて使うと、公開側のtumblrも無限自動スクロールします。Descriptionに をコピペすれば完成。ただ、背景を白に設定してるとパネルが上手く見えないので注意。個人の趣向が容赦なく露呈しますのでエログロを多数リブログしてる方は、場の友人を選びましょう。 余談、別にブックマークレット使わなくても、マウスホイールをクリックすれば同等の効果はあります・・・

任意の文字列をランダムに並べ替えるjavascript

javascriptを勉強中につき、ちょっと思い立って以下のスクリプトを書いた。 var list = new Array; var n = "甕雜蠕蠣飄覺觸議護譲譫譟譯贍躁躅醵醸醴釋鐚鏗鐘鐔鐓鐡鐙鐃鐇鐐闡霰鰛鰕鰔鰐鰉鰓 鰍鰌鰆鰈齎儺儷囈囂嚼囁囃囀竈屬巍麝魔廱蠡懼懾攜攝灘曩爛櫻權櫺歡殲飆譽齧瓔罍癪癨鰒鰊鶚 鶤鶫鶩鹹飃繻繽辮罌譱聹蠑嚢歸雛齋黨籏纂籍籌糯糲纃繼襄褻氈襃冀甑雕凝瀕瀰瀾懸曦臙騰臚朧 爐壅曁勳舘劔劒覦儕儒儔儘黛欄櫪櫨犧獻瓏矍礦礫襭襤壟嬾壞壜贋嚥嚮壥耀孃孅孀騫竇寶譬躄巌 巉響饗廰蘰蘖蘚蘯蘗懽懺攘灌整甎壅曁勳舘劔劒覦儕儒儔儘黛冀甑雕凝勵劑甌叡豫繁龜噺噫噤嚆 嘴嘯戰噬噪噸圜墺壊墾墻壌壇壁憙熹隷奮獣嬢嬖學寰窺窶憲彊嶬嶮廨麈磨廩薀薗薤薈薑薫薊薨薯 薔薪薛薦薮薙薄蟇薇薜薬蕷蕾蕗薐彜衛衞徽徼禦衡懌懊憶懐懈憾懆憺懍撼據擒擅操擇撻擔擁擂澳 澣激澡澤澹濁澱濃濛澪濂獪獲獨險隧隨隣還遶暹遲邁避憖憩憊憑旙曉暾曇暼暸膩膳縢膰膨臈燗熾 燒燈燉燃燔燎燐燕樫橲橄機橘橋檠樶橦樵橸樹橇樽橡橢橙橈樸歙歔殪殫盥興盧覩麺璞璢鴫疂瘴瘰 瘻罹縣瞠瞞磬磧磚頴褶褸穎穏穐積穆親龍鴣鴬篝簑篩築篤篦篥篭糘糖糒糢緯縊縞縡縒縉縦縟緻縋 縛縫羲翰耨臻艙艘螢蟆螟融螂瓢諳謂諧諫諤諱謔諠諺諢諮諡諜諦諷諞謀謎諭謡豎頭豬賢赭踵蹂蹄 踰踴躾輯輳輻輹輸辨辧醐醒醍醗餐錏鋺鋸鍄錦錮鋼錯錙錫錠錐錘錆錢錚錣錨錻錬録閼閾閻閹霙霍 霓霎霑霏霖靜館靦鞘頷頸頽頼餝餒餔餘駭駲駮駢駱骼骸髻髷髭鬨鮖鮗鮓鮎鮒鮃鮑鴪鴛鴨鴦鴟鴕鴒 麭黔默熟褒憂勲蝨熈舗舖億價僵儀儉儁儂僻儚冪凛凜劈駕劍劇劉皺匳鴈舞噎器噐噛嘱嘶噂嘲噴嘸 墹墟熬墫墮墸墜熱墳賣輝幤嫺嫻嬉嬌嬋駑窮寫審賓窯窰寮導熨履彈嶢嶝嶐鞏幟幢幡幣畿麾慶廣廝 廠廚廛廢廟廡摩蕚蕎蕀蕨蕣蔬蕉蕭蕈蕘蕁蕊蕋蔵蕩蕃蕪蔽甍蕕弊影衝徹翦慳憬憔憚憧憫憤憮憐撹 撮撒撕撰撤撞撓撚播撥撫撲撩撈潰澗澆潔潺潸澁潤潯潟潜潛潭潴澄潮澂潼潘澎澑潦獗鄲鄭鄰遺遨 遵選遷遯遼慰慧憇慙慫慾慮戯戮翩撃摯數敵敷暫暴膕膠膝膵膤膣膓滕膚潁漿横槨樌樂槻樛槿権槹 槲槧樞樟樅槭槽樔槫樗樢樊標樒樣樓歐歓齒殤毆毅獎靠輦麹瑾璋璃瑩瘟瘧瘠瘡瘢瘤皚魄緜監盤罵 罸罷瞎瞋瞑確磆磑磋磔碾磐碼磅磊禝褞褥褪褫稼稽稿稾稷穂稻穃黎鴉臧賞篏篋篌篁箱箴箪篆範篇 糊糅糂糎縅縁緩緘緊緝縄緤線緞締緲緡編緬羯羮養翫聨蝟蝦蝸蝌蝎蝴蝗蝉蝶蝪蝠蝮蝙蟒蝓蝣蝿謁 課諌誼諄諸諚諏誰請諍誕諾談調諂誹諛諒論豌貎賛賜質賤賭賠賦賚趣踝踞踪踐踟踏輜輙輟輩輛輪 醋醇醉醂黙錺錵鋲鋭鋏銹銷鋤鋳鋪鋒閲閭霄震霆霈霊餓鞐鞋鞍頤頡頬餃餉駈駒駟駛駝駘駐髯髫髮 髴髱鬧魃魅魴魯鴎鴃鴆鴇麩麪謝萌恵憩償情贈基盤裹覡膏豪齊爾塾熏魂僖僑僥僞僭僣僊像僮僕僚 兢皸冩鳳劃箚疑匱厭厮厰暦歴熊毓製夐雑嘔嘉嘘嗷嘖嘗噌嗾嗽嘛鳴嗹圖團境塹墅塲塵截増墨皷壽 臺夥奬奪奩嫗嫣"; for(i=0;i for(j=0;j とにかく画数の多い漢字を画数順でコピペってきたから適度にシャッフルしないと目的の感じが出なかったんですが、手動では気が遠くなるので、どうにかできないかなとちょっと考えますたら、そいえばスクリプトに任せればいんじゃねとシャッフルしてみた。こちらを参考にしました。 こんなん何に使うのと言いますと、このストックフォト用に。試しにやってみたら面白いじゃないの。目指せ小器用貧乏。 と、今日の写真はフランス大使館で開催されているNo Man's Land(リンク壊れてるから適当にググって)の展示品の一つ、リリアン・ブルジャさんの閲覧者参加型のコンテンポラリーアートでいいのかな。次回からちょっとシリーズ化します。

「JavaScript」 に関連するタグ

「JavaScript」 に関連するタグ