root/docs/cho45/20080331-shibuyajpg-hdr/index.html

Revision 11646, 15.0 kB (checked in by cho45, 8 months ago)

propset

  • Property svn:mime-type set to text/html
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8" />
6<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8" />
7<meta name="author" content="cho45" />
8<link rev="made" href="mailto:cho45@lowreal.net" />
9<title>HDR</title>
10<script type="text/javascript" src="s6.js"></script>
11<script type="text/javascript">
12// <![CDATA[
13// from http://amachang.art-code.org/ejohn/
14
15var bodyStyle = {
16        width           : '100%',
17        height          : '100%',
18        padding         : '0',
19        margin          : '0',
20        overflow        : 'hidden',
21        backgroundColor : '#000'
22};
23
24s6.css('html', bodyStyle);
25s6.css('body', bodyStyle);
26
27var pr;
28s6.attach(s6, 'ready', function ready() {
29        var html   = document.documentElement;
30        var height = html.offsetHeight;
31        var width  = html.offsetWidth;
32        var top    = 0;
33        var left   = 0;
34        var ratio  = 9/16;
35
36        if (height / width < ratio) {
37                var originalWidth = width;
38                width = height / ratio;
39                left = (originalWidth - width) / 2 + 'px';
40        }
41        else {
42                var originalHeight = height;
43                height = width * ratio;
44                top = (originalHeight - height) / 2 + 'px';
45        }
46
47        var result;
48        if (result = document.cookie.match(/page=(\d+)/)) {
49                var startIndex = +result[1];
50        }
51
52        pr = new s6.Presentation({
53                element    : document.body,
54                width      : width,
55                height     : height,
56                ratio      : ratio,
57                startIndex : startIndex
58        });
59        pr.style.left = left;
60        pr.style.top = top;
61        pr.start();
62
63        var indexNoOutline = false;
64
65        pr.funcPages.index.attachPage('click', function(i, element, wrapper) {
66                indexNoOutline = true;
67                setTimeout(function() {
68                        indexNoOutline =false
69                }, 1000);
70                wrapper.style.background = '';
71                pr.go(i);
72        });
73
74        pr.funcPages.index.attachPage('mouseover', function(i, element, wrapper) {
75                if (indexNoOutline) return;
76                wrapper.className += ' selected';
77        });
78       
79        pr.funcPages.index.attachPage('mouseout', function(i, element, wrapper) {
80                wrapper.className = 'wrapper';
81        });
82
83        try {
84                var isIframe = !(window.parent == window);
85        } catch(e) {
86                isIframe = true;
87        }
88
89        s6.attach(document,   'keypress Right', 'step', 0, pr);
90        s6.attach(document,   'keypress Left',  'prev', 0, pr);
91        s6.attach(document,   'keypress Up',    function() { pr.go('index') });
92        s6.attach(document,   'keypress Down',  'back', 0, pr);
93
94        s6.attach(document,   'keypress j',  'step', 0, pr);
95        s6.attach(document,   'keypress k',  'prev', 0, pr);
96        s6.attach(document,   'keypress h',  function() { pr.go('index') });
97        s6.attach(document,   'keypress l',  'back', 0, pr);
98
99
100        s6.css('.s6.dark .page', {
101                background: '#333 url(img/background.png) repeat-x'
102        })
103});
104
105// Test
106setInterval(function() {
107        document.cookie = 'page=' + pr.index;
108}, 1000);
109
110// ]]>
111</script>
112
113
114</head>
115
116<body>
117
118 <!-- ===================================================== -->
119
120<div class="page">
121        <h3>操作方法</h3>
122        <ul>
123                <li>j キー: 次のページへ</li>
124                <li>k キー: 前のページへ</li>
125                <li>h キー: 目次ページへ</li>
126                <li>l キー: 目次ページから戻る</li>
127                <li>目次ページでは ← → キーで一覧を移動し、クリックで選択します</li>
128        </ul>
129        <script type="text/javascript"> s6.page({ styles: { ul: { fontSize: '0.75em', marginTop: '2%' } } }) </script>
130</div>
131
132<div clase="page">
133        <h2>HDR やってみた</h2>
134        <p>Shibuya.jpg cho45 / www.lowreal.net</p>
135        <script type="text/javascript">
136                s6.page({ separator: 'fade', styles: { 'ul/li': { lineHeight: 1.7 } } })
137        </script>
138</div>
139
140<div clase="page">
141        <h2>Agenda</h2>
142        <ul>
143                <li>HDR?</li>
144                <li>複数枚からの HDR</li>
145                <li>RAW 一枚からの HDR</li>
146        </ul>
147        <script type="text/javascript">
148                s6.page({ separator: 'fade', styles: {} })
149        </script>
150</div>
151
152<div clase="page">
153        <h2>HDR?</h2>
154        <ul>
155                <li>High Dynamic Range</li>
156                <li>8bit 以上の輝度情報もってる</li>
157                <li>当然モニタでは表示できない</li>
158                <li>→ 8bit にマッピングする</li>
159        </ul>
160        <script type="text/javascript">
161                s6.page({ separator: 'fade', styles: {} })
162        </script>
163</div>
164
165<div clase="page">
166        <p>(よくある) シュールな画像は<br/>一例にすぎない</p>
167        <script type="text/javascript">
168                s6.page({ separator: 'fade', styles: { 'p' : { textAlign: 'center', marginTop: '20%' } } })
169        </script>
170</div>
171
172<div clase="page">
173        <h2>ブラケット撮影から HDR</h2>
174        <ul>
175                <li>露出違う数枚を合成</li>
176                <li>ソフトで計算して、32bit とかにする</li>
177                <li>8bit へ頑張ってマッピングする</li>
178        </ul>
179        <script type="text/javascript">
180                s6.page({ separator: 'fade', styles: {} })
181        </script>
182</div>
183
184<div clase="page">
185        <p>例1</p>
186        <div class='photo'>
187                <a href="http://www.flickr.com/photos/cho45/1247521630/" title="IMG_5633-HDR by cho45, on Flickr">
188                        <img src="http://farm2.static.flickr.com/1394/1247521630_5db1447a6c_b.jpg" width="1024" height="683" alt="IMG_5633-HDR" />
189                </a>
190        </div>
191        <div class='desc'>
192                <div>
193                        <p>f/16 17mm 三脚使用 3枚</p>
194
195                        <ul>
196                                <li>「HDR に統合」(Photoshop)</li>
197                                <li>彩度をあげ</li>
198                                <li>スマートシャープフィルタ</li>
199                                <li>32bit -&gt; 16bit (ここでマップ)</li>
200                                <li>トーンカーブ</li>
201                                <li>16bit -&gt; 8bit <span style="font-size: 80%">まだちゃんとわかってなくてgdgd</span></li>
202                                <li>JPEG 保存</li>
203                        </ul>
204                </div>
205        </div>
206        <script type="text/javascript">
207                s6.page({ separator: 'fade',
208                        styles: {
209                                'p': {
210                                        position        : 'absolute',
211                                        backgroundColor : '#000',
212                                        margin          : '0',
213                                        padding         : '25% 0',
214                                        width           : '100%',
215                                        height          : '100%',
216                                        textAlign       : 'center'
217                                },
218                                'div[0]': {
219                                        display         : 'none',
220                                        position        : 'absolute',
221                                        backgroundColor : '#000',
222                                        margin          : 0,
223                                        padding         : 0,
224                                        width           : '100%',
225                                        height          : '100%',
226                                        textAlign       : 'center'
227                                },
228                                'div[1]': {
229                                        display         : 'none',
230                                        margin          : 0,
231                                        padding         : '0.5em',
232                                        width           : '100%',
233                                        height          : '100%'
234                                },
235                                'div[1]/div': {
236                                        width    : '1024px',
237                                        fontSize : '70%',
238                                        margin   : '0 auto',
239                                        padding  : 0
240                                },
241                                'div[1]/div/ul' : {
242                                        fontSize : '90%',
243                                        padding: '1em'
244                                }
245                        },
246                        actions : [
247                                [
248                                        ['div[0]', 'fade in', 0.3]
249                                ],
250                                [
251                                        ['p', 'fade out', 0.3]
252                                ],
253                                [
254                                        ['div[0]/a', 'fade', 0.18, 1, 0.3],
255                                        ['div[1]', 'fade', 0.18, 0, 1]
256                                ]
257                        ]
258                })
259        </script>
260</div>
261
262<div clase="page">
263        <p>例2</p>
264        <div class='photo'>
265                <a href="http://www.flickr.com/photos/cho45/1246519412/" title="IMG_5621-HDR by cho45, on Flickr">
266                        <img src="http://farm2.static.flickr.com/1065/1246519412_08bd1eda20_b.jpg" width="1024" height="683" alt="IMG_5621-HDR" />
267                </a>
268        </div>
269        <div class='desc'>
270                <div>
271                        <p>f/16 17mm 三脚使用 +/-2EV で3枚撮影</p>
272
273                        <ul>
274                                <li>Photoshop で「HDR に統合」</li>
275                                <li>32bit -&gt; 16bit でローカル割り当てトーンカーブ適用 (コントラスト上げ系)</li>
276                                <li>彩度上げ</li>
277                                <li>16bit -&gt; 8bit</li>
278                                <li>JPEG 保存</li>
279                        </ul>
280                </div>
281        </div>
282        <script type="text/javascript">
283                s6.page({ separator: 'fade',
284                        styles: {
285                                'p': {
286                                        position        : 'absolute',
287                                        backgroundColor : '#000',
288                                        margin          : '0',
289                                        padding         : '25% 0',
290                                        width           : '100%',
291                                        height          : '100%',
292                                        textAlign       : 'center'
293                                },
294                                'div[0]': {
295                                        display         : 'none',
296                                        position        : 'absolute',
297                                        backgroundColor : '#000',
298                                        margin          : 0,
299                                        padding         : 0,
300                                        width           : '100%',
301                                        height          : '100%',
302                                        textAlign       : 'center'
303                                },
304                                'div[1]': {
305                                        display         : 'none',
306                                        margin          : 0,
307                                        padding         : '0.5em',
308                                        width           : '100%',
309                                        height          : '100%'
310                                },
311                                'div[1]/div': {
312                                        width    : '1024px',
313                                        fontSize : '70%',
314                                        margin   : '0 auto',
315                                        padding  : 0
316                                },
317                                'div[1]/div/ul' : {
318                                        fontSize : '90%',
319                                        padding: '1em'
320                                }
321                        },
322                        actions : [
323                                [
324                                        ['div[0]', 'fade in', 0.3]
325                                ],
326                                [
327                                        ['p', 'fade out', 0.3]
328                                ],
329                                [
330                                        ['div[0]/a', 'fade', 0.18, 1, 0.3],
331                                        ['div[1]', 'fade', 0.18, 0, 1]
332                                ]
333                        ]
334                })
335        </script>
336</div>
337
338<div clase="page">
339        <p>例3</p>
340        <div class='photo'>
341                <img src="http://farm2.static.flickr.com/1245/1282905717_0aeb454eb8.jpg" width="333" height="500" alt="" />
342                <img src="http://farm2.static.flickr.com/1435/1282437322_597482c80e.jpg" width="333" height="500" alt="" />
343        </div>
344        <div class='desc'>
345                <div>
346                        <p>+/-2EV で3枚撮影</p>
347
348                        <p>みたままのイメージに近いマッピング</p>
349                </div>
350        </div>
351        <script type="text/javascript">
352                s6.page({ separator: 'fade',
353                        styles: {
354                                'p': {
355                                        position        : 'absolute',
356                                        backgroundColor : '#000',
357                                        margin          : '0',
358                                        padding         : '25% 0',
359                                        width           : '100%',
360                                        height          : '100%',
361                                        textAlign       : 'center'
362                                },
363                                'div[0]': {
364                                        display         : 'none',
365                                        position        : 'absolute',
366                                        backgroundColor : '#000',
367                                        margin          : 0,
368                                        padding         : 0,
369                                        width           : '100%',
370                                        height          : '100%',
371                                        textAlign       : 'center'
372                                },
373                                'div[1]': {
374                                        display         : 'none',
375                                        margin          : 0,
376                                        padding         : '0.5em',
377                                        width           : '100%',
378                                        height          : '100%'
379                                },
380                                'div[1]/div': {
381                                        width    : '1024px',
382                                        fontSize : '70%',
383                                        margin   : '0 auto',
384                                        padding  : 0
385                                },
386                                'div[1]/div/ul' : {
387                                        fontSize : '90%',
388                                        padding: '1em'
389                                }
390                        },
391                        actions : [
392                                [
393                                        ['div[0]', 'fade in', 0.3]
394                                ],
395                                [
396                                        ['p', 'fade out', 0.3]
397                                ],
398                                [
399                                        ['div[0]/img', 'fade', 0.18, 1, 0.3],
400                                        ['div[1]', 'fade', 0.18, 0, 1]
401                                ]
402                        ]
403                })
404        </script>
405</div>
406
407<div clase="page">
408        <h2>RAW一枚でできる HDR</h2>
409        <ul>
410                <li>8bit 以上の情報を活用する</li>
411                <li>現像段階でシャドーとかを補正する</li>
412        </ul>
413        <script type="text/javascript">
414                s6.page({ separator: 'fade', styles: {} })
415        </script>
416</div>
417
418<div clase="page">
419        <p>例1</p>
420        <div class='photo'>
421                <a href="http://www.flickr.com/photos/cho45/1278210733/" title="Untitled by cho45, on Flickr">
422                        <img src="http://farm2.static.flickr.com/1436/1278210733_4334f8248c_b.jpg" width="1024" height="683" alt="" />
423                </a>
424        </div>
425        <div class='desc'>
426                <div>
427                        <p>一枚の RAW</p>
428
429                        <ul>
430                                <li>JPG 数枚に現像してから「HDR 統合」</li>
431                                <li>↑ あんまりいい方法じゃない感じ</li>
432                        </ul>
433                </div>
434        </div>
435        <script type="text/javascript">
436                s6.page({ separator: 'fade',
437                        styles: {
438                                'p': {
439                                        position        : 'absolute',
440                                        backgroundColor : '#000',
441                                        margin          : '0',
442                                        padding         : '25% 0',
443                                        width           : '100%',
444                                        height          : '100%',
445                                        textAlign       : 'center'
446                                },
447                                'div[0]': {
448                                        display         : 'none',
449                                        position        : 'absolute',
450                                        backgroundColor : '#000',
451                                        margin          : 0,
452                                        padding         : 0,
453                                        width           : '100%',
454                                        height          : '100%',
455                                        textAlign       : 'center'
456                                },
457                                'div[1]': {
458                                        display         : 'none',
459                                        margin          : 0,
460                                        padding         : '0.5em',
461                                        width           : '100%',
462                                        height          : '100%'
463                                },
464                                'div[1]/div': {
465                                        width    : '1024px',
466                                        fontSize : '70%',
467                                        margin   : '0 auto',
468                                        padding  : 0
469                                },
470                                'div[1]/div/ul' : {
471                                        fontSize : '90%',
472                                        padding: '1em'
473                                }
474                        },
475                        actions : [
476                                [
477                                        ['div[0]', 'fade in', 0.3]
478                                ],
479                                [
480                                        ['p', 'fade out', 0.3]
481                                ],
482                                [
483                                        ['div[0]/a', 'fade', 0.18, 1, 0.3],
484                                        ['div[1]', 'fade', 0.18, 0, 1]
485                                ]
486                        ]
487                })
488        </script>
489</div>
490
491<div clase="page">
492        <p>例2</p>
493        <div class='photo'>
494                <a href="http://www.flickr.com/photos/cho45/2222338723/" title="Untitled by cho45, on Flickr">
495                        <img src="http://farm3.static.flickr.com/2396/2222338723_019bd02462_b.jpg" width="1024" height="683" alt="" />
496                </a>
497        </div>
498        <div class='desc'>
499                <div>
500                        <p>一枚の RAW</p>
501
502                        <ul>
503                                <li>現像画面で「補助光」をいれる</li>
504                                <li>ちゃんと情報つかってるのか謎</li>
505                                <li>お手軽にそれっぽい</li>
506                        </ul>
507                </div>
508        </div>
509        <script type="text/javascript">
510                s6.page({ separator: 'fade',
511                        styles: {
512                                'p': {
513                                        position        : 'absolute',
514                                        backgroundColor : '#000',
515                                        margin          : '0',
516                                        padding         : '25% 0',
517                                        width           : '100%',
518                                        height          : '100%',
519                                        textAlign       : 'center'
520                                },
521                                'div[0]': {
522                                        display         : 'none',
523                                        position        : 'absolute',
524                                        backgroundColor : '#000',
525                                        margin          : 0,
526                                        padding         : 0,
527                                        width           : '100%',
528                                        height          : '100%',
529                                        textAlign       : 'center'
530                                },
531                                'div[1]': {
532                                        display         : 'none',
533                                        margin          : 0,
534                                        padding         : '0.5em',
535                                        width           : '100%',
536                                        height          : '100%'
537                                },
538                                'div[1]/div': {
539                                        width    : '1024px',
540                                        fontSize : '70%',
541                                        margin   : '0 auto',
542                                        padding  : 0
543                                },
544                                'div[1]/div/ul' : {
545                                        fontSize : '90%',
546                                        padding: '1em'
547                                }
548                        },
549                        actions : [
550                                [
551                                        ['div[0]', 'fade in', 0.3]
552                                ],
553                                [
554                                        ['p', 'fade out', 0.3]
555                                ],
556                                [
557                                        ['div[0]/a', 'fade', 0.18, 1, 0.3],
558                                        ['div[1]', 'fade', 0.18, 0, 1]
559                                ]
560                        ]
561                })
562        </script>
563</div>
564
565<div clase="page">
566        <p>そんな感じで</p>
567        <script type="text/javascript">
568                s6.page({ separator: 'fade', styles: { 'p' : { textAlign: 'center', marginTop: '20%' } } })
569        </script>
570</div>
571
572<div clase="page">
573        <h2>おもうこと</h2>
574        <ul>
575                <li>複数枚 HDR は動いてるのは無理</li>
576                <li>一枚 HDR は所詮一枚</li>
577                <li>複数枚 HDR は遊べる</li>
578                <li>一枚 HDR は HDR っていうほど HDR じゃない</li>
579        </ul>
580        <script type="text/javascript">
581                s6.page({ separator: 'fade', styles: {} })
582        </script>
583</div>
584
585<div clase="page">
586        <div class='photo'>
587                <p>
588                        <a href="http://www.flickr.com/photos/cho45/1278695287/" title="Untitled by cho45, on Flickr">
589                                <img src="http://farm2.static.flickr.com/1284/1278695287_52a4f3b6da.jpg" width="332" height="500" alt="" />
590                        </a>
591                </p>
592                <p>End</p>
593        </div>
594        <script type="text/javascript">
595                s6.page({ separator: 'fade',
596                        styles: {
597                                'p': {
598                                        position        : 'absolute',
599                                        backgroundColor : '',
600                                        margin          : '0',
601                                        padding         : '25% 0',
602                                        width           : '100%',
603                                        height          : '100%',
604                                        textAlign       : 'center'
605                                },
606                                'div[0]': {
607                                        position        : 'absolute',
608                                        backgroundColor : '#000',
609                                        margin          : 0,
610                                        padding         : 0,
611                                        width           : '100%',
612                                        height          : '100%',
613                                        textAlign       : 'center'
614                                },
615                        },
616                        actions : [
617                        ]
618                })
619        </script>
620</div>
621
622
623<!--div>
624        <h2>Rediscover XPath</h2>
625        <script type="text/javascript">
626                s6.page({
627                        separator: 'fade',
628                        styleBase: 'takahashi',
629                        effect: 'fadeScaleFromUpTransparent'
630                });
631        </script>
632</div-->
633
634
635</body>
636</html>
Note: See TracBrowser for help on using the browser.