Trouble Adding pictures

Put your problem here if it does not fit any of the other categories.

Trouble Adding pictures

Postby nin2246 » Mon Mar 12, 2012 6:32 pm

I made a cube that rotates just by following the Android Cube Wallpaper guide. But I am trying to add on to it... I would like to add a picture; 5 pictures at that to make it rotate with pictures instead of just a wire frame.

My code so far, just the same as Android's Wallpaper Cube. Where would I implement a picture to?

Code: Select all
package jakob.wallpaper.live.v1;

import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Handler;
import android.os.SystemClock;
import android.service.wallpaper.WallpaperService;
import android.view.MotionEvent;
import android.view.SurfaceHolder;

/*
* This animated wallpaper draws a rotating wireframe cube.
*/
public class CubeWallpaper1 extends WallpaperService {

   private final Handler mHandler = new Handler();

   @Override
   public void onCreate() {
      super.onCreate();
   }

   @Override
   public void onDestroy() {
      super.onDestroy();
   }

   @Override
   public Engine onCreateEngine() {
      return new CubeEngine();
   }

   class CubeEngine extends Engine {

      private final Paint mPaint = new Paint();
      private float mOffset;
      private float mTouchX = -1;
      private float mTouchY = -1;
      private long mStartTime;
      private float mCenterX;
      private float mCenterY;

      private final Runnable mDrawCube = new Runnable() {
         public void run() {
            drawFrame();
         }
      };
      private boolean mVisible;

      CubeEngine() {
         // Create a Paint to draw the lines for our cube
         final Paint paint = mPaint;
         paint.setColor(0xffffffff);
         paint.setAntiAlias(true);
         paint.setStrokeWidth(2);
         paint.setStrokeCap(Paint.Cap.ROUND);
         paint.setStyle(Paint.Style.STROKE);

         mStartTime = SystemClock.elapsedRealtime();
      }

      @Override
      public void onCreate(SurfaceHolder surfaceHolder) {
         super.onCreate(surfaceHolder);

         // By default we don't get touch events, so enable them.
         setTouchEventsEnabled(true);
      }

      @Override
      public void onDestroy() {
         super.onDestroy();
         mHandler.removeCallbacks(mDrawCube);
      }

      @Override
      public void onVisibilityChanged(boolean visible) {
         mVisible = visible;
         if (visible) {
            drawFrame();
         } else {
            mHandler.removeCallbacks(mDrawCube);
         }
      }

      @Override
      public void onSurfaceChanged(SurfaceHolder holder, int format,
            int width, int height) {
         super.onSurfaceChanged(holder, format, width, height);
         // store the center of the surface, so we can draw the cube in the
         // right spot
         mCenterX = width / 2.0f;
         mCenterY = height / 2.0f;
         drawFrame();
      }

      @Override
      public void onSurfaceCreated(SurfaceHolder holder) {
         super.onSurfaceCreated(holder);
      }

      @Override
      public void onSurfaceDestroyed(SurfaceHolder holder) {
         super.onSurfaceDestroyed(holder);
         mVisible = false;
         mHandler.removeCallbacks(mDrawCube);
      }

      @Override
      public void onOffsetsChanged(float xOffset, float yOffset, float xStep,
            float yStep, int xPixels, int yPixels) {
         mOffset = xOffset;
         drawFrame();
      }

      /*
       * Store the position of the touch event so we can use it for drawing
       * later
       */
      @Override
      public void onTouchEvent(MotionEvent event) {
         if (event.getAction() == MotionEvent.ACTION_MOVE) {
            mTouchX = event.getX();
            mTouchY = event.getY();
         } else {
            mTouchX = -1;
            mTouchY = -1;
         }
         super.onTouchEvent(event);
      }

      /*
       * Draw one frame of the animation. This method gets called repeatedly
       * by posting a delayed Runnable. You can do any drawing you want in
       * here. This example draws a wireframe cube.
       */
      void drawFrame() {
         final SurfaceHolder holder = getSurfaceHolder();

         Canvas c = null;
         try {
            c = holder.lockCanvas();
            if (c != null) {
               // draw something
               drawCube(c);
               drawTouchPoint(c);
            }
         } finally {
            if (c != null)
               holder.unlockCanvasAndPost(c);
         }

         // Reschedule the next redraw
         mHandler.removeCallbacks(mDrawCube);
         if (mVisible) {
            mHandler.postDelayed(mDrawCube, 1000 / 25);
         }
      }

      /*
       * Draw a wireframe cube by drawing 12 3 dimensional lines between
       * adjacent corners of the cube
       */
      void drawCube(Canvas c) {
         c.save();
         c.translate(mCenterX, mCenterY);
         c.drawColor(0xff000000);
         drawLine(c, 400, 400, 400, 400, 400, 400);
         drawLine(c, 200, 400, 400, 400, 400, 400);
         drawLine(c, 400, 400, 400, 400, 400, 400);
         drawLine(c, 200, 400, 400, 400, 400, 400);

         drawLine(c, 200, 400, 400, 400, 400, 400);
         drawLine(c, 400, 400, 400, 400, 400, 400);
         drawLine(c, 200, 400, 400, 400, 400, 400);
         drawLine(c, 400, 400, 400, 400, 400, 400);

         drawLine(c, 400, 400, 400, 400, 400, 400);
         drawLine(c, 400, 400, 400, 400, 400, 400);
         drawLine(c, 400, 400, 400, 400, 400, 400);
         drawLine(c, 400, 400, 400, 400, 400, 400);
         c.restore();
      }

      /*
       * Draw a 3 dimensional line on to the screen
       */
      void drawLine(Canvas c, int x1, int y1, int z1, int x2, int y2, int z2) {
         long now = SystemClock.elapsedRealtime();
         float xrot = ((float) (now - mStartTime)) / 1000;
         float yrot = (0.5f - mOffset) * 2.0f;
         float zrot = 0;

         // 3D transformations

         // rotation around X-axis
         float newy1 = (float) (Math.sin(xrot) * z1 + Math.cos(xrot) * y1);
         float newy2 = (float) (Math.sin(xrot) * z2 + Math.cos(xrot) * y2);
         float newz1 = (float) (Math.cos(xrot) * z1 - Math.sin(xrot) * y1);
         float newz2 = (float) (Math.cos(xrot) * z2 - Math.sin(xrot) * y2);

         // rotation around Y-axis
         float newx1 = (float) (Math.sin(yrot) * newz1 + Math.cos(yrot) * x1);
         float newx2 = (float) (Math.sin(yrot) * newz2 + Math.cos(yrot) * x2);
         newz1 = (float) (Math.cos(yrot) * newz1 - Math.sin(yrot) * x1);
         newz2 = (float) (Math.cos(yrot) * newz2 - Math.sin(yrot) * x2);

         // 3D-to-2D projection
         float startX = newx1 / (4 - newz1 / 400);
         float startY = newy1 / (4 - newz1 / 400);
         float stopX = newx2 / (4 - newz2 / 400);
         float stopY = newy2 / (4 - newz2 / 400);

         c.drawLine(startX, startY, stopX, stopY, mPaint);
      }

      /*
       * Draw a circle around the current touch point, if any.
       */
      void drawTouchPoint(Canvas c) {
         if (mTouchX >= 0 && mTouchY >= 0) {
            c.drawCircle(mTouchX, mTouchY, 80, mPaint);
         }
      }

   }
}
nin2246
Developer
Developer
 
Posts: 42
Joined: Wed Jan 18, 2012 8:08 pm

Top

Re: Trouble Adding pictures

Postby Phyll » Tue Mar 13, 2012 12:44 pm

Hi nin,

Seems like you already have the rotated corners of each face. Does that work if you copy your pictures as bitmaps fit to these coordinates with the current rotation?

Hope this helps.

Phyll
Phyll
Master Developer
Master Developer
 
Posts: 648
Joined: Fri Oct 14, 2011 11:19 am

Re: Trouble Adding pictures

Postby nin2246 » Tue Mar 13, 2012 6:01 pm

I can put an image there, but I don't know enough to make the image rotate as well. Like in sync of the wire frame.
nin2246
Developer
Developer
 
Posts: 42
Joined: Wed Jan 18, 2012 8:08 pm

Re: Trouble Adding pictures

Postby Phyll » Tue Mar 13, 2012 11:29 pm

Hi nin,

I think you would update the surface of each side every time you update the cube. Problem is that you need to figure out which side is tilted furthest away and work your way out from the screen. A wire frame doesn't have that problem. I would think you would not want to draw the wireframe either. Just use the corner coordinates.

I see there's an app like that on the market to show photos.

Hope this helps.

Phyll
Phyll
Master Developer
Master Developer
 
Posts: 648
Joined: Fri Oct 14, 2011 11:19 am

Re: Trouble Adding pictures

Postby nin2246 » Wed Mar 14, 2012 6:10 pm

Phyll wrote:Hi nin,

Problem is that you need to figure out which side is tilted furthest away and work your way out from the screen. A wire frame doesn't have that problem.

Phyll

How would I attempt that, I don't have a great math set of skills. Also what would be that point of finding it. Sorry if I sound insulting/ or dumb.

There is also only 5 sides the back of the cube is not coming to view so if I was to update the cube the back panel doesn't need to update.

Would it be something like if (xrot >250) { insert image here } same for yrot but maybe a different number like -250??
nin2246
Developer
Developer
 
Posts: 42
Joined: Wed Jan 18, 2012 8:08 pm

Re: Trouble Adding pictures

Postby Phyll » Wed Mar 14, 2012 9:04 pm

Hi nin,

Part of the problem with the wire frame cube is that it is drawn as 12 lines that form the intersections of all the sides, not the sides themselves. In order for us to place photographs on each side, we will have to think of the six sides of the cube as six separate planes. We might call these surfaces or textures like they do in opengl. If we rotate our cube, the surfaces go with it and rotate between perpendiular to the screen and parallel to it.

Whenever it is beyond perpendiular moving towards 180 degrees away from us (parallel below the surface of the screen) we do not have to do anything with it because it is not visible. For instance, when the cube is facing directly at us we only see one side, none of the others are visible. Of course if you knew a lot about vector math this would all be relatively trivial I suppose. Whenever a vector perpendicular and facing out of a side pointed into the screen, it would not be visible. So how do we do this and let Android take care of all the vector math for us.

I guess the simple solution is to use textures in opengl. Here is a tutorial about that:

http://obviam.net/index.php/texture-map ... d-squares/

Hope this helps.

Phyll
Phyll
Master Developer
Master Developer
 
Posts: 648
Joined: Fri Oct 14, 2011 11:19 am

Top

Re: Trouble Adding pictures

Postby nin2246 » Thu Mar 15, 2012 6:27 pm

I don't understand calculus at all. I tried to get vectors but failed. Sadly currently where I am that website is blocked for Games at my school.... Is there any other website that could help?

Wouldn't it be a little more simple to just rotate the pictures like I am currently with the wire frame? I only made the wire frame so I could learn the current lesson and add an addition to it with pictures instead I just can't get pictures to rotate.
nin2246
Developer
Developer
 
Posts: 42
Joined: Wed Jan 18, 2012 8:08 pm

Top

Return to Other Coding-Problems

Who is online

Users browsing this forum: No registered users and 14 guests