I want to create an audio visualizer with CreateJS (EaselJS).
More exactly a circle that use quadraticCurveTo for positioning points and draw these lines.
I successfully created this circle with the use of moveTo and lineTo.
Which, was easy...
Result in:
So, I tried to apply the same things with quadraticCurveTo.
I used this method to calculate each values: https://stackoverflow.com/a/40978275/9439964
let b = this.style.bars // Object who store all defaults values
let len = this.audio.length // length of 64
let posX = this.size.vw * this.style.x // This place "x" at center (x = 50)
let posY = this.size.vh * this.style.y // Same but for "y" (y = 50)
let minHeight = b.base // Minimum radius (base = 25)
let maxHeight = b.peak // Maximum radius (peak = 10)
let points = []
for (let i = 0; i < len; i++) {
let n = i
let n1 = i + 1 >= len ? 0 : i + 1
let deg1 = (((360 / len) * Math.PI) / 180) * n
let deg2 = (((360 / len) * Math.PI) / 180) * n1
// This.audio is an array of value between 0 and 1
// In this case: array[i] = i % 2 == 0 ? 0.3 : 1
let val1 = this.audio[n] * maxHeight
let val2 = this.audio[n1] * maxHeight
let height1 = this.size.vh * (val1 + minHeight)
let height2 = this.size.vh * (val2 + minHeight)
let x = posX + Math.cos(deg1) * height1
let y = posY + Math.sin(deg1) * height1
let x1 = posX + Math.cos(deg2) * height2
let y1 = posY + Math.sin(deg2) * height2
let x_mid = (x + x1) / 2
let y_mid = (y + y1) / 2
let cp_x1 = (x_mid + x) / 2
let cp_x2 = (x_mid + x1) / 2
let cp_y1 = (y_mid + y) / 2
let cp_y2 = (y_mid + y1) / 2
points.push({
x: x,
y: y,
x1: x1,
y1: y1,
x_mid: x_mid,
y_mid: y_mid,
cp_x1: cp_x1,
cp_x2: cp_x2,
cp_y1: cp_y1,
cp_y2: cp_y2,
})
}
I used points for placement:
// $ = createjs
let spline = new $.Shape()
spline.graphics.setStrokeStyle(3)
spline.graphics.beginStroke("#FFF")
spline.graphics.mt(points[0].x, points[0].y)
for (let i = 0; i < len; i++) {
spline.graphics.qt(
points[i].cp_x1,
points[i].y,
points[i].x_mid,
points[i].y_mid
)
spline.graphics.qt(
points[i].cp_x2,
points[i].y1,
points[i].x1,
points[i].y1
)
}
Who created this:
After research with changed values ... I think the formula used was not appropriate for this case.
What I saw is the two first value of each quadraticCurveTo was valid for a very small part, the 2 others was fine.
So, what I want is a smooth curve like the top and bottom line.
Do you know how I can do this for all degrees of this circle?
EDIT: Response
Calculate independently controls points with the new angle.
// n2 = n + 1
// n3 = old cp_x1 but instead of x, calculated with n
let n3 = ((n + n2) / 2 + n) / 2
let deg3 = (((360 / len) * Math.PI) / 180) * n3
let cp_x1 = posX + Math.cos(deg3) * height1
let cp_y1 = posY + Math.sin(deg3) * height1
// same for n4 but with cp_x2
let n4 = ((n + n2) / 2 + n2) / 2
let deg4 = (((360 / len) * Math.PI) / 180) * n4
let cp_x2 = posX + Math.cos(deg4) * height2
let cp_y2 = posY + Math.sin(deg4) * height2
// Within the placement part
spline.graphics.qt(
points[i].cp_x1,
points[i].cp_y1, // before: points[i].y
points[i].x_mid,
points[i].y_mid
)
spline.graphics.qt(
points[i].cp_x2,
points[i].cp_y2, // before: points[i].y1
points[i].x1,
points[i].y1
)
Final result: