क्रिएटिव कोडिंग क्या है?
क्रिएटिव कोडिंग प्रोग्रामिंग से कला बनाना है: चित्र, एनिमेशन, ध्वनि, गेम या इंटरैक्टिव इंस्टॉलेशन। लक्ष्य अभिव्यक्ति है, कोई कारोबारी ऐप नहीं।
लोकप्रिय टूल: p5.js (ब्राउज़र में JavaScript), Processing (Java), Python turtle या pygame, और Scratch।
ज़्यादातर स्केच के दो भाग: setup() एक बार चलता है (कैनवस बनाना), draw() बार-बार, लगभग 60 बार प्रति सेकंड, जिससे एनिमेशन बनता है।
जनरेटिव आर्ट: कलाकार नियम लिखता है, कंप्यूटर चित्र बनाता है। एक संख्या बदलो, नई कृति।
कैनवस, निर्देशांक, रंग और आकृतियाँ
कैनवस पिक्सेल की जाली है। createCanvas(400, 300) से 400 चौड़ा, 300 ऊँचा। मूल बिंदु (0, 0) ऊपर-बाएँ; y नीचे बढ़ता है, गणित के ग्राफ़ से उल्टा।
point(x, y),line(x1, y1, x2, y2),rect(x, y, w, h),circle(x, y, d)fill(r, g, b)अंदर का रंग,stroke()किनारे का। हर मान 0–255। (0, 0, 0) काला, (255, 255, 255) सफ़ेद।- चौथी संख्या alpha पारदर्शिता तय करती है।
चर (variable) बदलने वाली संख्या रखता है: draw() में x = x + 2 गेंद चलाता है। शर्त if (x > width) x = 0 उसे वापस लाती है।
लूप, रैंडम और पैटर्न
for लूप गिनती के साथ दोहराता है: for (i = 0; i < 10; i++) circle(i*40, 100, 30) से 10 वृत्तों की पंक्ति। लूप के अंदर लूप (नेस्टेड) से n × n जाली।
random(a, b) a और b के बीच कोई संख्या देता है; जगह, आकार या रंग के लिए। सीड रैंडम क्रम को तय करता है ताकि वही चित्र दोबारा बने।
नॉइज़ (Perlin noise) चिकना रैंडम है, बादल, पहाड़ और प्राकृतिक हलचल के लिए।
पैटर्न छोटे बदलाव के साथ दोहराने से बनते हैं: हर बार थोड़ा घुमाओ, i से रंग बदलो।
फ़ंक्शन, रिकर्शन और फ्रैक्टल
फ़ंक्शन निर्देशों को एक नाम और पैरामीटर के साथ बाँधता है: flower(x, y, size) कई बार बनाओ।
पुनरावृत्ति (iteration) लूप से दोहराती है। रिकर्शन में फ़ंक्शन छोटे सवाल पर ख़ुद को बुलाता है। रुकने के लिए बेस केस ज़रूरी, नहीं तो अंत नहीं।
function branch(len, depth) {
line(0, 0, 0, -len); translate(0, -len)
if (depth > 0) {
rotate(a); branch(len*0.7, depth-1)
rotate(-2a); branch(len*0.7, depth-1)
}
}फ्रैक्टल हर पैमाने पर एक जैसा दिखता है: पेड़, फ़र्न, कोख स्नोफ्लेक, सियरपिंस्की त्रिभुज। गहराई d वाले द्विशाखी पेड़ में 2d − 1 शाखाएँ।
इवेंट, ऑब्जेक्ट, डेटा और इंस्टॉलेशन
इवेंट
इवेंट यानी कुछ घटना: mousePressed(), keyPressed(), स्लाइडर हिलना, आवाज़ तेज़ होना। प्रोग्राम एक फ़ंक्शन से जवाब देता है। इससे कला इंटरैक्टिव बनती है।
ऐरे और ऑब्जेक्ट
ऐरे कई मान रखता है: 100 बूँदों की 100 x-स्थितियाँ। क्लास एक नक्शा है (Drop: x, y, speed और fall() मेथड); हर बूँद एक ऑब्जेक्ट।
इमेज और वीडियो डेटा के रूप में
इमेज पिक्सेल का ऐरे है, हर पिक्सेल में RGB। हर पिक्सेल बदलकर फ़िल्टर: ग्रे = (r + g + b) / 3; उल्टा = 255 − मान। वेबकैम वीडियो हर सेकंड लगभग 30 नई इमेज है।
डेटा विज़ुअलाइज़ेशन
संख्याओं को आकृतियों में बदलो: महीने की बारिश को खंभों की ऊँचाई में।
सेंसर, API, GUI और इंस्टॉलेशन
माइक्रोकंट्रोलर (Arduino, micro:bit) प्रकाश या दूरी की रीडिंग स्केच को भेज सकता है। API इंटरनेट से ताज़ा डेटा, जैसे मौसम, लाता है। GUI स्लाइडर और बटन देता है। प्रोजेक्टर के साथ कमरे में लगाओ तो इंटरैक्टिव इंस्टॉलेशन।
करके देखो
p5.js वेब एडिटर खोलो और 10 × 10 वृत्तों की जाली बनाओ जिसका रंग mouseX पर निर्भर हो।
मुख्य सूत्र और परिभाषाएँ
- कैनवस: (0, 0) ऊपर-बाएँ, x → दाएँ, y → नीचे
- रंग: fill(r, g, b), हर एक 0–255
- नेस्टेड लूप: n × n आकृतियाँ
- ग्रे पिक्सेल = (r + g + b) / 3
- उल्टा रंग: नया = 255 − पुराना
- द्विशाखी फ्रैक्टल पेड़: शाखाएँ = 2^गहराई − 1
हल किए गए उदाहरण
1. 400 × 300 कैनवस पर बिंदु (400, 300) कहाँ है?
नीचे-दाएँ कोने में, क्योंकि x दाएँ और y नीचे बढ़ता है।
2. शुद्ध पीले रंग का RGB लिखो।
पीला = लाल + हरा प्रकाश: fill(255, 255, 0)।
3. यह कितने वृत्त बनाएगा? for (i = 0; i < 8; i++) for (j = 0; j < 5; j++) circle(i*50, j*50, 40)
बाहरी लूप 8 बार, अंदर वाला हर बार 5: 8 × 5 = 40 वृत्त।
4. रिकर्सिव पेड़ एक तने से शुरू, हर शाखा दो में बँटती, गहराई 5 तक। कुल शाखाएँ?
1 + 2 + 4 + 8 + 16 = 31 = 2⁵ − 1।
5. पिक्सेल (200, 100, 30) है। ग्रे मान और उल्टा रंग निकालो।
ग्रे = (200 + 100 + 30) / 3 = 110। उल्टा = (55, 155, 225)।
6. ऑब्जेक्ट से बारिश वाला स्केच कैसे बनाओगे?
class Drop { x, y, speed; fall() { y += speed; अगर y > height तो y = 0 } show() { line(x, y, x, y+10) } }। 200 बूँदों का ऐरे; draw() में हर बूँद पर fall() और show()।
आम गलतियाँ
- सोचना कि y गणित की तरह ऊपर बढ़ता है। कैनवस पर y नीचे बढ़ता है।
- बेस केस के बिना रिकर्शन लिखना। फ़ंक्शन ख़ुद को हमेशा बुलाता रहता है और प्रोग्राम क्रैश।
- background() को सिर्फ़ setup() में रखकर साफ़ एनिमेशन की उम्मीद करना। हर फ़्रेम साफ़ करने के लिए उसे draw() की शुरुआत में बुलाओ।
- 255 से ज़्यादा या 0 से कम रंग मान देना। वे काट दिए जाते हैं, रंग उम्मीद के मुताबिक नहीं बदलता।