rotating rectangles in javascript implementations needed

Question

I'm trying to implement a function in javascript that will do the following:

Allow the user to specify the number of input rectangles (between 3 and 30). Generate the requested number of input rectangles (with random widths and heights) and write them to a file (human readable). Read the randomly generated input rectangles from the file generated in the step above. Display the input rectangles graphically, correctly laid out, as in the example. Calculate the output rectangles. Display the output rectangles graphically, correctly laid out as in the example above. Note: Both the input and output rectangles must be displayed at the same time. Write the output rectangle coordinates into an output file (human readable).

Input: A random set of rectangles placed next to each other, from left to right, on the same baseline. Output: Output the minimum number of vertically stacked rectangles that represents the same area and resulting shape as described by the input rectangles.

A the moment this below is where I stand, I found a part of this code but now I'm stuck and can't get it to work with all this implementations, how can I add input value from 3 to 30? how the result will display input and output at the same time?

Any hint is truly appreciated.

<script>
function doit() {
 drawRectangle(100, 150, 200, 100);
 myrect = document.getElementById("newdiv");
 myrect.innerHTML= myrect.innerHTML + "<h1>howto</h1>";
} 

function drawRectangle(left, top, width, height) {
 if (document.createElement) {
   newdiv=document.createElement("div");
   newdiv.style.position="absolute";
   newdiv.style.left = left+"px";
   newdiv.style.top  = top+"px";
   newdiv.style.width = width+"px";
   newdiv.style.height = height+"px";
   newdiv.style.backgroundColor = 'red';
   newdiv.style.visibility = 'visible';
   newdiv.id = 'newdiv';
   newdiv.innerHTML = "real";
   document.body.appendChild(newdiv);
   }
 }
</script>

like, you want to output rectangles (coordinates of rects) to a file - a file on the client? — Parth Thakkar, May 04 '12 at 15:53

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

I created a JSFiddle for you to show a basic starting point using your existing code and for you to play around in if you want. I added a <input> element to allow you to specify the number of rectangles to draw. However, I leave it up to you to change your doit method to actually draw more rectangles.

As for the geometry question of determining larger rectanlges to fill the space of all the smaller rectanlges, see this SO question.

You may also want to think about using the canvas to draw the rectangles instead of div elements as it will be much easier to draw larger numbers of them and to separate the output and input rectangles.. A nice basic tutorial can be found here.

edited May 23 '17 at 11:48

Community

1
1

answered May 04 '12 at 15:38

Brant Olsen

5,628
5
36
53

Hi Brant, thanks so much for all the useful info, however at this stage I still can't figure out how to turn the div into canvas making it draw multiple rectangles, also can't get how it can be calculating the coordinates of the elements. I've attached the missing samples images in my previous message. I've made some changes to the fiddle you sent me to no avail: [link]: http://jsfiddle.net/brantolsen/aWH2D/2/ "JSFiddle" – aurinko May 07 '12 at 07:40
I believed I've attached the images, although I just noticed I got an error since I'm a new user and not allowed yet to post images. – aurinko May 07 '12 at 11:59
@TancrediLeone I updated my JSFiddle to show both how to get `x` and `y` values from the divs as well as how to draw on a canvas. Please remember to click the update button when you change a fiddle otherwise I cannot see your changes. When you do click the button the number at the end of the fiddle will increment by one. – Brant Olsen May 07 '12 at 16:33
@ BrantOlsen I don't know how to thank you :) looks amazing, it would have took me another week or so to figure this out by myself, may I ask you where did you learn javascript like this? I'm just a self taught, I'd love to be that good one day. I'm now working on making it draw the rectangles, if I push the run button it doesn't create any atm. It's weird since all seems pretty much in place. I'm trying to test by changing the input value in the textbox and see what happens, but it looks like static with the four rectangles. – aurinko May 08 '12 at 07:59
@BratOlsen Now I got it, you need to add the drawRectangle function for as many rectangles you need, although can't understand how to put the creation of rectangles in relation with the input value from the textbox, I mean when I enter 5 it should create 5 rectangles and so on, I guess. – aurinko May 08 '12 at 08:14
@TancrediLeone Updated my Fiddle with drawing multiple rectangles based on the input field. For learning more Javascript, I would suggest thinking up your own projects and then as you have questions either consult https://developer.mozilla.org/en-US/ or check here on stackoverflow. You may also want to follow the Javascript tag on stackoverflow, http://stackoverflow.com/feeds/tag/javascript, in an rss reader to read the answers for questions that you like. – Brant Olsen May 08 '12 at 15:07
that's truly great, I'm amused now it's working even better, you know I've been always implementing a lot of JS small projects (sush as images galleries, menus, scroll buttons) but not really much writing my own, so that is kind of important.Furthermore recently I've been doing a lot of project using C.M.S. and therefore using more other languages. It's nice to know that you learned with mozilla and stackoverflow so basically you're a self taught yourself? Thanks again, just let me know if you need any help with something else I'll be pleased to give you a hint if I can. – aurinko May 09 '12 at 06:29
@TancrediLeone If the answer I have given is acceptable, please click the check mark next to it to accept it. – Brant Olsen May 09 '12 at 13:20

rotating rectangles in javascript implementations needed

1 Answers1