0

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:
Text

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:
Text

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:
Text

Jason Aller
  • 3,475
  • 28
  • 40
  • 37
KD974
  • 19
  • 2
  • 7
  • 1
    I think instead of trying to calculate x-y coordinates for the control points directly, you should calculate deg-height coordinates, and then do the conversion to x-y. – tevemadar Sep 05 '21 at 21:01
  • 1
    @tevemadar Thanks, that's work perfectly. – KD974 Sep 06 '21 at 10:00

0 Answers0