8 चरणों में रैंडम कैट जेनरेटर

अच्छा समय, हेब्र!
मैं हमेशा बिल्लियों से प्यार करता था, और उन्हें आकर्षित करना पसंद करता था, खासकर बिल्ली का चेहरा। आप रूप, रेखा - और पूरी तरह से अलग अभिव्यक्ति, एक अलग मूड को थोड़ा बदल देंगे। मेरी ए 4 शीट को सीमा तक खींचा गया था। और यहाँ मैं हाल ही में सिर में चोट लगी थी - लेकिन क्या होगा अगर आप थूथन बिल्लियों का जनरेटर बनाते हैं? बटन पर क्लिक करने के लिए और आप एक यादृच्छिक बिल्ली का चेहरा बाहर फेंकते हैं। यथासंभव यादृच्छिक और दिलचस्प। आइए देखें कि इस तरह की चीज कैसे बनाई जाती है।
मैं एक बिल्ली, बिल्ली प्रेमियों के लिए पूछता हूं।

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

मैं केवल कुछ पूर्वनिर्धारित कार्य दूंगा, बस आगे की सुविधा के लिए, वे यहाँ हैं:

function add(func, scale){ Graphics.ctx.scale(scale.x, scale.y); func(Graphics.ctx); Graphics.ctx.scale(1, 1); } 

कैनवास का आकार बदलें, कुछ खींचें, इसे वापस लाएं।

 function drawircle(ctx, pos, radius, fillColor, strokeColor, lineWidth) { ctx.beginPath(); ctx.arc(center.x - pos.x, center.y + pos.y, radius, 0, 2*Math.PI, false); ctx.fillStyle = fillColor; ctx.fill(); ctx.lineWidth = lineWidth; ctx.strokeStyle = strokeColor; ctx.stroke(); } 

और यह वृत्त / मंडलियाँ बना रहा है। इसके अलावा कुछ खास नहीं है, यह सब हब पर और कहीं भी लाखों बार पढ़ा जा सकता है, आइए जल्द ही बिल्लियों को समझाएं!

चरण 1 - सिर

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

 //   var radius = Math.sRandom(60, 70); //  var scaleCircle = {x:Math.sRandom(1,1.1),y:Math.sRandom(0.9,1.0)}; //  var whiteColor = "#fff"; var blackColor = "#000"; // add(function(ctx){ // (Math.sRandom(0, 100) < 95 ? blackColor : whiteColor) -  , , ,   , ..    . ,   . drawircle(ctx, {x:0,y:0}, radius, whiteColor, (Math.sRandom(0, 100) < 95 ? blackColor : whiteColor), Math.sRandom(2,5)); }, scaleCircle); 

सिर और दिखाई दिया।



चलो आगे बढ़ते हैं!

चरण 2 - कान

बिल्लियों के कान थूथन के सबसे अभिव्यंजक तत्वों में से एक हैं। इसलिए, अधिक कान अलग-अलग होते हैं, अलग-अलग घुमाए जाते हैं, अलग-अलग चौड़ाई के होते हैं, अभिव्यक्ति की विविधता अधिक होती है।
हम करते हैं।

  //,   ,     var dir = {x:0, y:radius}; //  var angleOne = Math.PI + Math.PI/Math.sRandom(2, 5); //      var pointR1 = VectorRot(dir, angleOne); //  ,         var pointR2 = VectorRot(dir, angleOne - Math.PI/Math.sRandom(4, 7)); //    var topPointR = {x:((pointR1.x + pointR2.x) / 2)+Math.sRandom(-10, 10), y:pointR2.y - 30 + Math.sRandom(0, 5)}; // add(function(ctx){ //   ctx.beginPath(); ctx.strokeStyle = strokeColor; ctx.fillStyle = fillColor; ctx.lineWidth = Math.sRandom(2, 4); topPointR = {x:topPointR.x+Math.sRandom(-1,5), y:topPointR.y+Math.sRandom(-5,5)}; ctx.moveTo(center.x + pointR1.x,center.y + pointR1.y); ctx.lineTo(center.x + topPointR.x,center.y + topPointR.y); ctx.lineTo(center.x + pointR2.x,center.y +pointR2.y); ctx.fill(); ctx.stroke(); //   ctx.beginPath(); ctx.strokeStyle = strokeColor; ctx.fillStyle = fillColor; ctx.lineWidth = Math.sRandom(2, 4); var topPointL = VectorXInvert({x:topPointR.x+Math.sRandom(-5,5), y:topPointR.y+Math.sRandom(-5,5)}); var pointL1 = VectorXInvert(pointR1); var pointL2 = VectorXInvert(pointR2); ctx.moveTo(center.x + pointL1.x,center.y + pointL1.y); ctx.lineTo(center.x + topPointL.x,center.y + topPointL.y); ctx.lineTo(center.x + pointL2.x,center.y +pointL2.y); ctx.fill(); ctx.stroke(); }, {x:1,y:1}); 

IIIii यहाँ है कि हमें क्या मिला:



पहले से ही एक बिल्ली जैसा दिखता है, है ना?

चरण 3 - मूंछें

कानों के बाद दूसरे में, बिल्ली के चेहरे का एक तत्व है। इसे बनाना मुश्किल नहीं है, लेकिन इसे और अधिक विश्वसनीय दिखने के लिए अधिक कठिन है। एक यादृच्छिक घर के साथ ऐसा नहीं किया जा सकता है, आपको अधिक रैखिक परिणामों के लिए, चक्र को मोड़ना होगा और काउंटर पर बिंदुओं की गणना करनी होगी।

  //    //  ,        // -    var pointsR = []; //   var count = Math.floor(Math.sRandom(3, 5)); for (var i = 0; i < count; i++) { // ,      /    var dir = {x:0, y:radius/Math.sRandom(1.6,1.9)}; // ,   ,   var angleOne = Math.PI/(2 + ((i+1)/4)); //  var pointR1 = VectorRot(dir, angleOne); // y  ,     count      //      var y = pointR1.y+(i < count / 2 ? -Math.sRandom(8, 25) : Math.sRandom(7, 15) ); //       pointsR.push({begin:pointR1, end:{x:pointR1.x - Math.sRandom(60, 100),y:y}}); } //    var lineWidth = Math.sRandom(0.5, 2); // add(function(ctx){ //  for (var i = 0; i < pointsR.length; i++) { ctx.beginPath(); ctx.strokeStyle = strokeColor; ctx.fillStyle = fillColor; ctx.lineWidth = lineWidth; ctx.moveTo(center.x - pointsR[i].begin.x,center.y + pointsR[i].begin.y); ctx.lineTo(center.x - pointsR[i].end.x,center.y + pointsR[i].end.y); ctx.stroke(); } //  for (var i = 0; i < pointsR.length; i++) { ctx.beginPath(); ctx.strokeStyle = strokeColor; ctx.fillStyle = fillColor; ctx.lineWidth = lineWidth; var pointLBegin = VectorXInvert(pointsR[i].begin); var pointLEnd = VectorXInvert(pointsR[i].end); ctx.moveTo(center.x - pointLBegin.x,center.y + pointLBegin.y); ctx.lineTo(center.x - pointLEnd.x,center.y + pointLEnd.y); ctx.stroke(); } }, {x:1,y:1}); 

वेक्टरएक्स इनवर्ट फ़ंक्शन आपको परेशान नहीं करता है, आपको बस अक्सर एक्स विभिन्न तत्वों को प्रतिबिंबित करना पड़ता था, इसलिए एक साधारण फ़ंक्शन बनाया जाता है जो x = -x करता है;

हम देखते हैं कि हमारी बिल्ली कैसे तैयार होती है:

चरण 4 - मुंह

इसे वास्तविक रूप से करना काफी कठिन है, इसलिए हम सिर्फ मुंह की रेखा बनाते हैं, योजनाबद्ध रूप से, लेकिन यह हमारे ग्राफिक ड्राइंग के लिए करेगा।
एक कोड लिखें जो मुंह की रेखा खींचता है। बेज़ियर घटता पर बनाया गया।

  //--- //     .    + 2    // P0 // P3 | iP3 // | | | // P2--P1--iP2 var P0 = {x:center.x, y:center.y}; var P1 = {x:center.x, y:center.y + Math.sRandom(40, 65)}; var P2 = {x:center.x - Math.sRandom(29, 36),y: center.y + 40}; var P3 = {x:center.x - Math.sRandom(20, 40), y:center.y + Math.sRandom(23, 28)}; var iP2 = {x:center.x + Math.sRandom(29, 36),y: center.y + 40}; var iP3 = {x:center.x + Math.sRandom(20, 40), y:center.y + Math.sRandom(23, 28)}; // add(function(ctx){ ctx.beginPath(); ctx.strokeStyle = strokeColor; ctx.fillStyle = fillColor ; ctx.lineWidth = Math.sRandom(1,3); ctx.moveTo(P0.x,P0.y ); ctx.bezierCurveTo(P1.x, P1.y, P2.x, P2.y, P3.x, P3.y); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = strokeColor; ctx.fillStyle = fillColor ; ctx.lineWidth = Math.sRandom(1,3); ctx.moveTo(P0.x,P0.y ); ctx.bezierCurveTo(P1.x, P1.y, iP2.x, iP2.y, iP3.x, iP3.y); ctx.stroke(); }, {x:1,y:1}); 

हम देखते हैं कि क्या हुआ। धैर्य, बस थोड़ा सा बचा है!

चरण 5 - नाक

नाक ही नाक है। चलो इसे दो विकल्प बनाते हैं - एक छोटा वृत्त, और एक त्रिकोण। सर्कल बहुत कम बार दिखाई देगा। खैर, मज़े के लिए।
बेशक, हम रंगों सहित यादृच्छिक मिश्रण करते हैं, ताकि हमें अलग-अलग नाक मिलें - चित्रित किया गया, और सिर्फ एक समोच्च। हमें बिल्लियों की बहुत आवश्यकता है, है ना?

  //   -  ,   var chance = Math.sRandom(0, 100); if(chance < 98) { //  var scale = {x:Math.sRandom(0.9,1.3), y:Math.sRandom(0.9,1.3)}; //  var pointR ={x:Math.sRandom(4,5)*scale.x,y:Math.sRandom(-5,-4)*scale.y}; //  var pointL ={x:Math.sRandom(-4,-5)*scale.x,y:Math.sRandom(-5,-4)*scale.y}; //  var bottomPoint ={x:0,y:Math.sRandom(5,6)*scale.y}; // add(function(ctx){ ctx.beginPath(); ctx.strokeStyle = strokeColor; ctx.fillStyle = (Math.sRandom(0, 100) > 50 ? fillColor : strokeColor); ctx.lineWidth = Math.sRandom(1,3); ctx.moveTo(center.x + pointR.x,center.y + 5 + pointR.y); ctx.lineTo(center.x + bottomPoint.x,center.y + 5 + bottomPoint.y); ctx.lineTo(center.x + pointL.x,center.y + 5 + pointL.y); ctx.closePath(); ctx.fill(); ctx.stroke(); }, {x:1,y:1}); } else { //  add(function(ctx){ drawircle(ctx, {x:0,y:0}, Math.sRandom(7, 10), strokeColor, strokeColor, 1); }, {x:1,y:1}); } 

हमारी बिल्ली धीरे-धीरे बिल्ली में बदल रही है। यह आनंदित नहीं कर सकता है।

चरण 6 - आंखें

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



बिल्ली पहले से ही है, लेकिन कुछ और सजावट जोड़ें।

चरण 7 - गाल पर मूंछ अंक

आप जानते हैं, ऐसे भी हैं। घटना की संभावना स्वाभाविक रूप से 100% नहीं है। यहाँ कोड है, तो परिणाम है।
कोड सरल है - नाक से एक निश्चित दूरी पर बस तितर बितर अंक।

  if(Math.sRandom(0, 100) > 60) { add(function(ctx){ for (var i = 0; i < Math.sRandom(5, 7); i++) { var P = {x:Math.sRandom(20, 40),y:Math.sRandom(0, 30)}; drawircle(ctx, P, 1, strokeColor, strokeColor, 1); } for (var i = 0; i < Math.sRandom(5, 7); i++) { var P = {x:-Math.sRandom(20, 40),y:Math.sRandom(0, 30)}; drawircle(ctx, P, 1, strokeColor, strokeColor, 1); } }, {x:1,y:1}); } 

परिणाम:

चरण 8 - बैंग

बस कभी-कभी हम शीर्ष पर एक-दो लाइनें खींचते हैं। शब्दों में वर्णन करना कठिन है, हम कोड को देखते हैं, हम देखते हैं कि क्या होता है।

 if(Math.sRandom(0, 100) > 75) { add(function(ctx){ for (var i = 0; i < Math.sRandom(3, 5); i++) { //      var radiusVector = {x:0,y:-radius}; //     //       radiusVector = VectorRot(radiusVector, Math.sRandom(-0.01, 0.01)) //   var P0 = {x:Math.sRandom(-25, 25), y: radiusVector.y}; var P1 = {x:Math.sRandom(-25, 25), y: Math.sRandom(-50, -40)}; //  var lineWidth = Math.sRandom(0.5, 1.5); // drawLine(ctx, P0, P1, strokeColor, strokeColor, lineWidth); } }, {x:1,y:1}); } 

महान, सही?

चरण 8 - बेल या धनुष

खैर, यह सिर्फ मनोरंजन के लिए है, मैंने और अधिक जोड़ने के लिए सोचा, और एक धनुष और घंटी जोड़ने का फैसला किया। कड़ाई से न्याय मत करो, मुझे मज़ा आ रहा है :)
हमेशा की तरह, कोड, फिर बिल्लियों के साथ सुंदर चित्र।

  // //    var chanceBottom = Math.sRandom(0, 100); if(chanceBottom > 50) { var chance = Math.sRandom(0, 100); if(chance > 90) { // -   + ,      var P = {x:0,y:radius}; var P0 = {x:Math.sRandom(20, 45), y:radius- Math.sRandom(13, 22)}; var P1 = {x:Math.sRandom(20, 45), y:radius+ Math.sRandom(13, 22)}; add(function(ctx){ var color = (Math.sRandom(0, 100) > 50 ? fillColor : strokeColor); ctx.beginPath(); ctx.strokeStyle = strokeColor; ctx.fillStyle = color; ctx.lineWidth = Math.sRandom(2, 5); ctx.moveTo(center.x + Px,center.y + Py); ctx.lineTo(center.x + P0.x,center.y + P0.y); ctx.lineTo(center.x + P1.x,center.y + P1.y); ctx.closePath(); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.strokeStyle = strokeColor; ctx.fillStyle = color; ctx.lineWidth = Math.sRandom(2, 5); ctx.moveTo(center.x - Px,center.y + Py); ctx.lineTo(center.x - P0.x,center.y + P0.y); ctx.lineTo(center.x - P1.x,center.y + P1.y); ctx.closePath(); ctx.stroke(); ctx.fill(); drawircle(ctx, P, Math.sRandom(6, 12), (Math.sRandom(0, 100) > 50 ? fillColor : strokeColor), strokeColor, Math.sRandom(1, 3)); }, {x:1,y:1}); } } else { // var chance = Math.sRandom(0, 100); if(chance > 90) { // - ,   .    ,  ,    var P = {x:0,y:radius}; var P0 = {x:Math.sRandom(8, 15), y:radius+ Math.sRandom(23, 29)}; var P1 = {x:-P0.x, y:P0.y}; var P3 = {x:0,y:P0.y + Math.sRandom(0, 7)}; add(function(ctx){ drawircle(ctx, P3, Math.sRandom(2, 6), (Math.sRandom(0, 100) > 50 ? fillColor : strokeColor), strokeColor, Math.sRandom(1, 3)); var color = (Math.sRandom(0, 100) > 50 ? fillColor : strokeColor); ctx.beginPath(); ctx.strokeStyle = strokeColor; ctx.fillStyle = color; ctx.lineWidth = Math.sRandom(2, 5); ctx.moveTo(center.x + Px,center.y + Py); ctx.lineTo(center.x + P0.x,center.y + P0.y); ctx.lineTo(center.x + P1.x,center.y + P1.y); ctx.closePath(); ctx.stroke(); ctx.fill(); }, {x:1,y:1}); } } 

जैसा कि आप देख सकते हैं, कुछ भी जटिल नहीं है, बस ज्यामितीय आकार।
कोड उबाऊ होगा यदि कोई बिल्लियां नहीं थीं, एक धनुष के साथ एक बिल्ली हो!

निष्कर्ष

खैर, इसलिए मैंने बिल्लियों के बारे में अपनी कहानी खत्म की।
यहाँ github पर कोड है: github.com/MagistrAVSH/random-cat
लेकिन सभी काम के परिणाम, आप क्लिक कर सकते हैं: magistravsh.imtqy.com/random-cat
और अब मॉनिटर से तितर बितर, और बिल्ली को स्ट्रोक! :)