16

मैं जावास्क्रिप्ट कि करने के लिए निम्न इसी तरह के परिणाम दे देंगे में एक पर्लिन/सिंप्लेक्स/मूल्य शोर समारोह बनाने के लिए कोशिश कर रहा हूँ:जावास्क्रिप्ट सिंप्लेक्स/पर्लिन शोर

enter image description here (नोट: इस छवि को पहले से ही एक treshold लागू किया किया गया है मैं इसे बिना किसी सीमा के चाहता हूं।)

मैं अब 2 दिनों के लिए इंटरनेट पर देख रहा हूं। शोर और बहुत सारे कोड को समझाते हुए बहुत सारे लिंक हैं, लेकिन जावास्क्रिप्ट में कोई भी नहीं, और जब भी मैं इसे बदलने की कोशिश करता हूं, तो मुझे अजीब परिणाम मिलते हैं। यहाँ मेरी attemps में से कुछ हैं:

मुझे लगता है कि समस्या का एक हिस्सा हो सकता है जावास्क्रिप्ट में बिटवाई ऑपरेटरों के उपयोग से स्टेम, जहां किसी संख्या के प्रकार को लागू करना मुश्किल है।

जो मैं खोज रहा हूं वह काम करने का एक उदाहरण है, जावास्क्रिप्ट शोर (जो भी प्रकार)।

मैं भी के बाद से मैं के रूप में चलाने के लिए इस की आवश्यकता होगी मानकों कि एक पैटर्न छवि मैं पोस्ट के लिए इसी तरह का नेतृत्व कर सकेगी (सीमा से पहले) या किसी भी अनुकूलन युक्तियों की से संबंधित किसी भी जानकारी के लिए एक इनाम देने के लिए तैयार हो जाएगा जितनी जल्दी हो सके (जावास्क्रिप्ट में फिर भी)।

उत्तर

5

मैं कोड this Gist.

+0

के परिणाम न दें, इसलिए मुझे इसके साथ एक बहुत ही गैर-यादृच्छिक पैटर्न मिल रहा है। मैंने उस कोड को बिल्कुल लागू किया है, और यह इसे उत्पन्न करता है: http://i.imgur.com/5kTv2Fj.png – Howzieky

13

मैंने कुछ समय पहले ऐसा कुछ किया, हालांकि मैंने मिडपॉइंट विस्थापन का उपयोग किया। आप, क्या यह हो रहा मददगार हो सकता है यह पता लगाने कर सकते हैं

http://www.somethinghitme.com/projects/canvasterrain/

इसकी भी यहाँ

https://github.com/loktar00/Javascript-Canvas-Terrain-Generator

और यहाँ, सिर्फ शोर कुछ शांत प्रकाश के साथ लागू किया भाग के साथ एक बेला है

http://jsfiddle.net/loktar/4qAxZ/

गुड लक :)।

+0

उत्तर के लिए धन्यवाद। अफसोस की बात है, आपका समाधान काम करने के लिए 'कैनवास' पर भारी निर्भर करता है, और मेरे पास मेरी स्थिति में 'कैनवास' तक पहुंच नहीं है। –

+0

@ Xeon06 वास्तव में नहीं:? यह डेटा बिंदु खींचने के लिए केवल कैनवास का उपयोग करता है। यदि आप कैनवास का उपयोग नहीं कर रहे हैं तो ड्रॉइंग को संभालने पर आप योजना कैसे बना सकते हैं .. आपके फ़िडल्स कैनवास का भी उपयोग कर रहे हैं, और उस बिंदु पर जेएस के बजाय सर्वर पक्ष पर कुछ तेज़ क्यों नहीं उठाते हैं (जब तक कि आप ऐसा करने के लिए नोड का उपयोग नहीं कर रहे हों पहले से)? – Loktar

+0

मुझे खेद है, मैं बस आपके कोड से बहुत तेज़ी से चला गया। मैंने सोचा कि मैंने देखा था कि आप इसे अपने आप पर स्केल कर रहे थे। मैं इसे जल्द ही एक और उचित पढ़ूंगा। –

2

पर पाया का उपयोग किया जाएगा यहाँ कोड मैं 2D/3D पर्लिन शोर के लिए के साथ समाप्त हो गया है। ध्यान दें कि यह RequJS के AMD मॉड्यूल सिंटैक्स का उपयोग करता है, लेकिन यदि आप एएमडी लोडर का उपयोग नहीं कर रहे हैं तो आप इसे दूर कर सकते हैं।

define(
    [], 
    function() 
    { 
     function fade(t) 
     { 
      return t * t * t * (t * (t * 6 - 15) + 10); 
     } 

     function lerp(t, a, b) 
     { 
      return a + t * (b - a); 
     } 

     function grad(hash, x, y, z) 
     { 
      // Convert lo 4 bits of hash code into 12 gradient directions. 
      var h = hash & 15, 
       u = h < 8 ? x : y, 
       v = h < 4 ? y : h == 12 || h == 14 ? x : z; 
      return ((h & 1) == 0 ? u : -u) + ((h & 2) == 0 ? v : -v); 
     } 

     function scale(n) 
     { 
      return (1 + n)/2; 
     } 

     var p = new Array(512); 

     var permutation = [ 
      151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 
      37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 
      57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 
      77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 
      54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 
      86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 
      85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 
      154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 
      178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 
      145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 
      127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180 
     ]; 

     for (var i = 0; i < 256; i++) { 
      p[256 + i] = p[i] = permutation[i]; 
     } 

     return { 
      /** Returns a number between 0 and 1. */ 
      noise3d: function(x, y, z) 
      { 
       // Find unit cube that contains point. 
       var X = Math.floor(x) & 255, 
        Y = Math.floor(y) & 255, 
        Z = Math.floor(z) & 255; 
       // Find relative x,y,z of point in cube. 
       x -= Math.floor(x); 
       y -= Math.floor(y); 
       z -= Math.floor(z); 
       // Compute fade curves for each of x,y,z. 
       var u = fade(x), 
        v = fade(y), 
        w = fade(z); 
       // Hash coordinates of the corners. 
       var A = p[X ] + Y, AA = p[A] + Z, AB = p[A + 1] + Z, 
        B = p[X + 1] + Y, BA = p[B] + Z, BB = p[B + 1] + Z; 

       // Add blended results from 8 corners of cube. 
       return scale(
        lerp(
         w, 
         lerp(
          v, 
          lerp(
           u, 
           grad(p[AA], x, y, z), 
           grad(p[BA], x - 1, y, z) 
          ), 
          lerp(
           u, 
           grad(p[AB], x, y - 1, z), 
           grad(p[BB], x - 1, y - 1, z) 
          ) 
         ), 
         lerp(
          v, 
          lerp(
           u, 
           grad(p[AA + 1], x, y, z - 1), 
           grad(p[BA + 1], x - 1, y, z - 1) 
          ), 
          lerp(
           u, 
           grad(p[AB + 1], x, y - 1, z - 1), 
           grad(p[BB + 1], x - 1, y - 1, z - 1) 
          ) 
         ) 
        ) 
       ); 
      }, 

      /** Returns a number between 0 and 1. */ 
      noise2d: function(x, y) 
      { 
       // Find unit square that contains point. 
       var X = Math.floor(x) & 255, 
        Y = Math.floor(y) & 255; 
       // Find relative x,y of point in square. 
       x -= Math.floor(x); 
       y -= Math.floor(y); 
       // Compute fade curves for each of x,y. 
       var u = fade(x), 
        v = fade(y); 
       // Hash coordinates of the corners. 
       var A = p[X ] + Y, AA = p[A], AB = p[A + 1], 
        B = p[X + 1] + Y, BA = p[B], BB = p[B + 1]; 

       // Add blended results from the corners. 
       return scale(
        lerp(
         v, 
         lerp(
          u, 
          grad(p[AA], x, y, 0), 
          grad(p[BA], x - 1, y, 0) 
         ), 
         lerp(
          u, 
          grad(p[AB], x, y - 1, 0), 
          grad(p[BB], x - 1, y - 1, 0) 
         ) 
        ) 
       ); 
      } 
     }; 
    } 
); 
+0

क्या आप स्रोत जोड़ सकते हैं? – Safareli

4

मुझे पता है कि यह बहुत पुराना है, लेकिन हो सकता है कि यह अभी भी किसी और के लिए उपयोगी हो। मैंने एक जावास्क्रिप्ट ऐप बनाया है जो एचटीएमएल 5 कैनवास में पर्लिन और सिंपलक्स शोर प्रस्तुत करता है, इसे यहां देखें: http://lencinhaus.github.com/canvas-noise

ऐप शोर गणना और प्रतिपादन में शामिल प्रत्येक पैरामीटर को ट्विक करने और परिणामस्वरूप बनावट को सहेजने की अनुमति देता है। यह यूआरएल में पैरामीटर भी जोड़ता है, ताकि इसे साझा किया जा सके। उदाहरण के लिए, this configuration आपके द्वारा दिखाए गए एक जैसा बनावट बना देता है।

आशा है कि मदद करता है!

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^