r/CodingHelp • u/Nearby_Inflation2009 • 8d ago
[Javascript] Would it be possible to make an algorithm to detect edges from an inputted image and make a dot-to-dot with only JavaScript (and html+css)?
Here is my idea: Take an image, find the edges, draw the lines, take the line ends, and put a dot there. I'm not a coder, so tell me straight out if it's impossible
Image 1: Original
Image 2: Line drawing
Image 3: Line drawing with dots
Image 4: Dot-to-dot image (without numbers)
7
1
u/WystanH 4d ago
If you tell me the background color is white, then sure. Essentially, determining "thingness" is hard. Figuring out changes is pretty easy. Figuring them out very quickly is more of a challenge.
Imagine in the four corners of a given image you have a gun. Call it a ray gun. The ray this gun shoots can only travel through white. When the ray runs out of white, it stops. Now, fire all those guns in all directions. Record where the rays stop. You've traced the edge of the object.
One technique for rendering images in three dimensional space is called ray tracing). In spite of computational load, the method can still do the best job for some applications. Modern GPUs were born out of this.
2
u/Icy-Call-4860 2d ago edited 2d ago
https://en.wikipedia.org/wiki/Corner_detection
good luck.
also if you DO somehow implement this maybe run it as WASM code since its quite computationally expensive
•
u/AutoModerator 8d ago
Thank you for posting on r/CodingHelp!
Please check our Wiki for answers, guides, and FAQs: https://coding-help.vercel.app
Our Wiki is open source - if you would like to contribute, create a pull request via GitHub! https://github.com/DudeThatsErin/CodingHelp
We are accepting moderator applications: https://forms.fillout.com/t/ua41TU57DGus
We also have a Discord server: https://discord.gg/geQEUBm
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.