Apps Drawing a spiral

[xRazorus]

I'm looking for some tips for my homework.
So i have to make an app that draws a spiral with n amount of twists. User inputs how many twists the spiral should have. I know how to draw a circle but i've no idea how to draw a spiral. Didn't find anything useful in google either.

 

[Deleted User]

Well this is really a question of how to calculate the points for the spiral. I did a cursory web search, and thanks to StackOverflow, came up with the following algorithm

for (i=0; i< 720; i++) {
  angle = 0.1 * i;
  x=(1+angle)*Math.cos(angle);
  y=(1+angle)*Math.sin(angle);
  context.lineTo(x, y);
}

https://stackoverflow.com/questions/6824391/drawing-a-spiral-on-an-html-canvas-using-javascript

It's aimed at Javascript, but you should be able to adapt it for an Android app.
This block of code uses a hardcoded value of 720, but as per your brief, it should be parameterised for the number of twists. I'll leave that as an exercise for you

The other part of this assignment is learning how to use Android's Canvas to render a 2D image. I'll also leave you to study how to do that.

Some other links:-

https://stackoverflow.com/questions/13894715/draw-equidistant-points-on-a-spiral

https://www.google.co.uk/search?rlz...+android&oq=function+to+draw+a+spiral+android

 

[xRazorus]

So i'm almost done with the task. Got stuck at some point. I did draw a spiral, but the problem is there's a line between the twists and i can't figure out why....

    public class SpiralView extends View{

        public SpiralView(Context context){
            super(context);
        }

        @Override
        protected void onDraw(Canvas canvas){
            Paint paint = new Paint();
            paint.setColor(Color.BLUE);
            paint.setStrokeWidth(2);
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawPaint(paint);
            paint.setColor(Color.parseColor("#da4747"));
            super.onDraw(canvas);

            int centerX = getWidth() / 2;
            int centerY = getHeight() / 2;

            int left = centerX - 20;
            int right = centerX + 20;
            int top = centerY - 20;
            int bottom = centerY + 20;

            int startAngle = 0;
            int arcAngle = 180;

            int amount = 20; // amount of twists


            for(int i = 0; i < amount * 2; i++){
                canvas.drawArc(left, top, right, bottom, startAngle, arcAngle, false, paint);
                if(i%2 == 0){
                    right = right + 20;
                    top = top - 20;
                }
                else{
                    left = left - 20;
                    bottom = bottom + 20;
                }
                startAngle = startAngle + arcAngle;
            }
        }
    }

 

[Deleted User]

So you're drawing two arcs per spiral. Looks like the start/end points of the two arcs do not coincide with each other.
If you run your app in debug mode, you can set a breakpoint in the code, and look at the values of variables left, top, right and bottom. This should reveal why the gap in your spiral occurs.

 

[jcdev]

Apologies for the zombie, but it might save somebody some time. The below correction gets rid of the horizontal spacing.
Note that :
- the top and bottom rect coordinates are updated with every iteration
- they are incremented/decremented by half the 'spacing' value

  for(int i = 0; i < amount * 2; i++){
                canvas.drawArc(left, top, right, bottom, startAngle, arcAngle, false, paint);
                top -= 10;
                bottom += 10;
                if(i%2 == 0){
                    right = right + 20;
                }
                else{
                    left = left - 20;
                }
                startAngle = startAngle + arcAngle;
            }