2012-04-14 6 views
7

धन्यवाद Torious, यह मिल गया:(चित्र देखें) एक smuge/लडखडाना effet के लिए एक मैट्रिक्स बनाने एंड्रॉयड में

private void smudge() { 


     for (int i = 0; i < COUNT*2; i += 2) { 

      float xOriginal = matrixOriganal[i+0]; 
      float yOriginal = matrixOriganal[i+1]; 

      float distX = Math.abs(pointX-xOriginal); 
      float distY = Math.abs(pointY-yOriginal); 

      float dist = FloatMath.sqrt(distX*distX + distY*distY); 

      float coof = (bubbleSize - dist)/bubbleSize; 

     float oc = (float) -Math.sin(coof * 2*Math.PI) * 0.15f ; 

      if (dist < bubbleSize) 
      { 
      matrixVertsMoved[i+0] = xOriginal + smudgeAmount * (coof+oc); 
      matrixVertsMoved[i+1] = yOriginal; 
      } 
      else 
      { 
      matrixVertsMoved[i+0] = xOriginal; 
      matrixVertsMoved[i+1] = yOriginal; 
      } 


     } 

     invalidate(); 
    } 

वर्ष: अभी मैं इस कोड है मैंने एपीआई नमूने के आधार पर बनाया जो एसडीके के साथ आता है।

public class main extends Activity { 

    //////////////////////////////////////////////////////// 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     this.requestWindowFeature(Window.FEATURE_NO_TITLE); 
     setContentView(R.layout.main); 

     LinearLayout ll01 = (LinearLayout)findViewById(R.id.linearLayout1); 

     SampleView sv = new SampleView(this); 
     ll01.addView(sv); 
    } 

    //////////////////////////////////////////////////////////////////////////////////////////////////////////////// 

    private static class SampleView extends View { 
     static int WIDTH = 8; // sections 
     static int HEIGHT = 8; 
     static int COUNT = (WIDTH + 1) * (HEIGHT + 1); // total verts count 

     Bitmap mBitmap; // declaring a bitmap 
     float[] matrixVertsMoved = new float[COUNT*2]; // declaring an array with double amount of vert count, one for x and one for y 
     float[] matrixOriganal = new float[COUNT*2]; 

     float clickX; 
     float clickY; 

     static void setXY(float[] array, int index, float x, float y) { 
      array[index*2 + 0] = x; 
      array[index*2 + 1] = y; 
     } 

     /// 

     public SampleView(Context context) { 
      super(context); 
      setFocusable(true); 

      mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.w); 


      // construct our mesh 
      int index = 0; 
      for (int y = 0; y <= HEIGHT; y++) { 
       float fy = mBitmap.getHeight() * y/HEIGHT; 

       for (int x = 0; x <= WIDTH; x++) { 
        float fx = mBitmap.getWidth() * x/WIDTH; 
        setXY(matrixVertsMoved, index, fx, fy); 
        setXY(matrixOriganal, index, fx, fy); 
        index += 1; 
       } 

      } 

     } 

//////////////////////////////////////////////////////////////////////////////////////////////////////////////// 

     @Override 
     protected void onDraw(Canvas canvas) { 


      canvas.drawBitmapMesh(mBitmap, WIDTH, HEIGHT, matrixVertsMoved, 0, null, 0, null); 

      Paint p1 = new Paint(); 
      p1.setColor(0x660000FF); 

      Paint p2 = new Paint(); 
      p2.setColor(0x99FF0000); 

      Paint p3 = new Paint(); 
      p3.setColor(0xFFFFFB00); 

      for (int i = 0; i < COUNT*2; i += 2) { 
       float x = matrixOriganal[i+0]; 
       float y = matrixOriganal[i+1]; 
       canvas.drawCircle(x, y, 4, p1); 

       float x1 = matrixOriganal[i+0]; 
       float y1 = matrixOriganal[i+1]; 
       float x2 = matrixVertsMoved[i+0]; 
       float y2 = matrixVertsMoved[i+1]; 
       canvas.drawLine(x1, y1, x2, y2, p1); 
      } 

      for (int i = 0; i < COUNT*2; i += 2) { 
       float x = matrixVertsMoved[i+0]; 
       float y = matrixVertsMoved[i+1]; 
       canvas.drawCircle(x, y, 4, p2); 
      } 

      canvas.drawCircle(clickX, clickY, 6, p3); 


     } 

//////////////////////////////////////////////////////////////////////////////////////////////////////////////// 

     private void smudge() { 


      for (int i = 0; i < COUNT*2; i += 2) { 

       float xOriginal = matrixOriganal[i+0]; 
       float yOriginal = matrixOriganal[i+1]; 

       float dist_click_to_origin_x = clickX - xOriginal; // distance from current vertex in the original matrix to the place clicked. 
       float dist_click_to_origin_y = clickY - yOriginal; 

       float kv_kat = dist_click_to_origin_x*dist_click_to_origin_x + dist_click_to_origin_y*dist_click_to_origin_y; 

       float pull = (1000000/kv_kat/FloatMath.sqrt(kv_kat)); 

       if (pull >= 1) { 
        matrixVertsMoved[i+0] = clickX; 
        matrixVertsMoved[i+1] = clickY; 
       } else { 
        matrixVertsMoved[i+0] = xOriginal + dist_click_to_origin_x * pull; 
        matrixVertsMoved[i+1] = yOriginal + dist_click_to_origin_y * pull; 
       } 

      } 


     } 


//////////////////////////////////////////////////////////////////////////////////////////////////////////////// 

     @Override 
     public boolean onTouchEvent(MotionEvent event) { 

       clickX = event.getX(); 
       clickY = event.getY(); 
       smudge(); // change the matrix. 
       invalidate(); // calls a redraw on the canvas. 

      return true; 
     } 

//////////////////////////////////////////////////////////////////////////////////////////////////////////////// 

    } 

यह अंत में रैप फ़ंक्शन महत्वपूर्ण है। यह वही है जो यह पैदा करता है।

// नीले बिंदु मूल मैट्रिक्स के चरम हैं, जबकि लाल रंग दिखाते हैं कि वे क्लिक (पीले बिंदु) से कैसे चले गए।

enter image description here

फिर भी है कि मैं जरूरत यह एक शीर्ष में पिंच करने के लिए नहीं है, लेकिन इस तरह यह धब्बा से वैसा, है।

enter image description here

उदाहरण के लिए, इस धब्बा समारोह पिक्सेल में ले सकता है या शिखर जहां धब्बा शुरू करने के लिए, एक्स से समन्वय करता है और y ऑफसेट और धब्बा की ताकत है, यानी कितना मुश्किल होना चाहिए आसपास के vertexes प्रभावित हो।

कोई विचार यह कैसे करना है?

संपादित करें: मूल रूप से मैं करने के लिए http://www.andwobble.com/

धन्यवाद कुछ इसी तरह बनाने की कोशिश कर रहा हूँ!

उत्तर

2

ठीक है, मुझे एक (फ्लैश) डेमो काम मिल रहा है जो आपको चाहिए।

मैंने एक बनावट जाल नहीं बदला है, लेकिन केवल ऊर्ध्वाधर हैं, इसलिए यह सत्यापित करना मुश्किल है कि प्रभाव बिल्कुल सही है या नहीं, लेकिन यह सही दिशा में एक कदम दिखता है।

वैसे भी, कोड है; यह एएस 3 में है लेकिन मुझे संदेह है कि इसे समझना मुश्किल होगा।

कुछ नोट:

  • कोड में CENTER नीचे, धब्बा आपरेशन के प्रारंभिक बिंदु हो के रूप में आप यह ऊपर का वर्णन होगा। controlPoint अंत बिंदु होगा।
  • मैं Vector3D का उपयोग कर रहा हूं, लेकिन केवल 2 डी निर्देशांक का उपयोग कर रहा हूं।
  • CENTER, controlPoint और इनपुट vertex को समान समन्वय प्रणाली में माना जाता है। आप अपने जाल के स्थानीय समन्वय प्रणाली के सापेक्ष होने के लिए CENTER को पूर्व-प्रक्रिया कर सकते हैं। फिर आप नीचे दिए गए कोड में रिश्तेदार/स्थानीय समन्वय प्रणाली से/से ट्रांसफॉर्म को पट्टी कर सकते हैं।
  • लॉजिस्टिक फ़ंक्शन का प्रभाव प्रभाव के सर्कल के किनारे से संक्रमण के लिए कोई प्रभाव नहीं, पूर्ण प्रभाव के लिए किया जाता है। आप शायद इसी तरह के प्रभाव के लिए कई अन्य कार्यों का उपयोग कर सकते हैं।
  • मुझे लगता है कि एक छोटी शक्ति के साथ एक अतिरिक्त, दूसरा "नियंत्रण बिंदु खींचें" ऑपरेशन का उपयोग करना और कम खड़ी संक्रमण प्रभाव को बेहतर बना देगा; फिलहाल सभी शिखर सम्मेलन जो पूरी तरह से संक्रमण (करीब) 100% प्रभाव नियंत्रण बिंदु की दिशा में आगे बढ़ते हैं, मुझे लगता है कि एकजुट हो गया है।

इसे आज़माएं और मुझे बताएं कि क्या आपको AS3 कोड को समझने में परेशानी है।

private function log(t:Number):Number { 
     return 1/(1 + Math.pow(Math.E, -t)); 
    } 

    private function transformVertex(vertex:Vector3D, controlPoint:Vector3D):Vector3D { 

     // get control point relative to center of influence 
     // (this could actually be calculated in pre-processing, as 
     // it doesn't change between vertices) 
     var controlPointRel:Vector3D = controlPoint.subtract(CENTER); 

     // get vertex relative to center of influence 
     var rel:Vector3D = vertex.subtract(CENTER); 

     // get distance of vertex from center 
     var dst:Number = rel.length/RADIUS; 
     if (dst > 1) return vertex; // vertex outside circle of influence 


     // PULL TO CONTROL POINT 

     // tScale controls the steepness of the transition from the 
     // edge of the circle. 1 = logistic transition, >1 = steeper 
     var tScale:Number = 1.7; 
     var t:Number = (1 - dst) * 12 * tScale - 6; // [-6, 6] 
     t = log(t); 

     controlPointRel = controlPointRel.clone(); 
     controlPointRel.scaleBy(t); 
     // ALTERNATIVE, try this too: 
     // controlPointRel.scaleBy(t * (1 - dst)); 

     rel = rel.add(controlPointRel); 

     // relative to absolute 
     return rel.add(CENTER); 

    } 
+0

धन्यवाद, इस बीच मैं ज्यादातर यह समझता हूं कि मूल कार्य क्या था। उपरोक्त टिप्पणियों के साथ संपादित कोड देखें। :) –