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.
here is a very jenky update. But it shows what I’m trying to accomplish a bit better.
Hello there,
Would you mind expanding on this? What are you trying to accomplish?
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.
this is what I’m working with today.
kinda hard to see. but this is what I’m trying to replicate.
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.
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!
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)
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?
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.
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/
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.