このウェブアプリはあらゆるイメージをレトロ熱の夢に変える - Photoshop は必要ありません

わたしたちの以前のTutorial, we taught our application to work with references and palettes. Now, it's time to add more options for fine-tuning color and visual effects. 私たちのアプリケーションは、参照とパレットで動作するように教えました。

より柔軟な画像操作を可能にするいくつかの新しいツールを導入します。さらに、RGBやLABとは異なり色で動作する新しいカラーモデル、HSVを探索します。このモデルは、色彩の調整に特に役立つ色彩、飽和、軽さなどの特徴を操作しやすくします。この革新は、新しい創造的な可能性と実験の機会を開きます。

プロジェクトコードの全文はこちらから入手できます。this linkで。

Adjusting the Number of Colors in the Extracted Palette

パレットを制限することは、画像の外観をどう変えるかをすでに見てきました。

より柔軟なフィルターと画像処理の調整のために、私たちは画像から抽出された色の数を制御する機能を追加します。今、あなたは正確にいくつかの色がイメージで強調されているかを設定することができ、視覚効果のより良い制御を可能にします。この機能は特にフィルターを作成するためのパレットで作業するときに有用です、色の数を変更することは、幅広いデザインタスクに適用されます。

アプリは現在、画像から抽出された色の数(10から20まで)を選択するスライダーを搭載しています。

<div style={{ marginBottom: 12 }}>
  <label>Number of Colors</label>
  <input
    type="range"
    min="10"
    max="20"
    value={colorCount}
    onChange={(e) => setColorCount(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>

ササキの素晴らしい写真で実験してみようタグ : 東京それは幅広い色や色合いを特徴とし、私たちの探検のための完璧なテーマです。

下記では、異なるサイズのパレットで画像がどう見えるかを比較することができます。

Filter Intensity Slider

フィルタリングプロセスをより柔軟にするために、私たちはパレットアプリケーションの強度を制御するスライダーを画像に追加します. このスライダーは、オリジナル画像とパレットのバランスを調整することができます。

必要なフィルター強度を選択し、「フィルターを適用」をクリックします。

<div style={{ marginBottom: 16 }}>
  <label style={{ display: "block", marginBottom: 6 }}>Filter Intensity</label>
  <input
    type="range"
    min="0"
    max="100"
    value={intensity}
    onChange={(e) => setIntensity(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>

How does it work?

強度が 100% に設定された場合、選択されたパレットの色を使用して画像が完全に変換されます. 強度値が低ければ低ければ低いほど、パレットが画像に影響を与え、より多くのオリジナル色を保持することができます。

HSV Color Model

HSV(Hue, Saturation, Value)は、最も人気のあるカラーモデルの一つであり、しばしば色の色彩、飽和性、明るさを表すために使用されます。

♪
• 色(色):これは、0から360度の度合いで測定された主色(赤、緑、青など)を表します。
♪
• 飽和性:これは色の強度を示します。飽和性は色の灰色の量に影響されます:100%は完全に飽和色であり、0%は灰色です。
♪
• 値(明るさ):これは色の明るさを表します. 0% の値は黒を表し、100%は色の最も明るいバージョンです。
♪

Differences from RGB and LAB: :

♪
• 赤、緑、青の強度に基づいて色を組み合わせるRGBとは異なり、HSVは人間の視覚感覚に基づいています。
♪
• より複雑な数学モデルを使用して、異なる照明条件で正確な色の表示を行うLABと比較して、HSVはより直感的でユーザーフレンドリーです。
♪

RGB を HSV に変換するためのサンプルコード:

function rgbToHsv(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;
  
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;

  let h = 0, s = 0, v = max;

  if (delta !== 0) {
    s = delta / max;
    if (r === max) {
      h = (g - b) / delta;
    } else if (g === max) {
      h = 2 + (b - r) / delta;
    } else {
      h = 4 + (r - g) / delta;
    }
    h *= 60;
    if (h < 0) h += 360;
  }

  return [h, s * 100, v * 100];
}

以下は、同じパレットの画像の例ですが、異なる色のモデルです。

Contrast Slider

コントラストは、画像の最も明るい点と最も暗い点の違いを指します。コントラストを調整すると、この違いを強化または減らすことができます。

How does contrast adjustment work?

コントラストが向上すると、画像の暗い領域はさらに暗くなり、明るい領域はさらに明るくなります。

コード変更の例:

const applyContrast = (r, g, b, contrast) => {
  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
  r = contrastFactor * (r - 128) + 128;
  g = contrastFactor * (g - 128) + 128;
  b = contrastFactor * (b - 128) + 128;
  return [r, g, b];
};

Algorithm Description: :

コントラストアルゴリズムは、現在のコントラスト値に依存する要因を使用します. This factor is applied to each color component (red, green, and blue), adjusting their brightness based on the contrast level.

Noise Slider

ちょっとした楽しみをしたい人にとっては、ノイズスライダーを追加しました. 画像にノイズを追加すると、ヴィンテージ写真効果を作成したり、画像をより「生き生き」させるのに役立ちます. この効果は、不完全さを隠したり、画像に芸術的な触れを加えるために使用されます.

How does the noise work?

ノイズスライダーは、画像の各ピクセルの色に適用されるランダム変動の量を制御することを可能にします. The higher the noise value, the greater the amount of random changes applied to the image.

画像にノイズが追加されると、各ピクセルのRGB値に小さな、ランダムな変異が導入され、この効果は微妙かつ顕著なものであり、適用されたノイズの量に応じて、画像によりテクストされた外観を与えるか、低解像度の古い写真の外観をシミュレートするのに役立ちます。

const applyNoise = (r, g, b, noise) => {
  r += Math.random() * noise - noise / 2;
  g += Math.random() * noise - noise / 2;
  b += Math.random() * noise - noise / 2;
  return [r, g, b];
};

Algorithm Description: :

指定された範囲内の各ピクセルにランダムな値が追加されます。これはランダムな色の変化の効果を生み出し、画像に騒々しいまたは灰色の外観を与えます。私たちのケースでは、実際のフィルムの穀物や騒音とは何の関係もない歪みをシミュレートしています。ソニー・エリクソン W810)は同じ原則に基づいて活動している。

騒音の量を制御することで、ユーザーは異なる強度レベルで実験し、様々な創造的な効果を達成したり、写真の不完全さをシミュレートすることができます。

そして、もちろん、すべてのフィルターをクリアし、元の画像に戻るためにリセット設定ボタンを追加しました。

私たちの記事を通して、我々は色の訂正の基礎を掘り起こし、それを適用するためのさまざまなツールと技術を探索してきました。我々は、色パレットを抽出し、調整する方法、コントラスト、飽和、騒音の効果、およびさまざまな色モデル - RGB、LAB、HSVと働く方法を調べました。

色の訂正はイメージ処理の重要な側面であり、視覚的感覚を向上させ、特定の要素を強調し、色の調和を達成することを可能にします。

色とコントラストの調整は、画像の外観に影響を与えるだけでなく、それがどのように認識されるかにも影響を与えるということは重要です。