How to add space/margin to the following stacked curved images?

Question

I'm using the following code to stack curved images side by side:

<a-curvedimage
  v-for="(value, index) in model"
  :theta-start="setThumbThetaStart(thumb, index)"
  :theta-length="30">

// thumb is not being used only the index (0, 1, 2, etc).
setThumbThetaStart (thumb, index) {
  return index * this.thumbLength
},

Result with 5 images:

(The order goes form right to left)

Image 1: theta-start = 0 theta-length = 30
Image 2: theta-start = 30 theta-length = 30
Image 3: theta-start = 60 theta-length = 30
Image 4: theta-start = 90 theta-length = 30
Image 5: theta-start = 120 theta-length = 30

How to modify the code so the images have space/margin between them?

Answer 1

Try adding margins in the theta angles such that the next theta-start doesn't begin right when the last image's theta-length ended. Here is with 15-degree margins:

Image 0: theta-start = 0 theta-length = 30
Image 1: theta-start = 45 theta-length = 30
Image 2: theta-start = 90 theta-length = 30
Image 3: theta-start = 135 theta-length = 30
Image 4: theta-start = 180 theta-length = 30