Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Draggable objects

redblobgames.com

Post reply on HN
Print view View original

71–80 of 147 posts

Re: Draggable objects

#71

Post by penteract »

collinmanderson wrote: post #68
amitp wrote: post #38

Thank you everyone! What a surprise to be on HN today. Happy to answer questions!

Have you looked at html's built-in draggable="true" attribute and drag events? Are there shortcomings with the built-in feature compared to your code? https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement... https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement... https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

I'm not Amit, but from the article:

> Note that this is not the HTML Drag and Drop API, which involves dragging an element onto another element. For my diagrams, I’m dragging but not dropping, and the scrubbable number example shows how I’m not necessarily even moving something around. So I need to read the mouse/touch events directly.

The drag and drop API is doing a different thing that isn't always appropriate - you can get it to do roughly what this article is talking about by making the thing being dragged invisible just after the dragging starts, but it can shrink things and doesn't let you edit them as DOM nodes after the dragging has started. It also lets you drag something out of the browser window and try to put it into a completely different window.

Re: Draggable objects

#72

Post by pupppet »

wildrhythms wrote: post #67

This article is about dragging, and I've run into all of the pitfalls and come to the same solutions that Amit talks about. Excellent article! One of the hardest things I have needed to code from scratch is drag-to-reorder. It seem so natural from a user perspective, but when you get into inconsistently sized items, having to create placeholders between items, detecting edges, going down rabbitholes of box-fitting al…

Oof, or drag-to-reorder while supporting nesting.

Re: Draggable objects

#73

Post by amitp »

feoren wrote: post #20

Apart from the excellent subject matter, I often pull up this site during UI/UX discussions. Amit clearly has the ability to do really advanced JavaScript visualizations, but he only uses it exactly when necessary. Most of it is a plain document like you might write in Markdown, but when he uses JavaScript, it's illuminating, connected to all the other examples, and clean. Any animation he uses is clearly initiated b…

Thank you! I treat them as documents, with some interactive elements. I tend to avoid traditional animations because they're outside the reader's control. I want the reader to be able to pause, slow down, speed up, rewind, etc. One thing I'm going for but haven't completely achieved is that I want the diagrams to be useful even before the interaction.

I am collecting some of the design elements here: https://www.redblobgames.com/making-of/little-things/

Re: Draggable objects

#75

Post by amitp »

collinmanderson wrote: post #68
amitp wrote: post #38

Thank you everyone! What a surprise to be on HN today. Happy to answer questions!

Have you looked at html's built-in draggable="true" attribute and drag events? Are there shortcomings with the built-in feature compared to your code? https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement... https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement... https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

Many of the interactions I'm working on aren't about dragging elements, but instead using the drag motion to do some action. I also had trouble getting the drag-and-drop API to work inside SVG elements. I think it's solving a different problem than what I'm trying to use it for.

Re: Draggable objects

#76

Post by bastawhiz »

displaynone wrote: post #64

One thing missing: accessibility. how ought facilitate drag using keyboard controls?

Overwhelmingly, the answer is "you don't." Your UI should provide alternatives to dragging that allow folks who can't use a point/touch devices to interact with your page. Which is to say, don't shoehorn keyboard support into your drag implementation, add separate keyboard functionality that makes sense in addition to drag functionality.

Re: Draggable objects

#77

Post by trees101 »

VHRanger wrote: post #57
trees101 wrote: post #54

Do graph search algorithms have applications for strategy? https://www.redblobgames.com/pathfinding/a-star/introduction... Consider a game like age of empires. The cost of attacking a village goes up when a wall is built around it. But when canon are invented, the cost goes down. Can we model each map (before and after invention of canon) and use it to plan a strategy? Same for building a port , portal or airport.

That's effectively search on the decision tree. There's a lot of research on this! Look into Montecarlo tree search, CFRM, AB pruning, and also more recent deep learning methods. It's a very exciting area of research

Thank you!!! Comments like this are why I love this site.

Re: Draggable objects

#78

Post by trees101 »

recursivecaveat wrote: post #62
trees101 wrote: post #54

Do graph search algorithms have applications for strategy? https://www.redblobgames.com/pathfinding/a-star/introduction... Consider a game like age of empires. The cost of attacking a village goes up when a wall is built around it. But when canon are invented, the cost goes down. Can we model each map (before and after invention of canon) and use it to plan a strategy? Same for building a port , portal or airport.

I would guess it's probably not worth it because "how much do cannons improve my overall position" is a tricky question, and making a really intelligent and sophisticated answer is not really visibly distinct to players from a stupid heuristic like a sigmoid function of how many walls the player has built. It's an amusing curiosity that you can build stupid walls and trick the AI into researching the tech, but it's b…

I agree, it seems tricky to actually quantify. The hard part is to create the graph in the first place, before you start the graph search. There must be methods for creating simplified approximations.

Re: Draggable objects

#79

Post by amitp »

tjfjr wrote: post #70
amitp wrote: post #38

Thank you everyone! What a surprise to be on HN today. Happy to answer questions!

Does redblobgames.com have its own RSS/Atom feed? In its footer there is a link to the feed for your other blog, simblob.blogspot.com. I'd love to keep tabs on both of these blogs in my feed reader. Big fan of your writing, btw!

Thanks! The short answer is: no.

The longer answer is: I'm not actually sure how to solve this problem. The second site, simblob.blogspot.com, is an actual blog. It's time ordered. It has posts. But the main site, redblobgames.com, is structured as a "living document" site, not as a blog. Things are not posted in order.

I could try an automated feed that looks for any changes on pages. But I make small changes all the time. For example on [1] I changed "So far we’ve made step have the same" to "So far we’ve made steps have the same". I've been fixing a lot of broken links and typos this week, so there are lots of pages that have changed, but not in meaningful ways. I don't want those showing up on the RSS feed.

The second problem with an automated feed is that I have pages that aren't meant for publication. I collect notes for myself before I write an article, sometimes for years. For example [2] is something I may never get around to publishing. I don't want new pages to show up on the RSS feed, because most of them aren't ready yet, and some may never be.

So an alternative is for me to manually add entries to an RSS feed when they're "meaningful". I'm trying to do this by posting to the simblob.blogspot.com blog. An example is [3] where I describe the changes I'm making to the mapgen4 page. These wouldn't have been picked up by an automated feed because the HTML didn't change, but the interactive part did, so I wrote about it. Another example is [4] which is about changes to the hexagon page. I'll also go into a lot more details about why I made those changes [5].

But manually writing blog posts means there will be changes that won't show up in the RSS. Ideally I'd have some kind of automated way to flag meaningful changes to the site, but until then I am trying to write meaningful changes on the blog.

[1] https://www.redblobgames.com/pathfinding/a-star/introduction...

[2] https://www.redblobgames.com/articles/probability/loot-drops...

[3] https://simblob.blogspot.com/2023/04/improving-mapgen4s-boun...

[4] https://simblob.blogspot.com/2023/04/explaining-hexagon-layo...

[5] https://simblob.blogspot.com/2022/11/introduction-to-hexagon...

Re: Draggable objects

#80

Post by amitp »

bmitc wrote: post #69
phkahler wrote: post #31

The page reminded me of Ken Perlins' page: https://cs.nyu.edu/~perlin/ Yes, the Perlin noise guy among many other things.

I always wish there was more specification surrounding his Perlin noise algorithm he has on his website. For example, asking what the range of output values is does not have an easy answer.

I agree, more should be written about Perlin Noise range. You might find this useful: https://digitalfreepen.com/2017/06/20/range-perlin-noise.htm...

In addition to range I'd like to see the distribution, especially with multiple octaves of noises added together. I haven't found a good page about that.

Post reply on HN