Draw rectangles on circle formula

Question

I'm trying to draw the spectrum of an audio file on a circle. Like this:

enter image description here

So on the circle I just want rectangles drawn like you see on the image.

I've got this code:

public void onRender(Canvas canvas, FFTData data, Rect rect) {
    canvas.drawCircle(rect.width()/2, rect.height()/2, 200, mPaint);

    for (int i = 0; i < data.bytes.length / mDivisions; i++) {
        byte rfk = data.bytes[mDivisions * i];
        byte ifk = data.bytes[mDivisions * i + 1];
        float magnitude = (rfk * rfk + ifk * ifk);
        int dbValue = (int) (10 * Math.log10(magnitude));


    }
}

Where FFTData is the Fast Fourier Transformation data that Android gives me. Now in my dbValue I got the strength of the signal. mDivisions is how much bars I want. Currently set on 16 because I don't know how much I can set on the circle.

I'm stuck on how I can draw the rectangle with his center on the circle line... So I want a rectangle whose height is based on the dbValue so that I get high and low rectangles. And the center must be placed on my circle line.

Can someone help me on this math formula?

i solved your problem by just one function that you passed the height of your rectangular and the degree from x axis and it draw it for you do you want it or your problem is solved.`mySpectrumDrawer(int centerX, int centerY,int R,int height, int angel)` http://i.imgur.com/bti4Sh3.jpg — mmlooloo, Aug 29 '14 at 11:11
Cool, I'm having all the same blocks right now, but I need to translate, rotate .. Can you maybe share your function here? — user1007522, Aug 29 '14 at 11:33

score 2 · Answer 1 · edited May 23 '17 at 12:23

2

Run a loop over all 360 degrees of the circle (at wanted step), and, for each point, convert Polar (this angle and the radius of the circle) coordinates into Cartesian, as described here, for instance. This way you get the location of the centre of your rectangle.

Translate the system of the coordinates, making origin to be at the wanted point on the circle line and then rotate by the circle angle at that point.

Alternatively, you can build a trapezoid by getting corners at angle +- some offset and radius +- some offset (proportional to your value to plot). It will have shorter inner edge and longer outer edge. Such trapezoids may look better if painted side by side.

edited May 23 '17 at 12:23

Community

1
1

answered Aug 29 '14 at 07:40

Audrius Meškauskas

20,936
12
75
93

Have you got any pseudocode or something. I'm not so good in maths. – user1007522 Aug 29 '14 at 07:50
How can I run over the degrees of the circle? Or do you just mean a forloop from 0 to 360? – user1007522 Aug 29 '14 at 08:54
Yes, exactly. for (double angle=0; angle < 360; angle += 10) for instance. – Audrius Meškauskas Aug 29 '14 at 11:32

mmlooloo · Accepted Answer · 2014-08-29T13:48:46.057

i think all you have needed is a pencil and a paper and a little math and also some free time to play :-)

  public class MainActivity extends Activity {
  ImageView drawingImageView;
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    drawingImageView = (ImageView) this.findViewById(R.id.DrawingImageView);

                Paint paint;
                paint = new Paint();
                paint.setColor(Color.GREEN);
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeWidth(16);

               final  Bitmap bitmap = Bitmap.createBitmap((int) getWindowManager()
                    .getDefaultDisplay().getWidth(), (int) getWindowManager()
                    .getDefaultDisplay().getHeight(), Bitmap.Config.ARGB_8888);
                Canvas canvas = new Canvas(bitmap);

                int centerX =400;
                int centerY =400;
                int R = 200;

                canvas.drawCircle(centerX, centerY, R, paint);

                int h = 100;

                paint.setColor(Color.RED);
                Path p = new Path();
                p.moveTo(centerX + R - h/2, centerY);
                p.lineTo(centerX + R + h/2, centerY);
                canvas.drawPath(p, paint);

                p = mySpectrumDrawer(centerX,centerY,R,h,15);
                canvas.drawPath(p, paint);

                h = 50;
                p = mySpectrumDrawer(centerX,centerY,R,h,30);
                canvas.drawPath(p, paint);
                h = 60;   
                p = mySpectrumDrawer(centerX,centerY,R,h,60);
                canvas.drawPath(p, paint);
                h = 80;
                p = mySpectrumDrawer(centerX,centerY,R,h,90);
                canvas.drawPath(p, paint);

                drawingImageView.setImageBitmap(bitmap);

    } 

  private Path mySpectrumDrawer(int centerX, int centerY,int R,int height, int angel){

        Path p = new Path();

        int dX = (int) (R*(Math.cos(Math.toRadians(angel))));
        int dY = (int) (R*(Math.sin(Math.toRadians(angel))));

        int dhx = (int) (height/2*(Math.cos(Math.toRadians(angel))));
        int dhy = (int) (height/2*(Math.sin(Math.toRadians(angel))));

        p.moveTo(centerX + dX - dhx , centerY - dY + dhy);
        p.lineTo(centerX + dX + dhx , centerY - dY - dhy);

        return p;
  }
}

enter image description here

Works. I was so close. I just had my dhX and dHy wrong :p. Thanks man! — user1007522, Aug 29 '14 at 13:22

Draw rectangles on circle formula

2 Answers2