# Rotating a 2D figure

• 11-20-2013, 03:45 AM
Edu_09
Rotating a 2D figure
Hello! This is my first attemp with geometry applied to JavaScript and I'm trying to draw a figure with a given rotation angle in degrees. My draw(deg) function will work just fine if I run it one time, but it will fail to draw the correct figure if I run it more than once...

This is my CODE, I hope you can help me, I'm really lost at this point...

HTML Code:

```<!doctype html> <html lang="es"> <head> <meta charset="utf-8"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <title>123 probando SVG</title> <style type="text/css"> HTML,BODY {         width:100%;         height:100%;         border: rgba(0,0,0,1); } #canvas {         position:absolute;         top:0;         left:0;         border:1px #333333 solid; } </style> <script> // This is to access the SVG dom var svgDoc; function startup(evt){   svgDoc=evt.target.ownerDocument; } // JQuery load \$(document).ready(function() {         // Draw my figure rotated in 45 deg         draw(45); }); // #1 - I define a rectangle with it's 4 points var matriz = Array({x:250,y:150},{x:250,y:250},{x:450,y:250},{x:450,y:150}); // #2 - Draws the figure in a given rotation angle function draw(deg) {         // This is the CENTER point of my figure (with 250 x 150 y adjust)         var Ox = 250 + ((450 - 250) / 2);         var Oy = 150 + ((250 - 150) / 2);         var angle = 0;         var r=150;                // Relative to the size of my rectangle...         / Cycles around my 4 points         for (var i=0; i<4; i++) {                        // Use ATAN2 to calculate the starting angle of this point of my figure                 // Converted to degrees.. I know it's not necesary, this is just a demo for now :)                 angle = Math.atan2(matriz[i].y - Oy, matriz[i].x - Ox) * 180 / Math.PI;                 // Calculate the coordinates for the rotated point (and again, adjust x and y for 250 and 150)                 matriz[i].x = 250 + r * Math.sin((deg + angulo) * Math.PI / 180);                 matriz[i].y = 150 - r * Math.cos((deg + angulo) * Math.PI / 180);         }         // This will actually draw the lines of my figure         drawLines(); } // #3 - Funcion para dibujar las lineas de mi figura rectangular function drawLines() {         var line = document.getElementById("line1");         line.setAttribute("x1", matriz[0].x);         line.setAttribute("y1", matriz[0].y);         line.setAttribute("x2", matriz[1].x);         line.setAttribute("y2", matriz[1].y);         line = document.getElementById("line2");         line.setAttribute("x1", matriz[1].x);         line.setAttribute("y1", matriz[1].y);         line.setAttribute("x2", matriz[2].x);         line.setAttribute("y2", matriz[2].y);         line = document.getElementById("line3");         line.setAttribute("x1", matriz[2].x);         line.setAttribute("y1", matriz[2].y);         line.setAttribute("x2", matriz[3].x);         line.setAttribute("y2", matriz[3].y);         line = document.getElementById("line4");         line.setAttribute("x1", matriz[3].x);         line.setAttribute("y1", matriz[3].y);         line.setAttribute("x2", matriz[0].x);         line.setAttribute("y2", matriz[0].y); } </script> </head> <body> <svg id="canvas" onload="startup(evt)" width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">         <line id="line1" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />         <line id="line2" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />         <line id="line3" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" />         <line id="line4" stroke-linecap="round" x1="0" y1="0" x2="0" y2="0" stroke-width="4" stroke="black" /> </svg> </body> </html> ```

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.24868 seconds
• Memory Usage 2,382KB
• Queries Executed 11 (?)
Template Usage (20):
• (1)bbcode_html_printable
• (1)footer
• (1)gobutton
• (1)navbar_moderation
• (1)navbar_noticebit
• (2)option
• (1)spacer_close
• (1)spacer_open

Phrase Groups Available (3):
• global
• postbit
Included Files (19):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/class_bbcode_alt.php
• ./includes/class_bbcode.php
• ./includes/functions_bigthree.php
• ./includes/functions_notice.php

Hooks Called (41):
• init_startup
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• bbcode_fetch_tags
• bbcode_create
• bbcode_parse_start
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates