मी अलीकडेच माझ्या वेबसाइटवर नवीन थीम आणि अग्रगण्य पात्रांच्या गटासह ॲनिमेटेड ग्राफिक्स रिफ्रेश केले आहेत, मी या मालिकेत सामायिक केलेल्या अनेक तंत्रांचा सराव केला आहे. माझ्या काही ॲनिमेशनचे स्वरूप बदलते जेव्हा कोणीतरी त्यांच्याशी संवाद साधते किंवा दिवसाच्या वेगवेगळ्या वेळी.
माझ्या ब्लॉगच्या पानांवरील ग्राफिकमधील रंग दररोज सकाळपासून रात्रीपर्यंत बदलतात. त्यानंतर, स्नो मोड आहे, जो थंड रंग आणि हिवाळ्यातील थीम जोडतो, आच्छादन स्तर आणि मिश्रण मोडच्या सौजन्याने.
यावर काम करत असताना, प्रक्रिया सुलभ करताना CSS सापेक्ष रंग मूल्ये मला अधिक नियंत्रण देऊ शकतात की नाही याबद्दल मला आश्चर्य वाटू लागले. टीप: या ट्युटोरियलमध्ये, मी सापेक्ष रंग मूल्यांवर आणि थीमिंग ग्राफिक्स आणि ॲनिमेशनसाठी ओकेएलसीएच कलर स्पेसवर लक्ष केंद्रित करेन. जर तुम्हाला सापेक्ष रंगात खोलवर जायचे असेल, तर अहमद शादेद यांनी एक उत्कृष्ट संवादात्मक मार्गदर्शक तयार केला आहे. कलर स्पेस, गॅमट्स आणि ओकेएलसीएच बद्दल, आमच्या स्वतःच्या जिऑफ ग्रॅहमने त्यांच्याबद्दल लिहिले.
घटकांचा वारंवार वापर करणे महत्त्वाचे होते. जेव्हा शक्य असेल तेव्हा पार्श्वभूमी पुन्हा वापरली गेली, झूम आणि आच्छादन समान कलाकृतीतून नवीन दृश्ये तयार करण्यात मदत करतात. हे आवश्यकतेतून जन्माला आले, परंतु वैयक्तिक दृश्यांऐवजी मालिकेच्या दृष्टीने विचार करण्यास प्रोत्साहन दिले. कलर पॅलेट मॅन्युअली अपडेट करताना समस्या चला थेट माझ्या आव्हानाकडे जाऊया. यासारख्या टून टायटल्समध्ये — 1959 च्या योगी बेअर शो भागावर आधारित “लुलाबी-बाय बेअर” — आणि माझे काम सर्वसाधारणपणे, पॅलेट काही निवडक रंगांपुरते मर्यादित आहेत.
अधिक रंगछटा न जोडता पॅलेटचा विस्तार करण्यासाठी मी ज्याला माझा “फाउंडेशन” रंग म्हणतो त्यापासून मी शेड्स आणि टिंट्स तयार करतो.
स्केचमध्ये, मी एचएसएल कलर स्पेसमध्ये काम करतो, त्यामुळे या प्रक्रियेमध्ये माझ्या फाउंडेशन कलरचे लाइटनेस व्हॅल्यू वाढवणे किंवा कमी करणे समाविष्ट आहे. प्रामाणिकपणे, हे कठीण काम नाही - परंतु भिन्न पाया रंग निवडण्यासाठी शेड्स आणि टिंट्सचा संपूर्ण नवीन संच तयार करणे आवश्यक आहे. ते स्वहस्ते करणे, पुन्हा पुन्हा, पटकन कष्टदायक बनते.
मी HSL — H (रंग), S (संपृक्तता) आणि L (हलकीपणा) — रंगाच्या जागेचा उल्लेख केला आहे, परंतु रंग वर्णन करण्याच्या अनेक पद्धतींपैकी हा एक आहे. RGB — R (लाल), G (हिरवा), B (निळा) — कदाचित सर्वात परिचित आहे, किमान त्याच्या हेक्स स्वरूपात. LAB — L (लाइटनेस), A (हिरवा-लाल), B (निळा-पिवळा) — आणि नवीन, पण आता मोठ्या प्रमाणावर समर्थित LCH — L (लाइटनेस), C (क्रोमा), H (ह्यू) — मॉडेल त्याच्या OKLCH स्वरूपात आहे. LCH सह — विशेषत: CSS मध्ये OKLCH — मी माझ्या फाउंडेशन कलरचे लाइटनेस व्हॅल्यू समायोजित करू शकतो.
किंवा मी त्याचा क्रोमा बदलू शकतो. एलसीएच क्रोमा आणि एचएसएल संपृक्तता दोन्ही रंगाच्या तीव्रतेचे किंवा समृद्धीचे वर्णन करतात, परंतु ते वेगवेगळ्या प्रकारे करतात. LCH मला विस्तृत श्रेणी आणि रंगांमध्ये अधिक अंदाज लावता येण्याजोगे मिश्रण देते.
समान हलकेपणा आणि क्रोमा मूल्ये सामायिक करणाऱ्या रंगांचे पॅलेट तयार करण्यासाठी मी रंगछटा देखील बदलू शकतो. एचएसएल आणि एलसीएच दोन्हीमध्ये, ह्यू स्पेक्ट्रम लाल रंगापासून सुरू होतो, हिरव्या आणि निळ्यामधून फिरतो आणि लाल रंगात परत येतो.
मी रंगाबद्दल कसा विचार करतो हे ओकेएलसीएचने का बदलले OKLCH कलर स्पेससाठी ब्राउझर समर्थन आता व्यापक आहे, जरी डिझाइन टूल्स — स्केचसह — पकडले गेले नाहीत. सुदैवाने, ते तुम्हाला OKLCH वापरण्यापासून थांबवू नये. ब्राउझर तुमच्यासाठी हेक्स, एचएसएल, लॅब आणि आरजीबी व्हॅल्यूज ओकेएलसीएचमध्ये आनंदाने रूपांतरित करतील. तुम्ही हेक्ससह कोणत्याही जागेत फाउंडेशन कलरसह CSS कस्टम गुणधर्म परिभाषित करू शकता: /* पाया रंग */ --फाउंडेशन: #5accd6;
यातून मिळवलेले कोणतेही रंग आपोआप OKLCH मध्ये रूपांतरित केले जातील: --foundation-light: oklch(var(--foundation) पासून [...]; } --foundation-mid: oklch(var(--foundation) पासून [...]; } --फाउंडेशन-डार्क: oklch(var(--foundation) [...]; }
डिझाइन सिस्टम म्हणून सापेक्ष रंग सापेक्ष रंगाचा विचार करा: "हा रंग घ्या, त्यात बदल करा, नंतर मला निकाल द्या." रंग समायोजित करण्याचे दोन मार्ग आहेत: परिपूर्ण बदल आणि आनुपातिक बदल. ते कोडमध्ये सारखेच दिसतात, परंतु एकदा तुम्ही फाउंडेशनचे रंग बदलायला सुरुवात केलीत की ते अगदी वेगळ्या पद्धतीने वागतात. हा फरक समजून घेणे म्हणजे सापेक्ष रंग वापरून सिस्टीममध्ये बदलू शकतो. /* पाया रंग */ --फाउंडेशन: #5accd6;
उदाहरणार्थ, माझ्या फाउंडेशन रंगाचे लाइटनेस मूल्य 0.7837 आहे, तर गडद आवृत्तीचे मूल्य 0.5837 आहे. फरकाची गणना करण्यासाठी, मी उच्च मूल्यामधून कमी मूल्य वजा करतो आणि कॅल्क() फंक्शन वापरून निकाल लागू करतो: --फाऊंडेशन-डार्क: oklch(var(--foundation) पासून calc(l - 0.20) c h);
फिकट रंग मिळविण्यासाठी, मी त्याऐवजी फरक जोडतो: --फाउंडेशन-लाइट: oklch(var(--foundation) पासून calc(l + 0.10) c h);
क्रोमासमायोजन समान प्रक्रियेचे अनुसरण करतात. माझ्या पाया रंगाची तीव्रता 0.1035 वरून 0.0035 पर्यंत कमी करण्यासाठी, मी एक मूल्य दुसऱ्यापासून वजा करतो: oklch(var(--foundation) पासून l कॅल्क(c - 0.10) h);
रंगछटांचे पॅलेट तयार करण्यासाठी, मी माझ्या फाउंडेशन कलर (200) आणि माझ्या नवीन रंग (260) च्या ह्यू व्हॅल्यूमधील फरक मोजतो: oklch(var(--foundation) पासून l c कॅल्क(h + 60));
ती गणना निरपेक्ष आहेत. जेव्हा मी निश्चित रक्कम वजा करतो, तेव्हा मी प्रभावीपणे म्हणतो, "नेहमी इतके वजा करा." निश्चित मूल्ये जोडताना हेच लागू होते: कॅल्क (c - 0.10) कॅल्क(c + ०.१०)
मी या दृष्टिकोनाच्या मर्यादा कठीण मार्गाने शिकलो. जेव्हा मी फिक्स्ड क्रोमा व्हॅल्यू वजा करण्यावर अवलंबून होतो, तेव्हा मी फाउंडेशन बदलल्याबरोबर रंग राखाडी रंगात कोसळले. एका रंगासाठी काम करणारे पॅलेट दुसऱ्या रंगासाठी वेगळे पडले. गुणाकार वेगळ्या पद्धतीने वागतो. जेव्हा मी क्रोमा गुणाकार करतो, तेव्हा मी ब्राउझरला सांगतो: "या रंगाची तीव्रता एका प्रमाणात कमी करा." पाया बदलला तरीही रंगांमधील संबंध अबाधित राहतो: कॅल्क(c * ०.१०)
माय मूव्ह इट, स्केल इट, रोटेट इट रुल्स
हलकेपणा हलवा (जोडा किंवा वजा), स्केल क्रोमा (गुणाकार), रंग फिरवा (अंश जोडा किंवा वजा करा).
मी क्रोमा स्केल करतो कारण मला मूळ रंगाच्या प्रमाणात तीव्रतेत बदल हवे आहेत. ह्यू रिलेशनशिप रोटेशनल आहेत, त्यामुळे रंगाचा गुणाकार करण्यात काही अर्थ नाही. लाइटनेस इंद्रियज्ञ आणि निरपेक्ष आहे — त्याचा गुणाकार केल्याने अनेकदा विषम परिणाम मिळतात.
एका रंगापासून संपूर्ण थीमपर्यंत सापेक्ष रंग मला फाउंडेशन रंग परिभाषित करण्यास आणि मला आवश्यक असलेले प्रत्येक रंग तयार करण्यास अनुमती देतो — फिल्स, स्ट्रोक, ग्रेडियंट स्टॉप्स, शॅडो — त्यातून. त्या वेळी, रंग पॅलेट बनणे थांबवते आणि एक प्रणाली बनू लागते. SVG चित्रे फिल्स, स्ट्रोक आणि ग्रेडियंटमध्ये समान काही रंगांचा पुन्हा वापर करतात. सापेक्ष रंग तुम्हाला ते संबंध एकदा परिभाषित करू देतो आणि त्यांचा सर्वत्र पुन्हा वापर करू देतो — जसे की ॲनिमेटर्सने नवीन दृश्ये तयार करण्यासाठी पार्श्वभूमीचा पुनर्वापर केला.
फाउंडेशनचा रंग एकदा बदला, आणि प्रत्येक व्युत्पन्न रंग आपोआप अपडेट होतो, हाताने काहीही पुनर्गणना न करता. ॲनिमेटेड ग्राफिक्सच्या बाहेर, बटणे आणि लिंक्स सारख्या परस्परसंवादी घटकांच्या स्थितीसाठी रंग परिभाषित करण्यासाठी मी हाच दृष्टिकोन वापरू शकतो. मी माझ्या “लुलाबी-बाय बेअर” टून शीर्षकामध्ये वापरलेला पाया रंग निळसर दिसणारा आहे. पार्श्वभूमी माझ्या पाया आणि गडद आवृत्ती दरम्यान एक रेडियल ग्रेडियंट आहे.
पूर्णपणे भिन्न मूडसह पर्यायी आवृत्त्या तयार करण्यासाठी, मला फक्त पाया रंग बदलण्याची आवश्यकता आहे: --फाउंडेशन: #5accd6; --ग्रॅड-एंड: var(--फाउंडेशन); --ग्रॅड-स्टार्ट: oklch(var(--foundation) पासून calc(l - 0.2357) calc(c * 0.833) h);
रंग मूल्यांची डुप्लिकेट न करता त्या सानुकूल गुणधर्मांना माझ्या SVG ग्रेडियंटमध्ये बांधण्यासाठी, मी हार्ड-कोडेड स्टॉप-कलर मूल्ये इनलाइन शैलींसह बदलली:
पुढे, मला हे सुनिश्चित करणे आवश्यक आहे की माझा टून मजकूर मी निवडलेल्या कोणत्याही फाउंडेशन रंगाशी नेहमीच विरोधाभास करतो. 180deg ह्यू रोटेशन एक पूरक रंग तयार करतो जो नक्कीच पॉप करतो — परंतु अस्वस्थपणे कंपन करू शकतो: .text-light { भरा: oklch(var(--foundation) पासून l c कॅल्क(h + 180)); }
90° शिफ्ट पूर्णपणे पूरक न होता ज्वलंत दुय्यम रंग तयार करते: .text-light { भरा: oklch(var(--foundation) पासून l c कॅल्क(h - 90)); }
Quick Draw McGraw च्या 1959 Toon शीर्षक “El Kabong” चे माझे मनोरंजन समान तंत्र वापरते परंतु अधिक वैविध्यपूर्ण पॅलेटसह. उदाहरणार्थ, फाउंडेशनचा रंग आणि गडद सावली यांच्यामध्ये आणखी एक रेडियल ग्रेडियंट आहे.
पार्श्वभूमीतील इमारत आणि झाड एकाच पाया रंगाच्या वेगवेगळ्या छटा आहेत. त्या पथांसाठी, मला दोन अतिरिक्त रंग भरण्याची आवश्यकता आहे: .bg-मध्य { भरा: oklch(var(--foundation) पासून calc(l - 0.04) calc(c * 0.91) h); }
.bg-गडद { भरा: oklch(var(--foundation) पासून calc(l - 0.12) calc(c * 0.64) h); }
जेव्हा पाया हलू लागतो
आतापर्यंत, मी जे काही दाखवले आहे ते स्थिर आहे. फाउंडेशनचा रंग बदलण्यासाठी जेव्हा कोणी कलर पिकर वापरतो तेव्हाही तो बदल लगेच होतो. परंतु ॲनिमेटेड ग्राफिक्स क्वचितच स्थिर राहतात — सुगावा नावात आहे. म्हणून, जर रंग प्रणालीचा भाग असेल, तर ते देखील सजीव होऊ शकत नाही असे कोणतेही कारण नाही.
फाउंडेशन कलर ॲनिमेट करण्यासाठी, मला प्रथम त्याच्या OKLCH चॅनेलमध्ये विभाजित करणे आवश्यक आहे- हलकीपणा, क्रोमा आणि रंग. पण एक महत्त्वाची अतिरिक्त पायरी आहे: मला ती मूल्ये टाइप केलेल्या सानुकूल गुणधर्मांप्रमाणे नोंदवायची आहेत. पण याचा अर्थ काय?
डीफॉल्टनुसार, सीएसएस कस्टम गुणधर्म मूल्य रंग, लांबी, संख्या किंवा इतर काहीतरी पूर्णपणे दर्शवते की नाही हे ब्राउझरला कळत नाही. याचा अर्थ असा होतो की ॲनिमेशन दरम्यान ते सहजतेने इंटरपोलेट केले जाऊ शकत नाहीत आणि एका मूल्यावरून दुसऱ्या मूल्यावर जा.
सानुकूल मालमत्तेची नोंदणी करणे ब्राउझरला ते कोणत्या मूल्याचे प्रतिनिधित्व करते आणि कालांतराने कसे वागले पाहिजे हे सांगते. या प्रकरणात, मला ब्राउझरने माझ्या कलर चॅनेलला क्रमांक म्हणून हाताळायचे आहे जेणेकरुन ते सहजतेने ॲनिमेट करता येतील.
@property --f-l {
वाक्यरचना: "
@property --f-c {
वाक्यरचना: "
@property --f-h {
वाक्यरचना: "
एकदा नोंदणी केल्यानंतर, हे सानुकूल गुणधर्म मूळ CSS प्रमाणे वागतात. ब्राउझर त्यांना फ्रेम-बाय-फ्रेम इंटरपोलेट करू शकतो. मी नंतर त्या चॅनेलवरून पाया रंग पुन्हा तयार करतो: --फाउंडेशन: oklch(var(--f-l) var(--f-c) var(--f-h));
यामुळे पायाचा रंग इतर अंकीय मूल्याप्रमाणेच ॲनिमेटेबल बनतो. येथे एक साधे "श्वास घेणे" ॲनिमेशन आहे जे कालांतराने हलकेपणा बदलते: @keyframes श्वास घेते { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { ॲनिमेशन: 10s सहज-इन-आउट अनंत श्वास घ्या; }
फिल, ग्रेडियंट आणि स्ट्रोकमधील इतर प्रत्येक रंग --foundation मधून घेतलेला असल्यामुळे, ते सर्व एकत्र ॲनिमेट करतात आणि काहीही मॅन्युअली अपडेट करण्याची गरज नाही. एक ॲनिमेटेड रंग, अनेक प्रभाव या प्रक्रियेच्या सुरूवातीस, मला आश्चर्य वाटले की CSS सापेक्ष रंग मूल्ये अधिक शक्यता देऊ शकतात आणि त्यांना अंमलबजावणी करणे सोपे करते. मी अलीकडेच माझ्या वेबसाइटच्या संपर्क पृष्ठावर नवीन सोन्याची खाण पार्श्वभूमी जोडली आहे आणि पहिल्या पुनरावृत्तीमध्ये चमकणारे आणि स्विंग करणारे तेल दिवे समाविष्ट आहेत.
मला हे एक्सप्लोर करायचे होते की CSS सापेक्ष रंग ॲनिमेट करून खाणीच्या आतील भागात दिव्यांच्या रंगांनी टिंट करून ते अधिक वास्तववादी कसे बनवू शकतात. खऱ्या प्रकाशाप्रमाणे त्यांनी आजूबाजूच्या जगावर प्रभाव टाकावा अशी माझी इच्छा होती. म्हणून, अनेक रंग ॲनिमेट करण्याऐवजी, मी एक लहान प्रकाश व्यवस्था तयार केली जी फक्त एका रंगाला ॲनिमेट करते.
माझे पहिले कार्य पार्श्वभूमी आणि माझे दिवे दरम्यान एक आच्छादन स्तर स्लॉट करणे होते: <मार्ग id="आच्छादन" fill="var(--ओव्हरले-टिंट)" [...] style="mix-blend-mode: color" />
मी मिक्स-ब्लेंड-मोड वापरला: रंग कारण अंतर्निहित ल्युमिनेन्स जतन करताना त्याखाली काय आहे ते टिंट करते. ॲनिमेशन चालू असताना आच्छादन केवळ दृश्यमान असावे असे मला वाटते, मी आच्छादन निवडले: .svg-mine #overlay { प्रदर्शन: काहीही नाही; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { डिस्प्ले: ब्लॉक; अस्पष्टता: 0.5; } }
आच्छादन जागेवर होते, परंतु अद्याप दिव्यांना जोडलेले नाही. मला प्रकाश स्रोत हवा होता. माझे दिवे सोपे आहेत आणि प्रत्येकामध्ये एक वर्तुळ घटक आहे जो मी फिल्टरने अस्पष्ट केला आहे. फिल्टर संपूर्ण वर्तुळावर अतिशय मऊ अस्पष्टता निर्माण करतो.
आच्छादन आणि दिवे स्वतंत्रपणे ॲनिमेट करण्याऐवजी, मी सिंगल "फ्लेम" कलर टोकन ॲनिमेट करतो आणि त्यापासून इतर सर्व काही मिळवतो. प्रथम, मी ओकेएलसीएच चॅनेलसाठी तीन टाइप केलेल्या सानुकूल गुणधर्मांची नोंदणी करतो:
@property --fl-l {
वाक्यरचना: "
मी ते चॅनेल ॲनिमेटेड केले, मुद्दाम काही फ्रेम नारंगीकडे ढकलले जेणेकरून फ्लिकर फायरलाइट म्हणून स्पष्टपणे वाचेल:
@keyframes ज्वाला { 0%, 100% { --fl-l: 0.86; --fl-c: 0.12; --fl-h: 95; } 6% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 92; } 12% { --fl-l: 0.83; --fl-c: 0.14; --fl-h: 100; } 18% { --fl-l: 0.88; --fl-c: 0.11; --fl-h: 94; } 24% { --fl-l: 0.82; --fl-c: 0.16; --fl-h: 82; } 30% { --fl-l: 0.90; --fl-c: 0.12; --fl-h: 90; } 36% { --fl-l: 0.79; --fl-c: 0.17; --fl-h: 76; } 44% { --fl-l: 0.87; --fl-c: 0.12; --fl-h: 96; } 52% { --fl-l: 0.81; --fl-c: 0.15; --fl-h: 102; } 60% { --fl-l: 0.89; --fl-c: 0.11; --fl-h: 93; } 68% { --fl-l: 0.83; --fl-c: 0.16; --fl-h: 85; } 76% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 91; } 84% { --fl-l: 0.85; --fl-c: 0.14; --fl-h: 98; } ९२% {--fl-l: 0.80; --fl-c: 0.17; --fl-h: 74; } }
मग मी ते ॲनिमेशन SVG ला स्कोप केले, त्यामुळे सामायिक व्हेरिएबल्स दोन्ही दिवे आणि माझ्या आच्छादनासाठी उपलब्ध आहेत:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { ॲनिमेशन: फ्लेम 3.6s अनंत रेखीय; isolation: अलग ठेवणे;
/* ॲनिमेटेड चॅनेलवरून फ्लेम कलर तयार करा */ --flame: oklch(var(-fl-l) var(-fl-c) var(--fl-h));
/* दिव्याचा रंग ज्योतीपासून प्राप्त होतो */ --लॅम्प-कोर: oklch(var(--flame) calc(l + 0.05) calc(c * 0.70) h पासून);
/* त्याच ज्योतीपासून काढलेले आच्छादन टिंट */ --overlay-tint: oklch(var(--flame) पासून calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
शेवटी, मी ते व्युत्पन्न रंग चमकणारे दिवे आणि आच्छादनांवर लागू केले: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > वर्तुळ, .svg-mine[data-animations=on] #mine-lamp-2 > मंडळ { भरा: var(--दिवा-कोर); }
.svg-mine[data-animations=on] #overlay { डिस्प्ले: ब्लॉक; भरा: var(--ओव्हरले-टिंट); अस्पष्टता: 0.5; } }
जेव्हा ज्योत नारंगीकडे सरकते, तेव्हा दिवे गरम होतात आणि दृश्य त्यांच्याबरोबर गरम होते. जेव्हा ज्योत थंड होते तेव्हा सर्वकाही एकत्र होते. सर्वात चांगली गोष्ट म्हणजे काहीही हाताने लिहिलेले नाही. जर मी फाउंडेशनचा रंग बदलला किंवा फ्लेम ॲनिमेशन रेंजमध्ये बदल केला, तर संपूर्ण प्रकाश व्यवस्था एकाच वेळी अपडेट होते. तुम्ही माझ्या वेबसाइटवर अंतिम निकाल पाहू शकता. पुन्हा वापरणे, पुन्हा वापरणे, पुन्हा पाहणे त्या हॅना-बार्बेरा ॲनिमेटर्सना आवश्यकतेनुसार घटक पुन्हा वापरण्यास भाग पाडले गेले, परंतु मी रंग पुन्हा वापरतो कारण ते माझे काम अधिक सुसंगत आणि देखरेख करणे सोपे करते. CSS सापेक्ष रंग मूल्ये मला याची अनुमती देतात:
एकच पाया रंग परिभाषित करा, इतर रंग त्याच्याशी कसे संबंधित आहेत याचे वर्णन करा, त्या संबंधांचा सर्वत्र पुन्हा वापर करा, आणि एक मूल्य बदलून सिस्टम ॲनिमेट करा.
सापेक्ष रंग केवळ थीमिंग सुलभ करत नाही. हे विचार करण्याच्या पद्धतीला प्रोत्साहन देते जेथे रंग, जसे की गती, हेतुपुरस्सर आहे — आणि जेथे एक मूल्य बदलल्याने त्याखाली काम पुन्हा न लिहिता संपूर्ण दृश्य बदलू शकते.
