初めて見た場所を覚えていませんが、
DropClockスクリーンセーバーに魅了されました。これはすでにHabréで
言及されています。
=>
しかし、ここに問題があります。作成者は、WinとMac専用にコンパイルしました。 それにもかかわらず、欲求は制限よりも強く、私は自分の実装を収集することを何としても決定しました。
最初に考えたのは、水と水しぶきのソフトウェアレンダリングを実装することです。
私の主な焦点はウェブであるため、webGLとウォーターエフェクトの実装を探し始めました。 研究の結果、彼は
WebGL Waterに来ました。
私はいくつかのドキュメントを読み、helloworldsを試しましたが、これは私のものではありません。
ソースコードをざっと読んで編集しようとしただけでは、研究の主題が明確になりませんでした。 オリジナルの構成を確認することにしました。
トレントからWinバージョンをダウンロードし、ぶどうの木には行かず、仮想マシンに置きました。
実際、これはビデオが埋め込まれたフラッシュである
ことが判明しました。10個が黒の背景に10個、白が10個で、それぞれ1分間続きます。
swfアンパッカーはそれらをプルしませんでしたが、SWF to Video（win）コンバーターが役に立ちました。 さらに、ネイティブシステムでは、mp4 / x264 ffmpegにトランスコードされました。
さらに、問題は小さなままでした-それをブラウザで動作させるために。 変更のために、OpenWeatherMapで天気の読み込みも追加しました。
以下にマークアップを示します。
<div class="all"> <div class="d d0"><video src="dropclock_media/b0.mp4" autoplay="autoplay" loop="loop" id="d0" data-d="0"></video></div> <div class="d d1"><video src="dropclock_media/b0.mp4" autoplay="autoplay" loop="loop" id="d1" data-d="1"></video></div> <div class="d s"><div class="sep"></div></div> <div class="d d2"><video src="dropclock_media/b0.mp4" autoplay="autoplay" loop="loop" id="d2" data-d="2"></video></div> <div class="d d3"><video src="dropclock_media/b0.mp4" autoplay="autoplay" loop="loop" id="d3" data-d="3"></video></div> <div class="inspector"> <div class="time" id="info"></div> <div class="weather"></div> </div> </div>
スタイル（概要） html,body{height:100%;width:100%;margin:0;padding:0;overflow:hidden;} body{text-align:center;background-color:#000;color:#fff;font-family:Arial;} body.save{cursor:none;} .all{ width: 100%; max-width: 1375px; height: calc(100% - 100px); display:inline-block;white-space: nowrap;text-align:center; position: relative; padding: 0; margin:0 auto; } .d{ display:inline-block;line-height:0;max-width:calc((100% - 115px) / 4 - 2px);height:100%; vertical-align:top;overflow:hidden;border:1px solid #000; } .d:after{display:block;width:100%;height:2px;content:"";background:#000;margin-top:-2px;position:relative;z-index:100;} .s{width:115px;overflow:visible;} .d .sep{height:100%;animation: blick 1s ease infinite;} .r .sep{-webkit-animation:rotate 60s ease infinite;} .sep{position:relative;overflow:visible;} .sep:after,.sep:before{ position:absolute;top:40%;left:39%;z-index:1000;content:""; display:block;width:22%;height:20%; -webkit-animation:blick 1s ease infinite; background-image: url("data:image/gif;base64,R0lGODlhAQABAIABAMzMzP///yH+EUNyZWF0ZWQgd2l0aCBHSU1QACwAAAAAAQABAAACAkQBADs="); background-repeat:no-repeat;background-size:contain; } .sep:after{margin-top:94%;} .sep:before{} video{height:100%;max-height:700px;width:calc(100% + 2px);max-width:315px;margin:-2px -1px 0;position:relative;z-index:50;} #info{text-align:right;} @-webkit-keyframes blick{ 0% {opacity:1;} 50% {opacity:.7;} 70% {opacity:.3;} 100% {opacity:1;} } @-webkit-keyframes rotate{ 0 %{-webkit-transform: rotate(0deg);} 0.2%{ -webkit-transform: rotate(-30deg); } 0.8%{ -webkit-transform: rotate(390deg); } 1%{ -webkit-transform: rotate(360deg); } 100% {-webkit-transform: rotate(360deg);} } @keyframes blick{0% {opacity:1;}50% {opacity:.7;}70% {opacity:.3;}100% {opacity:1;}} .inspector{line-height:50px;padding:0 25px;} .time{float:right;} .weather{float:left;} .weather img{vertical-align:top;} .arrow{display:inline-block;width:20px;height:50px;} @media screen and (min-height:775px){ .all{ top: calc((100% - 755px) / 2); height: calc(100% - 202px); } } @media screen and (max-height:775px){ .all{ top:25px; } }
スクリプト（jsおよび少しのjquery） var digits = [0,0,0,0]; var msmove = timenow(); var city = 1485357; var lastrequesttime = 0; function timenow(){ return new Date * 1; } function getRandomArbitary(min, max){return Math.random() * (max - min) + min;} function extra0(d,e){ if(e===undefined)e=1;for(var i=0; i<e; i++){if(d<Math.pow(10,(i+1))) d='0'+d;}return d;} function step(){ var now = new Date(),hors = now.getHours(),mins = now.getMinutes(),ndig = new Array(4),secs = now.getSeconds(),mili = now.getMilliseconds(); ndig[0]=Math.floor(hors/10); ndig[1]=hors-ndig[0]*10; ndig[2]=Math.floor(mins/10); ndig[3]=mins-ndig[2]*10;
firefoxでは、ビデオの速度が遅くなり、ガタガタと音がするので、最初はwebkitに集中しました。
数値が一度に消えないように、数値の立ち下がりに遅延を追加しました。
うまく機能しているようですが、スタンドアロンファイルとして実行する必要があります。
私はubuntaでwebbrowser-appシステムミニブラウザを見つけ、そのパラメータを掘り下げて、このランチャーを次のように書きました：
しかし、xscreensaverは彼に多くのことを誓い、私は何か間違ったことをしていることに気づきました...
時間が経つにつれて、美しいスクリーンセーバーを手に入れたいという欲求はまったく満たされなくなりました。 9月13日、全ロシアのプログラマーの日、仕事は中断され、再び幽霊のような目標を達成することに注意が向けられました。 その前に、私はPythonでウィンドウアプリケーションを目にしましたが、選択は彼にかかったのです。 以前に何も書いたことはありません。 私は基本的な例を分析し始め、ウェブキットを追加しました。
xscreensaverに固定できる場合はどうなりますか？
Pythonのスクリーンセーバーの例が見つかりましたが、それに基づいて独自の
スクリーンセーバーが作成されました。
〜/ .xscreensaverでは、リストの下に行が追加されます。
- "Drop Clock" /var/www/vhosts/localhost/dropclock/dropclock_xss.py \n\その後、小さなウィンドウで正しく表示するためのスタイルの適応性はまだ解決されていましたが、うまくいきました、私はそれが好きです。
プログラマーの日は成功したと推測できます。
ビデオは
マグネットリンクにあります。
UPD：ビデオを少し
振りました 一部の解像度とデモでは、ビデオの上部と下部に白いバーが表示されました
UPD：自分自身を収集するのが面倒な人のため
に、交換機へのリンク