😲 🔣 🤰🏿 और मैं आपको ग्रेडिएंट के बारे में बताता हूँ! 🧑🏽‍🤝‍🧑🏼 🕶️ 🚬

अंतिम परिणाम की स्क्रीन

इस लेख में, मैं बात करता हूं कि मैंने अपनी व्यक्तिगत बाइक का आविष्कार कैसे किया, जो कि फ़ोटोशॉप में लगभग ढाल जैसा है। मैं आपको तुरंत चेतावनी देता हूं, एल्गोरिथ्म बहुत धीमा और अडॉप्टेड है। अनुकूलन और कुछ लोकप्रिय ढाल एल्गोरिथ्म पर विचार करना जो मैं लेख के दूसरे भाग में करने जा रहा हूं

क्यों?

किसी तरह, मैं ग्रेडिएंट्स के एक सॉफ्टवेयर रेंडरिंग को लागू करना चाहता था जो फ़ोटोशॉप के समान हो। मेरे पास कोई विशिष्ट लक्ष्य नहीं था, इसलिए, शाम के लिए एक दिलचस्प कार्य। जावा को भाषा के रूप में चुना गया था। एक महत्वपूर्ण विचार यह था कि मैं इस एल्गोरिथ्म को अपने दम पर लिखना चाहता था, बिना दूसरे लोगों के एल्गोरिदम में झाँके।

क्या होना चाहिए था

DrawGradient () विधि निम्नानुसार काम करना चाहिए: हम दो बिंदुओं के निर्देशांक और रंगों को सेट करते हैं, जिसके बाद पूरी छवि पर एक ढाल खींचा जाता है। कुछ इस तरह:

इस आकृति में, बिंदु A में निर्देशांक (55; 20) और रंग 0xff2e2e2e है, और बिंदु B में निर्देशांक (175, 180) और रंग 0xffb5b5b5 है। यह मत भूलो कि मूल ऊपरी बाएं कोने में है, और वाई अक्ष नीचे निर्देशित है।

समझना शुरू करो

एक संदर्भ के रूप में, मैंने पिछले स्क्रीनशॉट से फ़ोटोशॉप से ग्रेडिएंट लिया। जैसा कि आप देख सकते हैं, ढाल में तीन भाग होते हैं:

लाल भाग को बिंदु A के रंग से भरा जाना चाहिए, हरे भाग को बिंदु B से भरा जाना चाहिए, और शेष क्षेत्र के प्रत्येक पिक्सेल के रंग की गणना लाइनों से c और d की दूरी के आधार पर की जानी चाहिए।

मुझे लगता है कि यह स्पष्ट है कि हमें एक एल्गोरिथ्म की आवश्यकता है जो किसी भी पिक्सेल से लाइनों सी और डी तक की दूरी का निर्धारण करेगा। आपको यह निर्धारित करने के लिए भी एक तरीका चाहिए कि कौन सा पिक्सेल "रेड" क्षेत्र में है, जो "ग्रीन" क्षेत्र में है, और जो शेष क्षेत्र में है।

स्कूल ज्यामिति पाठ्यक्रम को याद करें और एक यादृच्छिक पिक्सेल E के लिए निम्न चित्रण बनाएं:

इस आंकड़े में, AF पिक्सेल E से लाइन A की दूरी है। और, तदनुसार, एफबी लाइन बी की दूरी है। यह इन दूरी है जो पिक्सेल के रंग को निर्धारित करेगा। और फिर यह निर्धारित करने की समस्या है कि पिक्सेल किस क्षेत्र से जुड़ा है। यहां सब कुछ बहुत सरल है। यदि AF + FB> AB, तो पिक्सेल लाल या हरे क्षेत्र में स्थित है। यह निर्धारित करने के लिए कि एएफ और एफबी में से किस की तुलना करें। यदि AF> FB, तो पिक्सेल ग्रीन ज़ोन में है, अन्यथा लाल रंग में। यहां गणित है।

तो, हमारा काम वायुसेना और बीएफ को ढूंढना है। हम वायुसेना पर ध्यान केंद्रित करते हैं, पाइथागोरस प्रमेय द्वारा यह पता चलता है कि:

इसलिए, हम समान पाइथागोरस प्रमेय से लंबाई का वर्ग AE सीख सकते हैं, क्योंकि हम जानते हैं कि अंक A और E. के निर्देशांक इस प्रकार हैं:

यह केवल ईएफ को खोजने के लिए बनी हुई है। यह थोड़ा कठिन है, लेकिन यह ठीक है। चूँकि हमारा खंड EF त्रिभुज की ऊँचाई है, जो AB की ओर नीचा है, ऊँचाई खोजने का सूत्र हमारी सहायता करेगा। यह इस तरह दिखता है:

और पी सबसे भ्रामक चीजों में से एक है। यह एक परिधि नहीं है, बल्कि एक अर्ध-परिधि है। मुझे याद है कि मैंने कई बार स्कूल में इस बारे में फेल किया। ऐसा माना जाता है:

हम एबी और ईबी की गणना उसी तरह करते हैं जैसे कि निर्देशांक के आधार पर एई -।

तो, वायुसेना गणना एल्गोरिदम एक नज़र में है:
1. हम एई, ईबी और एबी की गणना करते हैं
2. हम पी की गणना करते हैं
3. ईएफ की गणना करें
4. हम वायुसेना की गणना करते हैं

बीएफ के लिए एल्गोरिथ्म समान है, मैं इसका वर्णन नहीं करूंगा।

यह चारों ओर पाने का समय है!

मैंने एक वर्ग बनाने का फैसला किया, जो बफ़रमैडम के लिए एक रैपर का प्रतिनिधित्व करता है, आइए इसे एडिटेबलमैज कहते हैं। और इस वर्ग में, मेरे अनुमानों के अनुसार, निम्न विधियाँ होनी चाहिए:

EditableImage(int width, int height); // void clear(int color); //       void drawGradient(int x1, int y1, int color1, int x2, int y2, int color2); //    BufferedImage getImage(); //

इसके बाद, मेरे कोड के सभी रंग int के रूप में सेट किए गए हैं, जिसमें निम्न रूप हैं:

 0xAARRGGBB AA -   (   32    ) RR -    GG -    BB -

कक्षा के साथ यह विचार सुविधाजनक है कि अगर मैं बाद में ढाल के अलावा कुछ अन्य चिप्स को लागू करना चाहता हूं, तो यह करना आसान होगा।

आइए सहायक टुकड़ों से शुरू करें जो कि ढाल से संबंधित नहीं हैं

Gradient.java - कार्यक्रम प्रवेश बिंदु

 package ru.idgdima.gradient; import javax.swing.*; public class Gradient { public static final int IMG_WIDTH = 640; public static final int IMG_HEIGHT = 480; private static GradientPanel panel; //,      public static void main(String[] args) { // ,          //   JFrame frame = new JFrame("Test"); frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE); frame.setResizable(false); //     ,    , //     ,     //     panel = new GradientPanel(IMG_WIDTH, IMG_HEIGHT); frame.add(panel); frame.pack(); frame.setLocationRelativeTo(null); frame.setVisible(true); } }

GradientPanel.java - पैनल जिस पर ग्रेडिएंट प्रदर्शित किया जाएगा

 package ru.idgdima.gradient; import javax.swing.*; import java.awt.*; import java.awt.image.BufferedImage; public class GradientPanel extends JPanel { private BufferedImage image; public GradientPanel(int width, int height) { //       super(); setPreferredSize(new Dimension(width, height)); // ,    ,  //        BufferedImage   //    EditableImage gradientImage = new EditableImage(width, height); gradientImage.clear(0xff000000); gradientImage.drawGradient(55, 20, 0xff2e2e2e, 175, 180, 0xffb5b5b5); image = gradientImage.getImage(); } @Override protected void paintComponent(Graphics g) { super.paintComponent(g); //     .     // : g.drawImage(image, 0, 0, null); } }

EditableImage.java - सबसे दिलचस्प वर्ग, ग्रेडिएंट के लिए विधि अभी भी खाली है

 package ru.idgdima.gradient; import java.awt.image.BufferedImage; public class EditableImage { private int width; private int height; private int[] rgb; //        BufferedImage image; //       getImage public EditableImage(int width, int height) { this.width = width; this.height = height; rgb = new int[width * height]; //    //       getImage image = new BufferedImage(width, height, BufferedImage.TYPE_4BYTE_ABGR); } /** *        * @param color   */ public void clear(int color) { for (int i = 0; i < rgb.length; i++) { rgb[i] = color; } } /** *     * @return */ public BufferedImage getImage() { //    rgb  image image.setRGB(0, 0, width, height, rgb, 0, width); return image; } public void drawGradient(int x1, int y1, int color1, int x2, int y2, int color2) { //  } }

यह कार्यक्रम पहले से ही इस स्तर पर संकलित किया जा सकता है, लेकिन यह हमें सिर्फ एक काली तस्वीर दिखाएगा। यह ढाल के लिए एक विधि लिखने का समय है!

मुझे यह इस तरह मिला:

drawGradient

 public void drawGradient(int x1, int y1, int color1, int x2, int y2, int color2) { float dx = x1 - x2; //  float dy = y1 - y2; float AB = (float) Math.sqrt(dx * dx + dy * dy); //    //    for (int y = 0; y < height; y++) { for (int x = 0; x < width; x++) { dx = x1 - x; dy = y1 - y; float AE2 = dx * dx + dy * dy; float AE = (float) Math.sqrt(AE2); dx = x2 - x; dy = y2 - y; float EB2 = dx * dx + dy * dy; float EB = (float) Math.sqrt(EB2); float p = (AB + AE + EB) / 2f; float EF = 2 / AB * (float)Math.sqrt(Math.abs(p * (p - AB) * (p - AE) * (p - EB))) float EF2 = EF * EF; float AF = (float) Math.sqrt(Math.abs(AE2 - EF2)); float BF = (float) Math.sqrt(Math.abs(EB2 - EF2)); if (AF + BF - 0.1f > AB) { //        rgb[y * width + x] = AF < BF ? color1 : color2; } else { //   float progress = AF / AB; //  interpolate    rgb[y * width + x] = interpolate(color1, color2, progress); } } } } /** * @param num -  * @return 0,  num < 0; 255,  num > 255;    num */ private static int clip(int num) { return num <= 0 ? 0 : (num >= 255 ? 255 : num); }

कृपया ध्यान दें कि मैं मॉड्यूल फ़ंक्शन का उपयोग करता हूं - Math.abs () जहां कहीं भी कम से कम संभावना है कि एक नकारात्मक संख्या वर्गमूल फ़ंक्शन में गिर सकती है - Math.sqrt ()। अन्यथा, हमारे पास कलाकृतियां होंगी।

और इस पंक्ति में यदि आप हटाते हैं - 0.1f , यह सिर्फ एक भयानक गड़बड़ निकला। गणना त्रुटि के कारण, हमें एक छोटी संख्या को घटाना होगा:

 if (AF + BF - 0.1f > AB) {

यह केवल प्रक्षेप विधि को समझने के लिए बनी हुई है और बात टोपी में है। इसे प्रारंभिक रंग, अंतिम रंग और संख्या की प्रगति लेनी चाहिए, जो 0 से 1 तक हो सकती है और जो प्रत्येक रंग के अनुपात को निर्धारित करती है। उदाहरण के लिए, यदि प्रगति = 0, प्रारंभिक रंग वापस आ गया है, यदि प्रगति = 1 अंतिम रंग है, और यदि प्रगति = 0.5 प्रारंभिक और अंतिम के बीच का औसत रंग है। कार्य स्पष्ट है, विधि लिखी गई है:

लगाना

 private int interpolate(int color1, int color2, float progress) { //     int a1 = (color1 & 0xff000000) >>> 24; int r1 = (color1 & 0x00ff0000) >>> 16; int g1 = (color1 & 0x0000ff00) >>> 8; int b1 = color1 & 0x000000ff; int a2 = (color2 & 0xff000000) >>> 24; int r2 = (color2 & 0x00ff0000) >>> 16; int g2 = (color2 & 0x0000ff00) >>> 8; int b2 = color2 & 0x000000ff; //   float progress2 = (1 - progress); int newA = clip((int) (a1 * progress2 + a2 * progress)); int newR = clip((int) (r1 * progress2 + r2 * progress)); int newG = clip((int) (g1 * progress2 + g2 * progress)); int newB = clip((int) (b1 * progress2 + b2 * progress)); //     return (newA << 24) + (newR << 16) + (newG << 8) + newB; }

आइए परिणाम पर एक नज़र डालें!

पहले से ही खराब नहीं है, लेकिन हमारा उपयोग रैखिक प्रक्षेप का उपयोग करता है, और फ़ोटोशॉप में यह निश्चित रूप से कुछ अन्य उपयोग में है।

प्रक्षेप के बारे में

तस्वीर को ध्यान से देखें। बाईं ढाल हमारे एल्गोरिथ्म, दाईं ओर - फ़ोटोशॉप द्वारा तैयार की गई है। प्रत्येक पंक्ति में एक लाल बिंदु होता है। और रेखा जितनी गहरी होगी, बाईं ओर बिंदु:

जैसा कि आप देख सकते हैं, हमारी लाइन एक रेल की तरह सीधी है। इसे ठीक करने की जरूरत है। यहाँ मैंने कुछ भी समझदार नहीं किया और इंटरनेट पर जासूसी करने का फैसला किया। मुझे हब पर एक लेख मिला, जिसमें कुछ प्रकार के प्रक्षेप का वर्णन है, और यहां तक कि कोड है: habrahabr.ru/post/142592

ठीक है, हम कोसाइन प्रक्षेप को लागू करते हैं! सबसे पहले, EditableImage वर्ग में दो स्थिरांक जोड़ें:

 public static final int INTERPOLATION_LINEAR = 0; public static final int INTERPOLATION_COS = 1;

दूसरे, हम प्रक्षेप विधि को थोड़ा फिर से लिखते हैं ताकि इनमें से एक स्थिरांक को खिलाया जाए:

छिपा हुआ पाठ

 private int interpolate(int color1, int color2, float progress, int interpolation) { //     int a1 = (color1 & 0xff000000) >>> 24; int r1 = (color1 & 0x00ff0000) >>> 16; int g1 = (color1 & 0x0000ff00) >>> 8; int b1 = color1 & 0x000000ff; int a2 = (color2 & 0xff000000) >>> 24; int r2 = (color2 & 0x00ff0000) >>> 16; int g2 = (color2 & 0x0000ff00) >>> 8; int b2 = color2 & 0x000000ff; //   float f; if (interpolation == INTERPOLATION_LINEAR) { f = progress; } else if (interpolation == INTERPOLATION_COS) { float ft = progress * 3.1415927f; f = (1 - (float) Math.cos(ft)) * 0.5f; } else { throw new IllegalArgumentException(); } int newA = clip((int) (a1 * (1 - f) + a2 * f)); int newR = clip((int) (r1 * (1 - f) + r2 * f)); int newG = clip((int) (g1 * (1 - f) + g2 * f)); int newB = clip((int) (b1 * (1 - f) + b2 * f)); //     return (newA << 24) + (newR << 16) + (newG << 8) + newB; }

फिर, ड्रॉड्रिएड मेथड पैरामीटर्स की सूची में int interpolation करें और इंटरपोलेट मेथड कॉल लाइन में इस वेरिएबल को जोड़ें:

 rgb[y * width + x] = interpolate(color1, color2, progress , interpolation);

और अंत में, ग्रेडिएंटपैनल क्लास में, हम ड्रॉग्रेडिएंट को कॉल फिर से लिखते हैं, इसमें INTERPOLATION_COS जोड़ते हैं

यहाँ इस प्रक्षेप विधि के साथ क्या हुआ है:

हम्म, यह अच्छा लग रहा है, लेकिन फ़ोटोशॉप में लाइन स्पष्ट रूप से वह वक्र नहीं है। क्या करें? यह बहुत सीधा है, यह बहुत टेढ़ा है ... और अगर हम इन दो चरम सीमाओं के बीच में बनाते हैं तो क्या होगा?

महान विचार, निरंतर INTERPOLATION_COS_LINEAR = 2 जोड़ें

और इंटरपोलेट विधि के कोड में, यदि कोई और जोड़ें:

 } else if (interpolation == INTERPOLATION_COS_LINEAR) { float ft = progress * 3.1415927f; f = (progress + (1 - (float) Math.cos(ft)) * 0.5f) / 2f; }

और लो और निहारना, यह फ़ोटोशॉप से ग्रेडिएंट की लगभग पूरी नकल निकला!
अपने लिए देखें:

हमारा बायाँ।

और यहाँ शीर्ष स्क्रीनशॉट से दो चित्र हैं, एक में संयुक्त। यह देखा जा सकता है कि प्रक्षेप लगभग समान है, अंतर को गोलाई के दौरान त्रुटियों पर दोषी ठहराया जा सकता है:

हुर्रे, हमने फ़ोटोशॉप की तरह ढाल बनाया, हालांकि बहुत धीमा।
स्रोत और जार

यह वह जगह है जहां मैं पहला भाग समाप्त करता हूं। दूसरे भाग में, मैं एल्गोरिथ्म को शांत करने की कोशिश करूंगा जितना कि मैं कर सकता हूं। और मैं एक ढाल बनाने के लिए कुछ तैयार-किए गए अच्छी तरह से ज्ञात तेज एल्गोरिदम को लागू कर रहा हूं, और फिर मैं अपनी गति के साथ तुलना करूंगा।

वैसे, यदि आपके पास ड्रॉइंग ग्रेडिएंट्स के लिए तेज़ एल्गोरिदम को ध्यान में रखते हैं, तो उन्हें टिप्पणियों में छोड़ दें।