I want to use a variety of location markers in a map, of different colors. I like google's "teardrop"-shaped ones so that the location itself is less obscured, due to the point top of the inverted teardrop.
This is a link to the green one:
http://www.googlemapsmarkers.com/v1/009900/
...and the green uses 0099FF
But what about the other colors? Is there a list somewhere or do I have to write a utility to convert color to RGB, or what?
Even with that, how would I know which colors are supported/supplied? Or are the colors dynamically generated based on the RGB value you pass?
UPDATE
Based on the chart here:
http://cloford.com/resources/colours/500col.htm
...I would expect that entering this:
http://www.googlemapsmarkers.com/v1/65535/
...would return a bright yellow marker, but instead I get:
"400. That’s an error.
Your client has issued a malformed or illegal request.
The parameter 'chs' must have a width of at least 1 pixel.
That’s all we know."
UPDATE 2
I also found that you can put text on the marker by inserting the text in the penultimate spot.
This returns a blank yellow inverted teardrop:
http://www.googlemapsmarkers.com/v1/FFFF00/
..and this:
http://www.googlemapsmarkers.com/v1/Platypus/FFFF00/
...returns an inverted yellow teardrop with the word "Platypus" plastered on top of it.
You can pass your own RGB color. I suppose the markers are dynamically generated when the server receive your request, but anyway, you can create the color you exactly want.
Related
In the attached Google charts Pie chart the labels fit well inside the segments. Determining the length of a bit of text in HTML5 canvas is easy enough - but how do you determine whether the label will fit into a particular segment (using trigonometry) ? As you can see on the image, two of the segments don't have labels inside the segment.
EDIT: Here's an example of what I have at the moment: https://www.rgraph.net/tests/canvas.pie/in-pie-labels.html
As you see the labels for the small segments overlap. What I'm after is a way to calculate whether there's enough space for the labels at the point where they're going to be rendered. If not, I can just not draw the label like in the example image above.
Could chord size be useful to do this?
Here's the forumulae for the chord size that I found via Google:
"Chord length using trigonometry = 2 × r × sin(θ/2); where 'r' is the radius of the circle and 'θ' is the angle subtended at the center by the chord."
I sorted it (in about one hour) after 3 days of trying to calculate it with trig by using the built-in context.isPointInPath() function...
Draw the text (transparent color) to get the coordinates (x/y/w/h) of it. You might be able to get away with measuring it to get the width and height.
Draw the segment in a transparent color and do not stroke or fill it. Also, do not close the path.
Test each corner of the text rectangle (formed the x/y/w/h that you got above) using the context.isPointInPath() function. If the function returns true for each corner of the rectangle formed by the coordinates of the text, then the text will fit into the segment.
Relatively simple question: for a plotted set of data, I'd like to outline a relevant region while not outlining every tile. See picture below, where I want to have an outline around the orange region without outlining every individual tile (which is what happens if I set the "colour" command within geom_tile to something
Map with relevant data in orange
How can I programmatically ascertain the html color hex codes for colors in a single spectral line? I'm definitely using the wrong terminology I'm just not sure how else to phrase it. This picture should bring clarity:
Notice how the cursor in the top rectangle is always in the same position. It's simply the cursor in the first bar that moves into different color segments, thus generating the hex codes visible below.
Is it possible to generate these programmatically?
it would take 3 steps to get there programatically:
choose the base color (for each of your screen shots its the right top corner)
then lighten it to the the right amount (the X axis of your squares)
then darken it to the right amount (the Y axis of your squares)
if your'e using precompiled css like SASS it would look like that:
$someColor: red;
$lighten: brighten($someColor,20%);
$darkenedColor : darken($lighten, 32%);
$darkenedColor will get you the point that you are looking for, it will work for any given $someColor
i wanted to make a turn based system like final fantasy tactics. I already created the map, which is 5x5 tiles grid and the characters which is each character places in the end of the tiles. I have 2 teams, which are named Red and Yellow.
------Red-------:
First character is at 0,0. Second character is at 0,1. Third character is at0.2, fourth character is at0.3, and the last one is at0.4`.
-----Yellow------:
First character is at 5.0. Second character is at 5.1. Third character is at 5.2, fourth character is at 5.3, and the last one is at 5.4.
I wanted Red team are moving first and make a decision (whether it is attack or wait), and after 5 characters of the Red team is already made a decision, the Yellow team is the one that make a decision (Yellow team is an AI)
But, i don't know how to move my characters into the next grid (e.g: from 0,0 to 0,1) by clicking the left mouse button and also how do i display a grid (when select a move selection) that shows how many tiles that the character able to move.
Anyone know about this? or how should i know more about this? is there any recommendations books or webs?
You have your basic data structures set up, but now you need to get some higher level code to manipulate that data.
First of all, I think you should work on selecting locations on the grid with the mouse. Once you can click and get that grid coordinate saved to a variable, you need to set up a function to move your characters. After the first click (on a character), you need to check the valid moves, and for each valid move, you need to render an image on the grid square (or highlight the square's texture).
Secondly, you need a function which iterates through all the characters in each team, according to who moves next. When you have gone through Red.length (red is an array consisting of each player), then you switch to counting through Yellow.length, and running the AI for each character. If you are trying to make a two player game, you instead ask for user input a second time for the yellow team.
I recommend that you learn about how to display your grid and set up a simple way to highlight squares on the grid. After that, you need to convert mouse coordinates into grid coordinates. Your teams should each be an array of characters. I'm not familiar with actionscript, but in the languages I know, they would look like this:
team[6] = {Character1, Character2, Character3... }
Character1.position = {x, y}
running a turn would be something like this:
while battle == not finished {
for (i = 0; i < red.length; i++) {
getInput();
move(red[i], newX, newY); //red[i].position = {newX, newY}
}
for (i = 0; i < yellow.length; i++) {
runAI();
move(yellow[i], newX, newY);
}
}
The hardest part will be the mouse selection and drawing the grid/characters. Graphics are always a nuisance. The data itself just takes a bit of thinking. Your question in particular seems to be about game programming. My advice is to make the grid, then figure out how to display the grid. Then get mouse input. Finally, worry about moving the characters and highlighting squares.
I´d like to know, how, through actionscript 3, to get an array of ARGB (hexadecimal) colors, that is close to a given color.
Example:
0xFF00FF00
A green.
How to get variations of green?
I´m trying to get some green colors of a bitmapdata.
I´ve tried to get it by making a loop getting the colors using getPixels32.
The problem is, I think the bits colors of each position are different from the bits of the bitmap rendered.
It´s for a pathfinder.
Each green bit sets a node in a map, as walkable.
So I need to know what are these colors to set it as walkable for the pathfinder.
Any suggestions?
RGB space is terrible for interpreting whether colors are similar to one another. A different color space that matches closer to human perception of color is HSV (hue saturation and value). Here are the steps you should follow:
Convert your value from RGB space to HSV (http://www.cs.rit.edu/~ncs/color/t_convert.html)
Modify the saturation and value to obtain different shades of the same green hue.
You can even modify the hue a little with a defined tolerance level you specify
Reconvert back to HSV to RGB
I believe technically..one color space is smaller than the other, meaning it is not always a 1:1 conversion - but it should serve your purpose.