elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


Tema destacado: (TUTORIAL) Aprende a emular Sentinel Dongle By Yapis


+  Foro de elhacker.net
|-+  Programación
| |-+  Programación General
| | |-+  Insertar imágenes en un área circular.
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Insertar imágenes en un área circular.  (Leído 785 veces)
Tachikomaia


Desconectado Desconectado

Mensajes: 1.553


Hackentifiko!


Ver Perfil
Insertar imágenes en un área circular.
« en: 18 Abril 2025, 09:50 am »

Tiene 45*45 pixeles y usé este código:
Código
  1. Imagen = 0;
  2. do {
  3. Imagen++;
  4. Name = "Imagen"+Imagen;
  5. Meteor.attachMovie("sCirculo", Name, Imagen);
  6. Name = "Meteor."+Name;
  7. setProperty (Name, _x, Math.random()*44-22);
  8. setProperty (Name, _y, Math.random()*44-22);
  9. } while (Imagen < 50);

Quedó así en un caso:


¿Por qué quedan afuera si la imagen es de 45*45 y los resultados son de -22 a 22 desde el centro? 45/2 es más de 22, así que no debería haber problema, pensé, pero es un circulo, así que desde el centro exactamente hacia arriba, abajo, derecha o izquierda, va a tener 45 pixeles, pero por ejemplo lo que sería la posición 22, 22, no es ocupada por el circulo, porque no es un cuadrado, no es que su área sea 45*45...

Espero se entienda. Quisiera un código para que los puntos se inserten en cualquier parte del circulo, no afuera. En el borde tampoco ni muy cerca, pero eso lo acomodo yo luego reduciendo el área válida.


« Última modificación: 18 Abril 2025, 09:52 am por Tachikomaia » En línea

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.225



Ver Perfil
Re: Insertar imágenes en un área circular.
« Respuesta #1 en: 19 Abril 2025, 00:20 am »

Tienes que aplicar la Ecuación de la Circunferencia: x^2 + y^2 = r^2, donde "x" y "y" son las coordenadas, y r es el Radio de la Circunferencia.

Para tu caso has puesto que el Diámetro es 45 PERO debes considerar que en Flash no se cuentan los bordes en las medidas, si a tu círculo le has dado 45px de ancho y alto, y 1px de borde, su tamaño sigue siendo 45px, para aspectos visuales debes restar el 1px del borde + el diámetro del circulito chiquito.

En mi caso he considerado que el diámetro del círculo grande es 45px y su borde es de 1px, el circulito chiquito tiene un diámetro de 1px: 45 - 1 - 1 = 43

Paso 0: Variables a declarar y asignar (diámetro y radio):

Código
  1. d = 43
  2. r = d/2

Paso 1: Generar el número aleatorio para la coordenada "x", este debe ser de 0 a d (0 a 42) al que luego se le resta r (21) para obtener lo que en realidad se quiere: de -r a r (-21 a 21)

Código
  1. x = Math.random()*d - r

Paso 2: Generar el número aleatorio máximo para la coordenada "y", acá tenemos que despejar "y" de la ecuación de la circunferencia ya que tenemos "x":

m = sqrt(r^2 - x^2)

Código
  1. m = Math.sqrt(r*r - x*x)

Ahora generamos el número aleatorio para "y":

Código
  1. y = Math.random() * (m*2) - m

Al final todo el código sería:

Código
  1. Imagen = 0
  2. d = 43
  3. r = d/2
  4. do {
  5.  Imagen++;
  6.  Name = "Imagen"+Imagen
  7.  Meteor.attachMovie("sCirculo", Name, Imagen)
  8.  Name = "Meteor."+Name;
  9.  x = Math.random()*d - r
  10.  setProperty (Name, _x, x);
  11.  m = Math.sqrt(r*r - x*x)
  12.  y = Math.random() * (m*2) - m
  13.  setProperty (Name, _y, y);
  14. } while (Imagen < 500)

Yo lo probé con 2000 circulitos para ver los límites más claros:



En línea

Tachikomaia


Desconectado Desconectado

Mensajes: 1.553


Hackentifiko!


Ver Perfil
Re: Insertar imágenes en un área circular.
« Respuesta #2 en: 19 Abril 2025, 04:36 am »

Ok, pero la medida que puse es la que se muestra al cliquear el objeto, no incluye las lineas.

El chiquito ni siquiera tiene líneas.

¡Me funcionó bien! ¿pero cómo? No entiendo mucho la lógica de esto, o sea, entre más hacia el extremo esté X, menos al extremo debe estar Y, sí, pero ¿cómo calculas exacto cuánto?
sqrt(r^2 - x^2)
¿pero por qué funciona? No sé mucho del por qué de ciertas ecuaciones, entiendo que el área de un rectángulo es base*altura porque la base se repite altura veces, hasta ahí llego xD
En línea

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.225



Ver Perfil
Re: Insertar imágenes en un área circular.
« Respuesta #3 en: 20 Abril 2025, 01:11 am »

La teoría dice:



Resumiendo: Un círculo está conformado por un punto centro (h,k) y una serie de puntos (x,y) alejados del punto centro a una distancia determinada llamada Radio (r)

Si el punto centro está en las coordenadas 0,0 la fórmula se reduce a: x^2 + y^2 = r^2

Si ves la figura 5, el punto P está definido por x,y que son sus coordenadas. A cada "x" le corresponde una "y" para dibujar el círculo correctamente. Entonces si generas un "x" no hay problema siempre y cuando sea menor o igual que el Radio, y como ya dije: a cada "x" le corresponde una "y" para dibujar el círculo correctamente, hallas "y" utilizando la fórmula. Ese "y" que en el programa llamo "m" es el valor máximo que puede tomar "y" para no "salirse" del círculo. Es así de simple, supongo que hay otras maneras como el dibujar imaginariamente un triángulo rectángulo para hallar el cateto y utilizar la fórmula del Teorema de Pitágoras QUE justamente es lo que es la fórmula reducida de la circunferencia XD: h^2 = a^2 + b^2  donde "h" es la hipotenusa, "a" y "b" son los catetos. La hipotenusa sería el Radio, el cateto "a" ya lo tenemos porque sería "x" y solo hay que hallar "b" que sería "y"
« Última modificación: 20 Abril 2025, 01:27 am por EdePC » En línea

Tachikomaia


Desconectado Desconectado

Mensajes: 1.553


Hackentifiko!


Ver Perfil
Re: Insertar imágenes en un área circular.
« Respuesta #4 en: 20 Abril 2025, 06:52 am »

Bien, una vez elegido X, es como si se trazara una línea vertical que pasa por X.

Luego, de esa línea obtienes el punto más alto que toca el circulo, el mayor valor de Y. Mediante una fórmula similar a una que hasta yo conozco.

Tendría que investigar por qué esa fórmula es así, por qué da el resultado, porque a mí me parece como magia xD pero me voy a dedicar a otras cosas.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Insertar imagenes en Inyección SQL « 1 2 »
Nivel Web
rikrdo_mat 12 9,635 Último mensaje 2 Diciembre 2010, 04:38 am
por 3st3
SDL insertar imagenes [lenjuage C]
Programación C/C++
JORGE BAAK 3 9,871 Último mensaje 9 Marzo 2011, 11:57 am
por anonimo12121
problema al insertar texto en un area de texto
Desarrollo Web
RedZer 2 3,766 Último mensaje 26 Julio 2011, 00:41 am
por RedZer
Insertar imágenes en C con Open GL
Programación C/C++
Markitukas 4 5,028 Último mensaje 6 Marzo 2012, 16:36 pm
por Markitukas
Donde debo insertar el codigo el área de un circulo en javascript
Desarrollo Web
HASSID 0 3,980 Último mensaje 24 Abril 2012, 08:45 am
por HASSID
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines