KPC
Kevin Powell - Community•5d ago
i_lost_to_loba_kreygasm

Can anybody help me place the small images on the edges exactly?

4 Replies
Jochem
Jochem•5d ago
You've made a small logic mistake. Math.cos() takes angles in radians, not degrees, so when you add 45 to angle that's technically nonsense. This should work: 
    let x = radius + radius * Math.cos(angle + (Math.PI / 8));
    let y = radius + radius * Math.sin(angle + (Math.PI / 8));
    let x = radius + radius * Math.cos(angle + (Math.PI / 8));
    let y = radius + radius * Math.sin(angle + (Math.PI / 8));
Though this is probably a better solution: 
    let angle = (Math.PI / 4) * index + (Math.PI/8);
    let radius = container.offsetWidth / 2;
    let x = radius + radius * Math.cos(angle);
    let y = radius + radius * Math.sin(angle);
    let angle = (Math.PI / 4) * index + (Math.PI/8);
    let radius = container.offsetWidth / 2;
    let x = radius + radius * Math.cos(angle);
    let y = radius + radius * Math.sin(angle);
keep in mind too that you're not technically positioning the images with their center at each vertex of the octagon. you're positioning them on the circle that's contained by the octagon, rather than the circle that passes through the vertices of the octagon I'm sure there's math you can do to figure that out, but I'd personally just add a small amount to the second radius in the x and y calculation until it looks alright 
    let offset = ???;
    let x = radius + (radius + offset) * Math.cos(angle);
    let y = radius + (radius + offset) * Math.sin(angle);
    let offset = ???;
    let x = radius + (radius + offset) * Math.cos(angle);
    let y = radius + (radius + offset) * Math.sin(angle);
i_lost_to_loba_kreygasm
i_lost_to_loba_kreygasmOP•5d ago
i am bad at maths , why do i have to add (Math.PI/8)? but thank you for the solution 🙂
Jochem
Jochem•5d ago
Math.cos takes arguments in radians, not degrees. You were adding 45 in degrees to try to get it to be in the right place, but you were adding 45 radians, which is equal to ~650°. Pi/8 is 22.5°. if I'm honest, I tried Pi/4 first and that had zero result, so I changed it to Pi/8 and that looked good the trick with this kind of math is to sorta kinda maybe understand half of what's going on, then fudge the numbers and the +'s and -'s until it looks good so for me, the answer to "why add Pi/8" is "the entire thing looked like it was rotated by a little, so you have to add an angle offset", then just magic-number it until it looks good. Usually if the magic numbers are nice round ones, it's actually the proper solution. thinking about it, actually, it does make some sense. The corners on an octagon are 45° apart (360° / 8 corners). 0° starts right at the top of the circle though, right between two vertices on the octagon, so you have to rotate the circle half of the angle between two corners
MarkBoots
MarkBoots•4d ago
i was playing with this too and took it a bit further. as you are calculating the positions of the corner elements (the images) you could also use that for the clippath polygon. i you want to dynamically create a shape based on the amount of elements inside, you could do something like this. so here there are 8 corners, but it will work for any amount >=3 https://codepen.io/MarkBoots/pen/ogvdQVX?editors=1111
Mark Boots
CodePen
Untitled
...

Did you find this page helpful?