Inicio | ¿Sidebar? | RSS

Graficando Vectores con GD+PHP (2da parte)

Después de tanto hacerme pato con mi proyecto de física (Ni tan solo, se supone era en equipo.), lo he terminado. Aunque, no literalmente, faltaron muchos detalles. No sabía que tuviera que presentarlo tan pronto, así que tuve que realizar alguna que otra acrobacia al mero estilo Microsoft parchando mi aplicación… obteniendo así un chilaquil medio funcional :P

A la aplicación solo se le da dos vectores, se elige forma en que el vector se introducirá, o sea modulo-ángulo, o simplemente por coordenadas y luego de esto darle en el botón intentar.

El formulario es un asco, lo hice exactamente dos horas antes de la presentación en público, jeje. Así que no acepto muchas críticas en esta parte jeje… En el código de la aplicación pues, valla que si duré bastante trabajando (Como cuatro sesiones creo).

Les dejo el código para que critiquen, y de igual forma la versión de demostración para apreciar bien el detalle final :D

  • El formulario para ingreso de datos.
  • El archivo que genera el plano cartesiano y tira los vectores.

    1. header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
    2. header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
    3. header('Content-type: image/png');
    4. //header("content-type: text/html");
    5.  
    6. #Lax X son pares
    7. #Las Y son impares
    8.  
    9. if(isset($_GET['V']))
    10.     $V = $_GET['V'];
    11.  
    12. if(!isset($_GET['angulo']) and !isset($_GET['modulo']) and !isset($_GET['V'])){
    13.         $V[]=0;
    14.         $V[]=0;
    15.     }
    16.    
    17.  
    18. if(isset($_GET['modulo']) and isset($_GET['angulo']))//Si hay un angulo o módulo
    19.     if(count($_GET['modulo'])!=count($_GET['angulo']))//deben coincidir en cantidad
    20.         exit;//si no, termina la ejecución de la aplicación.
    21.  
    22. //Evaluamos los vectores cuando estos vienen en la forma modulo angulo.
    23. if(isset($_GET['angulo']) and isset($_GET['modulo']))
    24.     foreach($_GET['angulo'] as $k => $teta)
    25.         if(!empty($teta)||!empty($_GET['modulo'][$k])){
    26.                 $V[]= sprintf("%.1f",$_GET['modulo'][$k]*cos(deg2rad($teta)));//x
    27.                 $V[]= sprintf("%.1f",$_GET['modulo'][$k]*sin(deg2rad($teta)));//y
    28.             }
    29.  
    30. /* Evaluamos la resultante */
    31.  
    32. if(isset($_GET['operacion']) and $_GET['operacion']=="sumar"){
    33.         $resultante_x=0;
    34.         $resultante_y=0;
    35.         foreach($V as $k => $v){
    36.                 if($k%2==0)
    37.                     $resultante_x += $v;
    38.                 if($k%2!=0)
    39.                     $resultante_y += $v;
    40.             }
    41.         $V[]=$resultante_x;
    42.         $V[]=$resultante_y;
    43.     }
    44. if(isset($_GET['operacion']) and $_GET['operacion']=="multiplicar"){
    45.         if(count($V)>=2 and isset($_GET['valor']) and is_numeric($_GET['valor'])){
    46.                 $resultante_x=$V[0]*$_GET['valor'];
    47.                 $resultante_y=$V[1]*$_GET['valor'];
    48.                 $V[]=$resultante_x;
    49.                 $V[]=$resultante_y;
    50.             }
    51.     }
    52.  
    53. //Agregamos un nuevo vector, que es la resultante.
    54.  
    55. //Valores por default
    56. $ancho = 500;//Anchura de la imagen en pixeles
    57. $alto = 500;//Altura de la imagen en pixeles
    58. $d = 20;//Desplazamiento para el marco
    59. $cuadros_min = 5;//Cantidad mínima de cuadros permitiada.
    60. $ttf=1;//Tipo de fuente
    61.  
    62. //Cantidad de cuadros por cada lado del plano cartesiano.
    63. $mayor_x = 0;
    64. $mayor_xn = 0;
    65. $mayor_y = 0;
    66. $mayor_yn = 0;
    67.  
    68. //Obtenemos los valores de los extremos de cada lado del plano
    69. foreach($V as $k => $v){
    70.         //Las X
    71.         if($k%2==0){
    72.                 if($v>0 and $v>$mayor_x)
    73.                     $mayor_x = $v;
    74.                 if($v&lt;0 and $v< $mayor_xn)
    75.                     $mayor_xn = $v;
    76.             }
    77.         //Las Y
    78.         if($k%2!=0){
    79.                 if($v>0 and $v>$mayor_y)
    80.                     $mayor_y = $v;
    81.                 if($v&lt;0 and $v< $mayor_yn)
    82.                     $mayor_yn = $v;
    83.             }
    84.     }
    85.  
    86. $mayor_xn = abs($mayor_xn);//Mayor en X negativo
    87. $mayor_yn = abs($mayor_yn);//Mayor en Y negativo
    88.  
    89. $img = imagecreatetruecolor($ancho,$alto);
    90. $img_ucol= imagecreatefromgif("aguila.gif");
    91.  
    92. //Colores
    93. $blanco = imagecolorallocate($img,0xff,0xff,0xff);
    94. $negro = imagecolorallocate($img,0x0,0x0,0x0);
    95. //$gris = imagecolorallocate($img,0xe7,0xe7,0xe7);
    96. $gris = imagecolorallocate($img,0xdf,0xdf,0xdf);
    97. $rojo = imagecolorallocate($img,0xff,0x00,0x00);
    98. $dark_gray = imagecolorallocate($img,0xc5,0xc5,0xc5);
    99.  
    100. //Creamos fondo de color blanco
    101. imagefilledrectangle($img,0,0,$ancho-1, $alto-1, $blanco);
    102.  
    103. imagestring($img,2,$ancho-52,i(100),"Matus",$dark_gray);
    104. imagestring($img,2,$ancho-52,i(90),"Noemi",$dark_gray);
    105. imagestring($img,2,$ancho-70,i(80),"Renteria",$dark_gray);
    106. imagestring($img,2,$ancho-65,i(70),"Antonio",$dark_gray);
    107. imagestring($img,2,$ancho-64,i(60),"Roberto",$dark_gray);
    108. imagestring($img,2,$ancho-76,i(50),"Alexander",$dark_gray);
    109. imagestring($img,2,$ancho-60,i(40),"Victor",$dark_gray);
    110. //Si la orientación del mayor es en X (ox=true), tomamos comom referencia el ancho, si no, lo alto.
    111. if(($mayor_x+$mayor_xn)>($mayor_y+$mayor_yn))
    112.         $ox = true;
    113.     else
    114.         $ox = false;
    115.  
    116. if($ox){//Orientación en X
    117.         $cuadros = $mayor_x+$mayor_xn;//Cantidad de cuadros
    118.         if($cuadros != 0)
    119.                 if($cuadros > $cuadros_min)
    120.                         $cuadro_w = ($ancho-($d*2))/$cuadros;//Dimensiones por cuadro
    121.                     else
    122.                         $cuadro_w = ($ancho-$d*2)/$cuadros_min;
    123.             else//Si solo hubiese un punto y en la coordenada 0,0 ocurriría un error de tipo "división by zero".
    124.                 $cuadro_w = ($ancho-$d)/$cuadros_min;
    125.     }else{
    126.         $cuadros = $mayor_y+$mayor_yn;//Cantidad de cuadros
    127.         if($cuadros != 0)
    128.                 if($cuadros > $cuadros_min)
    129.                         $cuadro_w = ($alto-($d*2))/$cuadros;//Dimensiones por cuadro
    130.                     else
    131.                         $cuadro_w = ($alto-$d*2)/$cuadros_min;
    132.             else//Si solo hubiese un punto y en la coordenada 0,0 ocurriría un error de tipo "división by zero".
    133.                 $cuadro_w = ($alto-$d)/$cuadros_min;
    134.     }
    135.  
    136. $cuadro_w = floor($cuadro_w); //Entre más pequeño mejor.
    137.  
    138. //Líneas verticales
    139. for($x=0;$x< $ancho;$x++)
    140.     if($x%$cuadro_w==0)
    141.         imageline($img,/*x1,y1*/$x+$d,i($alto),/*x2,y2*/$x+$d,i(1+$d),$gris);
    142.  
    143. //Líneas horizontales
    144. for($y=0;$y<$alto;$y++)
    145.     if($y%$cuadro_w==0)
    146.         imageline($img,/*x1,y1*/1+$d,i($y+$d),/*x2,y2*/$ancho,i($y+$d),$gris);
    147.  
    148. //Guías horizontales
    149. for($x=($mayor_xn*$cuadro_w*-1);$x<$ancho;$x++)
    150.     if($x%$cuadro_w==0)
    151.         imageline($img,/*x1,y1*/$x+$d,i(0+($mayor_yn*$cuadro_w)-2+$d),/*x2,y2*/$x+$d,i(2+($mayor_yn*$cuadro_w)+$d),$negro);
    152.  
    153. //Guías verticales
    154. for($y=($mayor_yn*$cuadro_w*-1);$y<$alto;$y++)
    155.     if($y%$cuadro_w==0)
    156.         imageline($img,/*x1,y1*/0+($mayor_xn*$cuadro_w)-2+$d,i($y+$d),/*x2,y2*/2+($mayor_xn*$cuadro_w)+$d,i($y+$d),$negro);    
    157.  
    158. //Se dibuja Plano cartesiano
    159. //Eje de Y
    160. imageline($img,/*x1,y1*/0+($mayor_xn*$cuadro_w)+$d,i(0+$d),/*x2,y2*/0+($mayor_xn*$cuadro_w)+$d,i($alto),$negro);
    161. //Eje de X
    162. imageline($img,/*x1,y1*/0+$d,i(0+$d)-($mayor_yn*$cuadro_w),/*x2,y2*/$ancho,i(0+$d)-($mayor_yn*$cuadro_w),$negro);
    163.  
    164. //Cuadro de relleno para tapar Abajo e Izquierda.
    165. imagefilledrectangle($img,0,0,$d,$alto,$blanco);//izquierda
    166. imagefilledrectangle($img,0,$alto-$d,$ancho,$alto,$blanco);//abajo
    167.  
    168. //Numeración vertical
    169. for($x=($mayor_xn*$cuadro_w*-1);$x<$ancho;$x++)
    170.     if($x%$cuadro_w==0)
    171.             if(floor($x/$cuadro_w)>=0)
    172.                     imagestring($img,$ttf,$x+($mayor_xn*$cuadro_w)-imagefontwidth($ttf)*strlen(floor($x/$cuadro_w))+$d,i(($mayor_yn*$cuadro_w)-1+$d),floor($x/$cuadro_w),$negro);
    173.                 else
    174.                     imagestring($img,$ttf,$x+($mayor_xn*$cuadro_w)-2+$d,i(($mayor_yn*$cuadro_w)-1+$d),floor($x/$cuadro_w),$negro);
    175.  
    176. //Numeración horizontal
    177. for($y=($mayor_yn*$cuadro_w*-1);$y< $alto;$y++)
    178.     if($y%$cuadro_w==0)
    179.         if(floor($y/$cuadro_w)>0)
    180.                 imagestring($img,$ttf,($mayor_xn*$cuadro_w)+$d-imagefontwidth($ttf)*strlen(floor($y/$cuadro_w)),i($y+$d)-($mayor_yn*$cuadro_w)+1,floor($y/$cuadro_w),$negro);
    181.             elseif(floor($y/$cuadro_w)&lt;0)
    182.                 imagestring($img,$ttf,($mayor_xn*$cuadro_w)+$d-imagefontwidth($ttf)*strlen(floor($y/$cuadro_w)),i($y+$d+10)-($mayor_yn*$cuadro_w)+1,floor($y/$cuadro_w),$negro);
    183.  
    184. //Cuadro de relleno para tapar arriba y derecha.
    185. imagefilledrectangle($img,0,0,$ancho,$d,$blanco);//arriba
    186. imagefilledrectangle($img,$ancho-$d,$d,$ancho,$alto,$blanco);//derecha
    187.  
    188. imageline($img,$d,$d,$ancho-$d,$d,$negro);//arriba
    189. imageline($img,$d,$alto-$d,$ancho-$d,$alto-$d,$negro);//abajo
    190. imageline($img,$ancho-$d,$d,$ancho-$d,$alto-$d,$negro);//derecha
    191. imageline($img,$d,$d,$d,$alto-$d,$negro);//izquierda
    192.  
    193. //Tiramos los vectores
    194.     foreach($V as $k => $v){
    195.             if($k%2==0)
    196.                 $x=$v;
    197.             if($k%2!=0)
    198.                 vector($x,$v,$negro);
    199.         }
    200.  
    201. //Tiramos líneas del paralelogramo
    202.     if(isset($_GET['operacion']) and $_GET['operacion']=="sumar" and isset($V[5])){
    203.             linea($V[0],$V[1],$V[4],$V[5],$gris);
    204.             linea($V[2],$V[3],$V[4],$V[5],$gris);
    205.         }
    206.  
    207. if(isset($_GET['operacion']) and $_GET['operacion']=="restar" and count($V)>=4){
    208.         linea($V[0],$V[1],$V[2],$V[3],$negro,true);
    209.     }
    210.  
    211. //resultante
    212.     if(isset($_GET['operacion']) and $_GET['operacion']=="sumar")
    213.         linea(0,0,$resultante_x,$resultante_y,$negro,true);
    214.    
    215.    
    216.     if(isset($_GET['operacion']) and $_GET['operacion']=="multiplicar")
    217.         if(isset($_GET['valor']) and is_numeric($_GET['valor']))
    218.                 linea(0,0,$resultante_x,$resultante_y,$negro,true);
    219.             else{
    220.                     $rosa = imagecolorallocate($img,0xff,0xd7,0xff);
    221.                     imagefilledrectangle($img,30,240,470,274,$rosa);
    222.                     imagestring($img,3,40,250,"Para multiplicar, es necesario un solo vector, y un escalar.",$rojo);
    223.                 }
    224.  
    225. //Nombre aleatoreo para la imagen
    226. $imagen = "img/".time()."-".rand(100,999).".png";
    227. $imagen = "temp.png";
    228.  
    229. imagefilter($img,IMG_FILTER_NEGATE);
    230.  
    231. //Logotipo de la Universidad de Colima
    232. imagecopyresampled($img,$img_ucol,$ancho-36,8,0,0,30,30,268,267);
    233.  
    234. //imagepng($img,$imagen);//Para el Historial
    235. imagepng($img);//La mostramos
    236. imagedestroy($img);//Liberamos la memoria
    237.  
    238. function vectores($V){
    239.         foreach($V as $k => $v){
    240.                 if($k%2==0)
    241.                     echo "(";
    242.  
    243.                 if($k%2==0)
    244.                         echo "<span style='color:#f00;'>$v</span>";
    245.                     else
    246.                         echo "$v";
    247.  
    248.                 if($k%2==0)
    249.                         echo ",";
    250.                     else
    251.                         echo ")<br />";
    252.             }
    253.     }
    254.  
    255. function ordenar($V){
    256.         $N = count($V)-1;
    257.         for($i=1;$i< =$N;$i++){
    258.                 if($i%2!=0)continue;//si es Y, continue;
    259.                 //Solo X
    260.                 for($j=$N;$j>=$i;$j--){
    261.                         if($j%2!=0)continue;//si es Y, continue;
    262.                         //Solo X
    263.                         if($V[$j-2]>$V[$j]){
    264.                                 $aux = $V[$j-2];
    265.                                     $aux2 = $V[$j-1];
    266.                                 $V[$j-2] = $V[$j];
    267.                                 $V[$j-1] = $V[$j+1];
    268.                                
    269.                                 $V[$j] = $aux;
    270.                                 $V[$j+1] = $aux2;
    271.                             }
    272.                     }
    273.             }
    274.         return $V;
    275.     }
    276.  
    277. function i($x){//Invierte los valores
    278.         global $alto;
    279.         return $alto-$x;        
    280.     }
    281.  
    282. function vector($x,$y,$color=""){//Tira un Vector en el plano
    283.         global $img, $cuadro_w, $mayor_xn, $d, $mayor_yn, $negro;
    284.         $blanco = imagecolorallocatealpha($img,0xff,0xff,0xff,40);
    285.         $ttf = 2;//Tamaño de la fuente
    286.  
    287.         if(empty($color)){
    288.                 $r = rand(0,200);
    289.                 $g = rand(0,250);
    290.                 $b = rand(0,200);
    291.                 $color = imagecolorallocate($img,$r,$g,$b);
    292.             }
    293.  
    294.         $Acolor = $color;//imagecolorallocate($img,$b,0,$r);
    295.        
    296.         //Equivalente a Coordenada 0
    297.         $x0 = $cuadro_w * $mayor_xn + $d;
    298.         $y0 = $cuadro_w * $mayor_yn + $d;
    299.  
    300.         //Punto donde termina el vector
    301.         $xf = $x0 + ($cuadro_w * $x);
    302.         $yf = $y0 + ($cuadro_w * $y);
    303.        
    304.         $A="($x,$y)";
    305.         $Aw = imagefontwidth($ttf) * strlen($A);
    306.         $Ah = imagefontheight($ttf);
    307.  
    308.         //Tiramos Línea
    309.         imageline($img,$x0,i($y0),$xf,i($yf),$color);
    310.        
    311.         //angulo del vector
    312.  
    313.        
    314.         //Dibujamos las coordenadas
    315.         if(!($x==0||$y==0)){
    316.             if($x>0 and $y>0){
    317.                     imagefilledrectangle($img,$xf-$Aw,i($yf),$xf-$Aw+$Aw-1,i($yf)+$Ah-1,$blanco);
    318.                     imagestring($img,$ttf,$xf-$Aw,i($yf),$A,$negro);
    319.                 }
    320.             if($x&lt;0 and $y>0){
    321.                     imagefilledrectangle($img,$xf+imagefontwidth($ttf)* 2,i($yf),$xf+imagefontwidth($ttf)*2+$Aw-1,i($yf)+$Ah-1,$blanco);
    322.                     imagestring($img,$ttf,$xf+imagefontwidth($ttf)* 2,i($yf),$A,$Acolor);
    323.                 }
    324.             if($x&lt;0 and $y&lt;0){
    325.                     imagefilledrectangle($img,$xf+imagefontwidth($ttf)* 2,i($yf+$Ah),$xf+imagefontwidth($ttf)*2+$Aw-1,i($yf+$Ah)+$Ah-1,$blanco);
    326.                     imagestring($img,$ttf,$xf+imagefontwidth($ttf)* 2,i($yf+$Ah),$A,$Acolor);
    327.                 }
    328.             if($x>0 and $y&lt;0){
    329.                     imagefilledrectangle($img,$xf-$Aw-imagefontwidth($ttf)* 2,i($yf+$Ah),$xf-$Aw-imagefontwidth($ttf)*2+$Aw-1,i($yf+$Ah)+$Ah-1,$blanco);
    330.                     imagestring($img,$ttf,$xf-$Aw-imagefontwidth($ttf)* 2,i($yf+$Ah),$A,$Acolor);
    331.                 }
    332.         }else{
    333.                 if($y==0 and $x>0){
    334.                         imagefilledrectangle($img,$xf+imagefontwidth($ttf),i($yf+$Ah),$xf+imagefontwidth($ttf)+$Aw-1,i($yf+$Ah)+$Ah-1,$blanco);
    335.                         imagestring($img,$ttf,$xf+imagefontwidth($ttf),i($yf+$Ah),$A,$Acolor);
    336.                     }
    337.                 if($x==0 and $y>0){
    338.                         imagefilledrectangle($img,$xf+imagefontwidth($ttf),i($yf),$xf+imagefontwidth($ttf)+$Aw-1,i($yf)+$Ah-1,$blanco);
    339.                         imagestring($img,$ttf,$xf+imagefontwidth($ttf),i($yf),$A,$Acolor);
    340.                     }
    341.                 if($y==0 and $x&lt;0){
    342.                         imagefilledrectangle($img,$xf+imagefontwidth($ttf),i($yf+$Ah),$xf+imagefontwidth($ttf)+$Aw-1,i($yf+$Ah)+$Ah-1,$blanco);
    343.                         imagestring($img,$ttf,$xf+imagefontwidth($ttf),i($yf+$Ah),$A,$Acolor);
    344.                     }
    345.                 if($x==0 and $y&lt;0){
    346.                         imagefilledrectangle($img,$xf+imagefontwidth($ttf),i($yf+$Ah),$xf+imagefontwidth($ttf)+$Aw-1,i($yf+$Ah)+$Ah-1,$blanco);
    347.                         imagestring($img,$ttf,$xf+imagefontwidth($ttf),i($yf+$Ah),$A,$Acolor);
    348.                     }
    349.                 if($x==0 and $y==0){
    350.                         imagefilledrectangle($img,$xf+imagefontwidth($ttf),i($yf+$Ah),$xf+imagefontwidth($ttf)+$Aw-1,i($yf+$Ah)+$Ah-1,$blanco);
    351.                         imagestring($img,$ttf,$xf+imagefontwidth($ttf),i($yf+$Ah),$A,$Acolor);
    352.                     }
    353.             }
    354.  
    355.         //Punta de la Línea
    356.         imagefilledellipse($img,$xf,i($yf),6,6,$color);
    357.     }
    358.  
    359. function linea($x,$y,$x2,$y2,$color="",$style=false){//Tira una linea en el plano
    360.         global $img, $cuadro_w, $mayor_xn, $d, $mayor_yn;
    361.  
    362.         $ttf = 2;//Tamaño de la fuente
    363.         if(empty($color))
    364.             $color = imagecolorallocate($img,0,0,0);
    365.         $blanco = imagecolorallocate($img,0xff,0xff,0xff);
    366.  
    367.         //Equivalente a Coordenada 0
    368.         $x0 = $cuadro_w * $mayor_xn + $d;
    369.         $y0 = $cuadro_w * $mayor_yn + $d;
    370.  
    371.         //Punto donde inicia la linea
    372.         $xi = $x0 + ($cuadro_w * $x);
    373.         $yi = $y0 + ($cuadro_w * $y);
    374.  
    375.         //Punto donde termina la linea
    376.         $xf = $x0 + ($cuadro_w * $x2);
    377.         $yf = $y0 + ($cuadro_w * $y2);
    378.  
    379.         //Tiramos Línea
    380.         if($style){
    381.                 $style = array(
    382.                     $color,$color,
    383.                     $blanco,$blanco,$blanco,$blanco,
    384.                 );
    385.                 imagesetstyle($img, $style);
    386.                 imageline($img,$xi,i($yi),$xf,i($yf),IMG_COLOR_STYLED);
    387.             }else
    388.                 imageline($img,$xi,i($yi),$xf,i($yf),$color);
    389.  
    390.         //Punta de la Línea
    391.         imagefilledellipse($img,$xi,i($yi),4,4,$color);
    392.         imagefilledellipse($img,$xf,i($yf),6,6,$color-100);
    393.     }
  • La hoja de estilo CSS
  • MooTools para los efectos

Y por último solo me queda hacer público el agradecimiento a mi estimada NoÉmis y a todos los miembros del equipo por el apoyo moral durante la implementación del código

3 comentarios en "Graficando Vectores con GD+PHP (2da parte)"

Angeltc

Interesante tu código, yo tengo mi versión un poquito mas cortita ( sólo suma vectores y no me molesté en hacer un formulario, mas bien lo cargo todo desde un .txt ).
En fin, que el comentario era nada mas para preguntar sobre la licencia del código, es usable libremente?
Saludos.

Franklin arellan

muy buen ejemplo de vectores bastante interesante

Victor De la Rocha

Todo el contenido que puedas tomar de aquí, lo puedes re-utilizar respetando mi crédito como es debido.

Deja un comentario

Suscribirse a los comentarios.