How to click on a Cell object? - javascript

I'm using Javascript, p5.js, and Daniel Shiffman's tutorial to create a visual representation of an A* search algorithm.
An image of an example grid looks like this:
example grid
Is it possible to click on any cell of the grid, in order to print out it's attributes? Based on Daniel Shiffman's other tutorial on how to click on objects, I understand I have to create 2 functions that activate and execute respectively. I understand how to do this with a circle because a circle has a radius.
But, I don't understand how to do this with a cell because I only have it's coordinates. I can't see how to use coordinates as a metric to calculate length.
I'd appreciate any guidance to my thinking. Thank you so much in advance.

I wrote a tutorial on collision detection available here. That's for regular Processing, but everything is the same in P5.js. You're looking for rectangle-point collision.
Basically, you need to check whether the point is between the left and right edges of the rectangle and between the top and bottom edges of the rectangle. If both are true, then the point is inside the rectangle.
I recommend breaking your problem down into smaller steps and taking those steps on one at a time. For example, try getting it working with a single hard-coded rectangle and point before you try it with multiple cells or with user input.

Related

Find the objects that a line intersects in three.js

Currently, I'm working on a three.js project where I should select two boxes from a board and draw a straight line connecting them, then I must highlight all the boxes that the line intersects. My big question now is how to to find which boxes the line intersects?
Any help would be appreciated (piece of code, links, material suggestion, math formulas)
What you're describing sounds like you're looking for a Raycast.
You set up your ray (it's position and direction vector), and then use intersectObjects on the objects to get an array of the boxes the ray intersects.
What I really needed in this case was bresenhams line algorithm, with this I can track all different points that the line crosses.
Found at https://www.geeksforgeeks.org/bresenhams-line-generation-algorithm/
Thanks Ivan and Diarmid, I know my code was a big mess and you tried to help me despite that.

Draggable line with draggable points in ReactJS or plain JS?

I've been working on trying to create a draggable line with draggable points on my website. I'm working on a really simple proof of concept.
So far, I have been able to get two draggable points, and a line that gets drawn between the two points, but I am really stumped on how I can also make the line itself draggable and just have the lines move along with it. (Basically like the behavior in DrawIO for editing a plain line https://app.diagrams.net - draggable dots with a draggable line)
Here's some of the proof of concept code that I have so far: https://codesandbox.io/s/stupefied-fermat-qpigl
I'm thinking I might have to create my own listeners on the line and have it manually update the coordinates of the endpoints since I don't think I can get Drawable to work with both the line and the points without it exploding.
Anyone have options or tips on how I could get this working?
Update: I was able to get the whole line to move but only by kind of working around the issue. I made a midpoint between the two endpoints and made that midpoint draggable. Based on how much that midpoint was dragged, I also dragged the endpoints. The line will always be calculated to be drawn between the endpoints. It's still not ideal though, as I was hoping to make the whole line draggable itself. Still would appreciate ideas!
Updated sandbox: https://codesandbox.io/s/jovial-pascal-8s6x2

Surround Highcharts points

I'm working on a project where we have some Highcharts graphs populated from database; one of them is an scatter graph and we need to surround the points placed on the outside area of the graph.
We need a graph like this but we need the area surrounding the outside points of the scatter; is there a easy way to do this with Highcharts?
We need it to work on IE11 (client's specs).
We can do it with a new polygon serie to make by getting it from codebehind or from database, but that may take too much development time and will slow down the queries. So we need to know if there is an easier way to do it via Highcharts or Javascript
Thanks in advance.
I am not very familiar with Highcharts, but i could not find such functionality in their API. However there is an easy algorithm to solve your problem.
All you need is to have an array containing the border elements and connect the points from this list like here.
Finding those points is not too hard. Compute the linear equation between two extreme points (like the one on the very top and very right). The resulting formula looks like f(x) = m*x + b
Now you check for all points within that x-range if their y-coordinate is higher than this line (or lower when doing it with the point on the very bottom). If so just add them to your border array and continue with the other extreme points.

Draw Zoomable Time Line With Scroll Bars On Html5 Canvas

I need a Time Line For My Web Project.
Something like this - I read the code of this Time Line but did not understand it because it is not documented enough.
My problem is the math behind all of this (not the interaction with the canvas).
I have read several articles about the math of the scroll bars, but none of them talk about zoom.
Some
articles suggest to hold canvas element with very large width value - and to display just the
View Port.
I don't think that's the right way to do it - I want to draw just the correct viewport.
In my project, I have array of n points.
Each point holds time value represented in seconds, but not all of the points are within the Viewp Port.
Considering the current zoom level, how do I calculate:
What points should be drawn and where to draw them?
What is the size and position of the thumb?
Any articles / tutorials about such a thing?
You might be able to use something like Flot which handles the placement of points, as well as zooming and panning. Here's an example of that.
There are a bunch of other drawing libraries, here a good list.
You always have Raphealjs.com , one of the most used library to play with SVG, with this you can write your own js to generate the timeline.

Animate rotated objects with Raphaƫl.js

I'm my current project I need to draw robots and move them around.
A robot is composed of a circle and a box which shows the current orientation of the robot.
My problem is that I when I animate them, the orientation box moves in a strange way because of its rotation...
Here's what I mean: http://jsfiddle.net/zmunB/
Thanks for your help.
Balzard.
This fiddle shows another option. It may not be quite as elegant as rajkamal's solution, but it may be easier to understand if you are not used to working with matrices. You should be able to add features to it at will (notice the 'eye' I added).
Basically, I am just adding the features to a set, and applying the transformations to each element in the set. Kick off the animations by clicking the colored squares to the right. Note that 'Move relative' will make the set move in the direction it is 'looking'.
Please refer this fiddle. http://jsfiddle.net/apUvX/2/ , for transformed movements.
Here in "onAnimation" method of circle, we are transforming the circle's center coordinate to the
rectangles coordinate system using Matrix.x,Matrix.y and assigning the result to the the x,y of the rectangle.

Categories