Connect the dots

hey y’all.

I’m making an app with the canvas api. I have this wheel of dots. I am trying to connect the dots with a line. There can only be one connecting point per row. Does anyone have any idea how to accomplish this or some resources to point me in the right direction. Or just general suggestions to make this code cleaner. Thanks in advance.

https://jsfiddle.net/kt467rev/

here is a very jenky update. But it shows what I’m trying to accomplish a bit better.

https://jsfiddle.net/kwtnvqu5/

another update.

https://jsfiddle.net/x0p1bysf/3/

any input would be awesome!

Hello there,

Would you mind expanding on this? What are you trying to accomplish?

1 Like

hey @Sky020!

yeah, so this is a flavor wheel. each line is a different flavor “salty, sweet, sharp/tangy etc…”. Each line is a rating of that flavor ranging from 0, closest to the center. to 5 outer rim of circle. you can only pick one dot per line, in other words one rating per flavor. when all of the lines have a flavor rating a shape will be created illustrating the overall flavor profile.

1 Like

this is what I’m working with today.

https://jsfiddle.net/pwdq5nrg/

kinda hard to see. but this is what I’m trying to replicate.

image

Thank you,

That is much clearer.

First way to make the code nicer to look at:

const moves = [
[100,100]
];
const lines = [
[0,100],[0,60],[0,0],[60,0],[100,0],[140,0],[200,0],[200,60],[200,100],[200,140],[200,200],[140,200],[100,200],[60,200],[0,200],[0,140]
]
ctx.beginPath();
// lines
for (i of lines) {
  ctx.moveTo(moves[0][0], moves[0][1]);
  ctx.lineTo(i[0], i[1]);
}
ctx.stroke();

Similar can be done for the inner Circles. When in doubt, DON’T REPEAT YOURSELF (DRY).

I will edit this post, if I can see a way to accomplish what you want.

1 Like

Thank you for your input @Sky020 . I really appreciate it. That code looks a lot cleaner. I will implement this.

So far I have been able to connect the dots by pushing the clicked coordinates into a new array. but it’s not complete because you can still pick multiple dots/ratings per line. It’s getting there though. slowly but surely. I’m gonna take a break from the computer for a few days. But when I get back, I’ll post some more updates. Cheers!

1 Like

My approach: I would represent each flavor profile as an array of 16 values from 0 to 5. Your function which draws the flavor profile should take in this array and loop though, plotting each point as a multiple of x(SIN/COS(i*PI/8)

1 Like

ok. I think I can see what your saying. could you explain how the x(SIN/COS(i*PI/8) works?

I’ve been working non stop on this all day, and I finally have a working draft. check it out

https://jsfiddle.net/5k6vxr7e/1/

its very rough. But I’m actually kindof amazed that I got it to work. Let me know if you see of any way I can improve it!

PI/8 (1/16th of a circle) refers to the spacing between the individual flavor lines on the chart, so i*PI/8 refers to iterating through the entire set of flavors. SIN(i*PI/8) & COS(i*PI/8) will give you the coordinates of points on those flavor lines at radius = 1. X is the flavor “intensity” value, from 0 to 5, so if you multiply the SIN & COS by X, (& probably also by some radius value,) you will have the correct positions for the flavor profile.
Is this more clear?

1 Like

Some feedback: Rather than saying, "You can only place ONE value per flavor profile, just replace the former value with the new one instead. The user is always right.

2 Likes

There’s lots of places this can be optimized. For example, instead of drawing each ring explicitly, you can make them with a loop:

for (i=20; i <= 100; i+=20){
ctx.beginPath();
ctx.arc(100, 100,i, 0, Math.PI * 2, true); // Inner circle
ctx.stroke();
}

Have a look at the changes I made here:
https://jsfiddle.net/Jianju/yopLkc0t/14/

1 Like

yes, this is more clear. Although I do not fully understand it yet. I am seeing some parallels from the the polar to Cartesian equations that I’ve seen during my research.

here is my pen that I used to find the cartesian x, y coordinates for the new iteration of this project.
https://codepen.io/edubz/pen/yLgRYXq?editors=0011

This is my current iteration. I decided to switch to an svg version instead of a canvas version for now.
https://codepen.io/edubz/pen/ExZMbdo

totally. great idea! I will work on implementing that.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.