I wish to create something like a virtual forest.
I have:
fixed size div, where I wish to spread the trees
Random number of trees (each tree is a PNG)
small square div in the center that should be kept clear of trees
How can I spread the trees so they:
Wont overlap each other
Wont get into the central div
Calculate their size (css) so all trees will fit into the div
Thanks
More info as requested:
All the tree images has same dimension
Container div has a fixed dimensions of 500x300 px
Small central div has a fixed dimensions of 30x30 px
The png native resolution is 60x60 px
I created the following php script, but it does not handle the empty location nor its accurate in fitting the images into the div:
$forest1 = null;
for ($a=1; $a < 201; $a++) {
// width * height (500*280)
$total_area_in_pixels = 140000;
$total_elements = 200;
$area_per_object = $total_area_in_pixels / $total_elements;
$element_height = round (sqrt($area_per_object) / 100 * 70);
$random_margin = rand(0, $element_height / 5);
$tree_type = rand(1,4);
$style = "height: {$element_height}px; margin: {$random_margin}px;";
$forest1 .= "<img src='images/trees/tree{$tree_type}.png' alt='{$a}' title='tree' style='{$style}'>\n";
}
You need to figure out how you want to do the positioning first. You can either set the trees absolutely based on the div parent as a container, or you can position the trees absolutely based on the entire page as a container.
To use the parent as a container, you would do this:
Set the div to position: relative. Write javascript to create IMG elements and then set their position to 'absolute'. Make sure that when you create the elements you create them as child elements of the DIV you want to contain them.
TO use the page as a container, you would do this:
Write javascript to create IMG elements and set their position to 'absolute'. Don't bother making them child elements of the DIV because it doesn't matter. Use jQuery or a basic javascript test to find out the exact page position of the container div. Everytime you place a tree, you will need to calculate its position with respect to the container div.
Position trees basically like this:
Write a simple algorithm to generate random x and y coordinate pairs to position each element and do so. Then check each tree's position and width and height against the square area you don't want to be covered. If you find a tree in that area, either move it some to get it out of the area, or delete it. Just make sure to remember that if you're positioning absolutely within the whole page, you'll always have to add or subtract the page container position as an offste to get the trees where you want them on the page.
That should be enough to get you started.
Related
I have an image that was changed through Javascript and that image is placed on top of a background image, however when I look at it on the site you can see a clear square where the image was placed.
I wanted to know if there is a way to fade the images edges and have the background come in, making it look one.
Sidenote. I also wish to avoid JQuery at this time, If possible I would like to achieve this through javascript.
Here you can see the site page: http://imgur.com/a/vC9VV
Javascript code:
// attempting to move the images only
var y = document.getElementById("pic2");
// Sorted by pathing the image to the folder ( can use .. to get in the folder)
y.setAttribute("src", "../images/water_image1.png");
y.style.cssFloat = 'right';
// change the images to the same size as the replacing pic
y.style.width = "400px";
y.style.height = "250px";
// This is sorting out the alignment with the text
y.style.margin = "110px 20px 10px";
y.style.opacity = "0.8";
You could loop through each pixel of image and set the value of its alpha channel depending on distance to closest border of image, then render the result on <canvas>.
For easier but less generic approaches, take a look at this.
I'm making a drawing application which involves clicking in a div box and reading co-ordinate values. The problem with it so far is that the coordinate values aren't correct relative to the box.
Here's my setup.. the drawing application starts off by loading simple HTML and then a DIV exclusively for drawing. Then I use a click handler to detect a click and return co-ordinates.
The width and height return fine because I defined them for the DIV, but the top and left positions return NaN in javascript.
I know I can easily do this with using css property position="absolute" for the DIV and specifying left and top that way, but that would wreck the rest of the HTML document because then the whole thing would look out of place.
Is there a way I can get a top and left value of DIV without explicitly specifying the two values for the DIV?
I want to achieve this with simple javascript. No jquery.
jsBin demo
function getXY( ev ){
var gbc = this.getBoundingClientRect(),
X = ev.clientX - gbc.left,
Y = ev.clientY - gbc.top;
alert( X +' '+ Y);
}
document.getElementById('board').onclick = getXY;
https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/event.clientX
https://developer.mozilla.org/en-US/docs/Web/API/event.clientY
I need to do something like this:
This may look quite easy, but there are some requirements:
- the width of the containing div should depend on the text length (is it possible at all in CSS?)
- all circles should be positioned randomly - this is the most diffucult part for me.
As I'm using border-radius for creating circles (setting height, width and border-radius of 50%) I try to create some kind of grid in JavaScript where I iterate through each element and get its dimensions. Then I get the position of previous element (if any) and add them to the current element dimensions. Additionally, adding some margins will help avoid collisions. Is it correct approach?
I'm just looking for a suggestion how to solve my two issues.
Circles that scale based on size of content.
This is something you will need to solve first, because you wont be able to place them anywhere without first knowing their dimensions.
Naturally the size of a DIV expands first by width, then by height. That is, the maximum width of a container must first be utilized before moving on to the height constraint. Because of this, making a circle scale with equal radius may prove to be quite difficult without using a relative averaging.
Relative averaging is finding the average dimensions of your height / width based of the exhisting area of the contianer bounding your content. For example:
The width and height of the DIV bounding your content can be detected with javascript. Let's say youve discovered those properties too be 200px x 20px respectively.
Your total area is width * height so 4000px; But we are trying to acheive a square so we can apply rounded corners and form a rounded circle. We want to find dimensions of a rectangle that will be equal to the same area and then apply those new dimensions.
To acheive the same area with an equal width * height you can do something like:
√ 4000 = 63.2455532
Thus: 63.2455532 x 63.2455532 = 4000
Random placement of DIVs, and avoid collisons between DIVs.
After finding dimensions, you will be able to use a rand on your (X,Y) coordinates for the placement. Push these coordinates and radius onto an array. Use recursion too place the remaining circles on collsion failures. A collision failure would come from an element that has overlapping (X,Y)+radius relative too elements in the array that were pushed successfully.
How can I draw a line between every h2 element on my HTML page so that I can receive the effect in the picture below? Initially, I would presume you would go about this by working out the size of the line required in-between the divs (divs are separated by the 1px horizontal line) + the distance between each of the h2s, but i'm not entirely sure how one could work out this distance.
You can try something like:
a) find the position w.r.t document (i.e. by calling $(element).offset()) of the 2 elements you want to connect, call the positions p1 and p2
b) Append an absolutely positioned canvas to the body with a z-index to ensure it is displayed on top of everything else.
c) Draw a line between p1 and p2 on the canvas
This is assuming the elements can be anywhere on screen. If the line you need to draw is assured to be always horizontal or vertical, it can probably be done in a simpler manner.
Just use offset() method. You can easily find the distance between elements using it.
I'm building a web-app that will allow users to drag and drop from a static set of 30 draggable elements onto a droppable canvas. I want to record the draggable elements positions inside the droppable div with x & y offsets from the top left corner.
My current strategy for doing this is to first use .offset() to record the x&y position of the droppable div and then subtract this from the .offset() returned by the draggable element that was dropped to get the position from top left corner of the droppable. I will then convert my X & Y values into percentages of the width and height of the box.
Is there a better way of doing this? Will I run into problems later when I try and display saved sets of elements with positions inside the div? Thanks!
I think as long as you also save the height, width of the box then it can be reconstructed as you have all the required data to do so.