Rotate rectangle around circumference of circle on canvas

Mussmanson

I'm trying to create a circular "equalizer" effect using JavaScript and HTML canvas for a small project I'm working on, and it works great, except for one small thing. It's just a series of rectangular bars moving to the mp3 over time, nothing fancy, but at the moment all bars point in one direction (eg 0 radians or 90 degrees).

I want each rectangle around the edge of the circle to point directly away from the center point, not to the right. I have 360 ​​bars, so naturally each bar should be rotated 1 degree more than the previous one.

I thought doing angle = i * Math.PI/180 would fix this, but it doesn't seem to matter what I do with the rotation functions - they always end up pointing in weird and wonderful directions and being translated a million miles from them where it is. I do not understand why. Can anyone see where I am going wrong?

My framework code is as follows:

function frames() {

  // Clear the canvas and get the mp3 array
  window.webkitRequestAnimationFrame(frames);
  musicArray = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(musicArray);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  bars = 360;


  for (var i = 0; i < bars; i++) {

    // Find the rectangle's position on circle edge
    distance = 100;
    var angle = i * ((Math.PI * 2) / bars);
    var x = Math.cos(angle) * distance + (canvas.width / 2);
    var y = Math.sin(angle) * distance + (canvas.height / 2);
    barWidth = 5;
    barHeight = (musicArray[i] / 4);

    // Fill with a blue-green gradient
    var grd = ctx.createLinearGradient(x, 0, x + 40, 0);
    grd.addColorStop(0, "#00CCFF");
    grd.addColorStop(1, "#00FF7F");
    ctx.fillStyle = grd;

    // Rotate the rectangle according to position
    // ctx.rotate(i*Math.PI/180); - DOESN'T WORK

    // Draw the rectangle
    ctx.fillRect(x, y, barHeight, barWidth);

  }

cyclamen

I have removed parts of the code for clarity. I am using rotation as you would expect. Also, I barHeight = (Math.random()* 50);switched to yours (musicArray[i]/4);because I wanted to show something.

Also, I have changed your bar to 180. Chances are you won't have 360 ​​bars, but 32 or 64 or 128 or 256. . . You can now change the bare metal number to one of these numbers to see the results.

I'm drawing everything around the origin of the canvas, with the context translated in the middle.

Hope this helps you.

const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 400;
let ch = canvas.height = 400;


let bars = 180;
let r = 100;

ctx.translate(cw / 2, ch / 2)

for (var i = 0; i < 360; i += (360 / bars)) {

  // Find the rectangle's position on circle edge

  var angle = i * ((Math.PI * 2) / bars);
  //var x = Math.cos(angle)*r+(canvas.width/2);
  //var y = Math.sin(angle)*r+(canvas.height/2);
  barWidth = 2 * Math.PI * r / bars;
  barHeight = (Math.random() * 50);


  ctx.fillStyle = "green";

  // Rotate the rectangle according to position
  // ctx.rotate(i*Math.PI/180); - DOESN'T WORK

  // Draw the rectangle
  ctx.save();
  ctx.rotate(i * Math.PI / 180);

  ctx.fillRect(r, -barWidth / 2, barHeight, barWidth);

  //ctx.fillRect(r ,0, barHeight, barWidth);

  ctx.restore();
}
canvas {
  border: 1px solid
}
<canvas id="c"></canvas>

Related

Rotate rectangle around circumference of circle on canvas

Mussmanson I'm trying to create a circular "equalizer" effect using JavaScript and HTML canvas for a small project I'm working on, and it works great, except for one small thing. It's just a series of rectangular bars moving to the mp3 over time, nothing fancy

Rotate rectangle around circumference of circle on canvas

Mussmanson I'm trying to create a circular "equalizer" effect using JavaScript and HTML canvas for a small project I'm working on, and it works great, except for one small thing. It's just a series of rectangular bars moving to the mp3 over time, nothing fancy

Rotate rectangle around circumference of circle on canvas

Mussmanson I'm trying to create a circular "equalizer" effect using JavaScript and HTML canvas for a small project I'm working on, and it works great, except for one small thing. It's just a series of rectangular bars moving to the mp3 over time, nothing fancy

Rotate circle around triangle canvas

KX0 I want to rotate a circle around a triangle using canvas. Had this code earlier, but here is the circle in the middle, and a rotated rectangle, I want the circle to rotate and have a triangle in the middle. Can someone help? Here is the JS code I have: var

Rotate circle around triangle canvas

KX0 I want to rotate a circle around a triangle using canvas. Had this code earlier, but here is the circle in the middle, and a rotated rectangle, I want the circle to rotate and have a triangle in the middle. Can someone help? Here is the JS code I have: var

Rotate circle around triangle canvas

KX0 I want to rotate a circle around a triangle using canvas. Had this code earlier, but here is the circle in the middle, and a rotated rectangle, I want the circle to rotate and have a triangle in the middle. Can someone help? Here is the JS code I have: var

JavaScript Canvas - Rectangle rotates around circle

Amma I'm trying to make a rectangle to rotate around a circle and rotate around itself. My wonderful drawing will show what I mean :) I made a rotated rectangle around the circle, but I cannot rotate the rectangle around it. Can someone help me? my code: var g

How to rotate a Sprite around a circumference in LibGDX?

username I want to rotate the sprite around a circle, but I can't do it. If I can't tell my problem, you can understand from this picture: Arctic 45 SpriteThere is a way setOrigin(), https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics

How to rotate a Sprite around a circumference in LibGDX?

username I want to rotate the sprite around a circle, but I can't do it. If I can't tell my problem, you can understand from this picture: Arctic 45 SpriteThere is a way setOrigin(), https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics

Rotate a line around a circle

jack blank I have two arcs with strokes and I want an animated line between them. The animation of the line should be perpendicular to the points of the inner circle. This is what I want, almost what I want. The problem is: The length of the wire is not the le

Rotate a line around a circle

jack blank I have two arcs with strokes and I want an animated line between them. The animation of the line should be perpendicular to the points of the inner circle. This is what I want, almost what I want. The problem is: The length of the wire is not the le

Rotate a line around a circle

jack blank I have two arcs with strokes and I want an animated line between them. The animation of the line should be perpendicular to the points of the inner circle. This is what I want, almost what I want. The problem is: The length of the wire is not the le

Rotate a line around a circle

jack blank I have two arcs with strokes and I want an animated line between them. The animation of the line should be perpendicular to the points of the inner circle. This is what I want, almost what I want. The problem is: The length of the wire is not the le

Rotate text around a circle

dbj44 I want to rotate some text (numbers) positioned around a circle so that it looks like this: In order to apply the rotation, I've tried this: .attr("transform", function(d, i) { return "rotate(" + (-90 + ((360 / dial.length) * i)) + ", 135, 135)"; });but

Rotate the box around a circle

DannieCoderBoi In the process of learning Javascript/jQuery - I've been trying to figure out how to do it, and I think I've completely screwed up JSFiddle. Fiddle : http://jsfiddle.net/y7qWw/ _ What I want to do is rotate the div around a circle so that it is

Rotate text around a circle

dbj44 I want to rotate some text (numbers) positioned around a circle so that it looks like this: In order to apply the rotation, I've tried this: .attr("transform", function(d, i) { return "rotate(" + (-90 + ((360 / dial.length) * i)) + ", 135, 135)"; });but

Rotate a line around a circle

jack blank I have two arcs with strokes and I want an animated line between them. The animation of the line should be perpendicular to the points of the inner circle. This is what I want, almost what I want. The problem is: The length of the wire is not the le

Rotate a line around a circle

jack blank I have two arcs with strokes and I want an animated line between them. The animation of the line should be perpendicular to the points of the inner circle. This is what I want, almost what I want. The problem is: The length of the wire is not the le

Rotate the box around a circle

DannieCoderBoi In the process of learning Javascript/jQuery - I've been trying to figure out how to do it, and I think I've completely screwed up JSFiddle. Fiddle : http://jsfiddle.net/y7qWw/ _ What I want to do is rotate the div around a circle so that it is

Java rotate rectangle around center

trs： I want to rotate a rectangle around its center point, it should stay where it should be drawn and rotate in that space Here is my code: AffineTransform transform = new AffineTransform(); transform.rotate(Math.toRadians(45),rectangle.width/2, rectangl

Java rotate rectangle around center

trs： I want to rotate a rectangle around its center point, it should stay where it should be drawn and rotate in that space Here is my code: AffineTransform transform = new AffineTransform(); transform.rotate(Math.toRadians(45),rectangle.width/2, rectangl

MapKit rotate rectangle around center

Igor Vojtenko I need to rotate a rectangle around its center, the rectangle is a polygon on the map kit, I have 4 points and a center. I rotate each point separately and then create new polygons. I use this code: if let rotation = rotation, let center = zo

Java rotate rectangle around center

trs： I want to rotate a rectangle around its center point, it should stay where it should be drawn and rotate in that space Here is my code: AffineTransform transform = new AffineTransform(); transform.rotate(Math.toRadians(45),rectangle.width/2, rectangl

Rotate svg path around circle

Usama nadeem I want to rotate a polygon around a circle. I want to fix the starting point of the polygon to the center of the circle like this http://www.enspiregroup.com . I tried a lot but got stuck. See code below. CSS and HTML5 .circle-segment {