SVGとCSSでリアルな雲を描きます

SVGとCSSは、現実的なクラウド効果を生成します

ギリシャ神話では、ゼウスはクラウドフェアリーネフェレを作成しました。他のギリシャの神話のように、この物語は非常に奇妙です。これが短くて適切なバージョンです：

伝説によると、ネフェレレは彼の美しい妻のイメージでゼウスによって作成されました。人間がネフェレに会い、彼女に恋をした。一緒に...結局のところ、この雲がハーフマンと半男性のケンタウロスの赤ちゃんを産んだことは信じられないほどです。

とても奇妙ですよね？私は個人的に理解できません。幸いなことに、ブラウザでクラウドを作成するプロセスは、はるかにシンプルで深刻です。

最近、開発者のYuan Chuanがコードによって生成された現実的なクラウド効果を実装していることがわかりました。私にとって、ブラウザで実装されたこの効果はかつて神話でした。

このサンプルコードを閲覧するだけで、それを使用することで想像できます<filter></filter>要素のCSS box-shadow （2つのSVGフィルターを含む）は、説得力のある単一クラウド効果を実現できます。

私たちが望む現実的な効果は、 feTurbulenceとfeDisplacementMapの巧妙な組み合わせによって達成されます。これらのSVGフィルターは強力で複雑で、非常にエキサイティングな機能（オスカー賞を受賞したアルゴリズムを含む！）を提供します。しかし、その根底にある複雑さは困難な場合があります。

SVGフィルターの物理学はこの記事の範囲を超えていますが、MDNおよびw3.orgで利用できるドキュメントがたくさんあります。 feTurbulenceとfeDisplacementMapに関する非常に役立つページは、無料で（そしてこの素晴らしい本の章として）利用できます。

この記事では、これらのSVGフィルターを使用して驚くべき結果を達成する方法を学ぶことに焦点を当てます。アーティストが驚くべき景観をレンダリングするために顔料の分子構造を理解する必要がないのと同じように、舞台裏のアルゴリズムがどのように機能するかをより深く見る必要はありません。

代わりに、ブラウザに説得力のあるクラウドを描画するために重要ないくつかのSVGプロパティに注目しましょう。これらのプロパティを使用して、これらの強力なフィルターを簡単に使用し、プロジェクトでそれらを正確にカスタマイズする方法を学ぶことができます。

基本から始めます

CSS box-shadow属性に注意を払う価値のある5つの値があります。

 <code>box-shadow:<offsetx><offsety><blurradius><spreadradius><color> ;</color></spreadradius></blurradius></offsety></offsetx></code>

これらの値を上げて（おそらく賢明な開発者が使用するよりも高い）、シャドウ自体がステージ上のキャラクターになるようにしましょう。

 <code>#cloud-square { background: turquoise; box-shadow: 200px 200px 50px 0px #000; width: 180px; height: 180px; } #cloud-circle { background: coral; border-radius: 50%; box-shadow: 200px 200px 50px 0px #000; width: 180px; height: 180px; }</code>

シャドウドラマをプレイしたり見たりしたことがありますか？

影を変えるために手で形を変えるのと同じように、HTMLの「ソースの形状」を移動して変形させて、ブラウザでレンダリングされた影の形状を移動および変更できます。 box-shadow 、元のサイズと「変換」機能をborder-radiusにコピーします。 SVGフィルターは、要素とその影に同時に適用されます。

<code><svg height="0" width="0"><filter><feturbulence basefrequency=".01" numoctaves="10" type="fractalNoise"></feturbulence><fedisplacementmap in="SourceGraphic" scale="10"></fedisplacementmap></filter></svg></code>

これは、現在のSVGのマークアップです。ビジュアルを定義していないため（幅がゼロと高さは言うまでもありません）、レンダリングしません。その唯一の目的は、フィルターを保存することです。これをSourceGraphicに提供します（つまり、私たちのものです。<div> ）。私たちの情報源<code><div>その影は、フィルターによって独立して歪んでいます。必要なCSSルールを追加し、HTML要素（ <code>#cloud-circle ）をIDを使用してSVGフィルターにリンクします。

 <code>#cloud-circle { filter: url(#filter); box-shadow: 200px 200px 50px 0px #fff; }</code>

見て！

わかりました、それを認め、SVGフィルターを追加することは非常に目立たない。

心配しないで！表面に触れたばかりで、見るべきことがたくさんありました。

feDisplacementMap scaleプロパティを実験します

この属性でいくつかの非科学的な実験を実行すると、劇的な効果が生じる可能性があります。とりあえず、すべての値をfeTurbulenceに保持しておきましょう。 DisplacementMapのscaleプロパティを調整してください。

scale値が（30分で）増加すると、ソース<div>歪みが発生し、影は空の雲のランダムな形を反映するためにキャストされます。<pre class="brush:php;toolbar:false">&lt;code&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;180&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/code&gt;</pre> <p>わかりました、私たちはいくつかの進歩を遂げました！色を少し変更して、より説得力のあるクラウド効果を作成し、強化しましょう。</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;body { background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%); } #cloud-circle { width: 180px; height: 180px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 200px 200px 50px 0px #fff; }&lt;/code&gt;</pre> <p>今、私たちは現実的なクラウド効果に近づいています！</p> <h3 id="code-box-shadow-code-の-code-blur-code-の値を変更します"> <code>box-shadowのblurの値を変更します

次の一連の画像はbox-shadowに対するblur値の効果を示しています。ここでは、 blur値が10ピクセルの増加で増加します。

雲のような効果を雲に与えるために、ソースをわずかに広げることができます<div>。<pre class="brush:php;toolbar:false"> &lt;code&gt;#cloud-circle { width: 500px; height: 275px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 200px 200px 60px 0px #fff; }&lt;/code&gt;</pre> <p>等！ソース要素を広げ、今では雲と呼ばれる白い影をブロックします。シャドウをより長い距離に「再キャスト」して、ソース画像によって雲が不明瞭にならないようにしましょう。 （シャドウドラマの視界をブロックしないように、壁から手を離すことを想像してください。）</p> <p>これは、一部のCSSポジショニングで簡単に実現できます。<code><div>これはクラウドの親要素であり、デフォルトで静的に配置されています。ソースを転送するために、いくつかの絶対的なポジショニングを使用しましょう<code><div>「引っ張って」ドキュメントストリームを削除します。最初は、これも影を再配置するため、影の間の距離を増やし、要素の位置をわずかに調整する必要があります。<pre class="brush:php;toolbar:false"> &lt;code&gt;#cloud-circle { width: 500px; height: 275px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 400px 400px 60px 0px #fff; /* 增加阴影偏移量*/ position: absolute; /* 将父元素移出文档流*/ top: -320px; /* 向下移动*/ left: -320px; /* 向右移动*/ }&lt;/code&gt;</pre> <p>はい！私たちはすでにかなり説得力のあるクラウドを持っています。</p> <p>ブラウザにレンダリングされた画像は、雲を非常によく描写していますが、確かではありません...この雲は本当に雲の妖精のネフェールを反映できますか？私たちはもっとうまくやれると思います！</p> <h3 id="レイヤーを使用して深さを高速化します">レイヤーを使用して深さを高速化します</h3> <p>これが私たちが望むものです：</p> <p>この写真の雲の深さ、テクスチャー、豊かさから判断すると、1つのことが明らかです。ゼウスは美術学校に通いました。少なくとも、彼はデザインの普遍的な原則を読んだに違いありません。それは、強力で一見普通の概念を説明しています。</p> <blockquote><p> […]照明偏差は、自然の深さと感覚の解釈に重要な役割を果たし、デザイナーがさまざまな方法で動作させることができます。明るい領域と暗い領域のコントラストを使用して、深さの外観を変えます。</p></blockquote> <p>このパッセージは、私たちが生成するクラウドコードを大幅に改善する方法についての手がかりを提供します。さまざまな形、サイズ、色の層を積み重ねることにより、参照画像の雲と非常に似た雲をレンダリングできます。これには、必要に応じてフィルターを複数回呼び出す必要があります。 </p> <pre class="brush:php;toolbar:false">&lt;code&gt;&lt;svg height=&quot;0&quot; width=&quot;0&quot;&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;4&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;170&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;2&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;150&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;2&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;100&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;/svg&gt;&lt;/code&gt;</pre> <p>レイヤーを適用すると、 <code>feTurbulence探求し、その汎用性を達成する機会が与えられます。利用可能なよりスムーズなタイプを選択します： fractalNoiseとnumOctaves最大6にします。

<code><feturbulence basefrequency="n" numoctaves="6" type="fractalNoise"></feturbulence></code>

それはどういう意味ですか？それでは、 baseFrequencyプロパティに焦点を当てましょう。 nの値を増やすと得られる結果は次のとおりです。

乱流、ノイズ、周波数、オクターブなどの単語は、奇妙に見えるか、混乱することさえあります。しかし、心配しないでください！このフィルターの効果を音波と比較することは、実際には完全に正確です。低周波数（ baseFrequency=0.001 ）を低ノイズと高周波数（ baseFrequency=0.1 ）と関連付けて、より明確なトーンと関連付けることができます。

積倍のような効果の場合、 baseFrequencyの値は快適に〜0.005と〜0.01の範囲にあることがわかります。

numOctavesを使用して詳細を追加します

numOctavesを増やすと、非常に細かい詳細で画像をレンダリングできます。これには多くの計算が必要なので、高い値がパフォーマンスに深刻な影響を与える可能性があることに注意してください。ブラウザがヘルメットと膝のパッドを着用していない限り、この値が増加しないようにしてください。

良いニュースは、この値を高すぎて詳細と細かさを生み出す必要がないということです。上記の画像に示すように、 numOctaves値を4または5に設定できます。

結果は次のとおりです

seed属性を使用して、無限の変更を達成します

seed属性については、舞台裏で起こっている魔法を示唆しているため、多くのことが言われています。ただし、私たちの目的のために、 seedの有用性は、「異なる値、異なる形状」という4つの単語で要約できます。

Perlinノイズ関数（前述の）は、この値をその乱数ジェネレーターの開始点として使用します。このプロパティを含めないように選択すると、デフォルトのseedがゼロになります。ただし、このプロパティが含まれている場合、 seedにどのような価値を割り当てても、パフォーマンスの問題について心配する必要はありません。

上記のGIFは、 seedが提供する機能の一部を表しています。各クラウドは階層化された複合クラウドであることを忘れないでください。 （各レイヤーのプロパティを調整しましたが、それぞれのseed値を一貫しています。）

ここでは、参照画像を注意深く見て、私はすでに3つの雲を置いています<div>（異なる不透明度）ベースに重ねます<code><div>優れた。試行錯誤と任意の<code>seed値の入力により、写真の雲の形状に似た形状になりました。

野生で想像力豊かです

もちろん、ブラウザを描くと思います<div>ゼウスよりも優れているネフェレレはrog慢になるでしょう。ただし、CSSやSVGフィルターから掘り下げることができるほど、Thorのオリジナルの作成に視覚的に驚くべき驚くべき非常に似たものを作成することができます。その後、さらに実験を続けることができます！<p>反射した霧</p> <p>高層シーラスクラウド</p> <p>この記事では、私たちはただ力と複雑さの海で軽くたたいています。 SVGフィルターは通常、圧倒的でアクセスできないように見えます。</p> <p>しかし、A Single DivプロジェクトやDiana Smithの描画スキルの例のように、リラックスした快適な実験方法は常に驚くべき結果をもたらします！</p> <h4 id="アチーブメントが解除されます-Neferreクラウドジェネレーター">アチーブメントが解除されます！ Neferreクラウドジェネレーター</h4> <p>皆さんの多くは、クラウドを作るために必要なすべての技術的な詳細を深く掘り下げて喜んでいると思いますが、プロジェクトでクラウドを使用するためのより便利な方法を好むかもしれません。クラウドを生成し、形状と変化を実験するのに役立つガジェットを開発しました。</p> <p>クラウドを生成します！</p> <p>質問、提案、コメントはありますか？ Twitterで私に連絡するか、この投稿にコメントを残してください。</p> <p><small>この記事に関する貴重な提案について、アメリア・ベラミー・ロイドに感謝します。</small></p> </div>