Autor Tema: Colocar imágenes dejando un espacio entre ellas.

0 Usuarios y 1 Visitante están viendo este tema.

24 Abril, 2024, 01:05 am
Leído 93 veces

Tachikomaia

  • $$\Large \color{#c88359}\pi\,\pi\,\pi\,\pi$$
  • Mensajes: 596
  • País: uy
  • Karma: +0/-0
  • Sexo: Masculino
Aquí la pantalla es de 384*384 pixeles y hay 4 imágenes separadas por líneas rojas:


Cada imagen tiene un código que le inserta 3*3 cuadraditos de 3 posibles colores, pero la posición de las imágenes la establecí manualmente, eso también quiero que sea haga con código según cuántas imágenes y cuadraditos se establezcan. Ademas quiero que entre cada imagen haya un cuadradito de distancia, no una línea roja. Si se dice 2 imágenes y 3 cuadraditos, debería quedar así:
IppEIpp
pppEppp
pppEppp
EEEEEEE
IppEIpp
pppEppp
pppEppp
Donde I es la parte más arriba e izquierda de cada imagen, p son partes de las imágenes, y E son los espacios que debe haber entre las imagenes.

Bueno, yo intenté eso y me quedó así:

xP

Las cruces rojas indican dónde está colocada cada imagen. Sólo hay 3 porque la 1era está bien, y tapada por los cuadraditos.

¿Qué hice mal?

Nota: A las imágenes le llamo cuadros o dibujos. A los cuadraditos le llamo píxeles.

Código: (actionscript) [Seleccionar]
// Configuración:
CuadrosdeLargo = 2;
// Eso es que habrá 2*2 cuadros.
PixelesdeLargo = 3;
DistanciaEntrePixeles = 384/(PixelesdeLargo*CuadrosdeLargo+CuadrosdeLargo-1);
// Agregar y distribuir cuadros:
MaxPosiciondePuntero = CuadrosdeLargo*CuadrosdeLargo;
CuadrosColocados = 0;
Columna = 0;
Fila = 0;
do {
EspacioaAgregar = DistanciaEntrePixeles*CuadrosColocados;
CuadrosColocados++;
attachMovie("mCuadro", "Dibujo"+CuadrosColocados, CuadrosColocados);
setProperty ("Dibujo"+CuadrosColocados, _x, 64+Columna*CuadrosColocados+EspacioaAgregar);
// Ese 64 está bien, es que en la pantalla hay una parte que no se usa, es para que al expandirse quede proporcional al monitor).
setProperty ("Dibujo"+CuadrosColocados, _y, Fila*DistanciaEntrePixeles+EspacioaAgregar);
Columna = Columna+1;
if (Columna == CuadrosdeLargo) {
Columna = 0;
Fila = Fila+1;
}
} while (CuadrosColocados<MaxPosiciondePuntero);

El resto del código parece ok porque lo quité, probé el programa y las cruces siguen apareciendo mal.

25 Abril, 2024, 03:38 am
Respuesta #1

Richard R Richard

  • Ingeniero Industrial
  • $$\Large \color{#5b61b3}\pi\,\pi\,\pi\,\pi\,\pi$$
  • Mensajes: 2,356
  • País: ar
  • Karma: +1/-0
  • Sexo: Masculino
  • Dentro de la ciencia todo,fuera de la ciencia nada
Si se dice 2 imágenes y 3 cuadraditos, debería quedar así:
IppEIpp
pppEppp
pppEppp
EEEEEEE
IppEIpp
pppEppp
pppEppp
Donde I es la parte más arriba e izquierda de cada imagen, p son partes de las imágenes, y E son los espacios que debe haber entre las imágenes.
Según tu definición allí hay 4 imágenes o cuadros  de 3x3 cuadraditos o pixeles.

Bien cuando dices que la línea roja la debo reemplazar por otro cuadradito estás diciéndome es que es otro pixel, estoy en lo cierto?

Así que formas una cantidad de imágenes de $$u \times v$$ en la imagen pantalla principal,  separadas por 1 píxel entre unas y otras y cada imagen tiene $$n \times n$$ pixeles , correcto?

Tamaño de la pantalla

$$H=u \cdot n+u-1$$ , la cantidad de píxeles  horizontal es $$H$$ , hay $$u$$ cuadrados de lado $$n$$ y sumas $$(u-1)$$ líneas rojas de lado 1 pixel.

$$V=v \cdot n+v-1$$ , la cantidad de pixeles  vertical es $$V$$ , hay $$v$$ cuadrados de lado $$n$$ y sumas $$(v-1)$$ líneas rojas de lado 1 pixel.

Habrá $$m$$ imagenes $$m=u\cdot v$$ la primera está arriba a la izquierda la segunda a su derecha hasta completar $$u$$ imágenes y luego salto a la siguiente línea de imágenes.

Si en la esquina superior izquierda está el pixel $$(0,0)$$ la ubicación de cada imagen la sacas haciendo un ciclo $$r$$ entre $$0$$ a $$m-1$$.

La posición de la imagen número $$r$$.

$$a=resto (r/u)\cdot (n+1)$$

$$b=entero(r/u)\cdot(n+1)$$

Cada imagen la colocas en $$(a,b)$$ y tiene $$n$$ pixeles hacia a la derecha y $$n$$ hacia abajo.

Saludos
Saludos  \(\mathbb {R}^3\)

26 Abril, 2024, 09:08 am
Respuesta #2

Tachikomaia

  • $$\Large \color{#c88359}\pi\,\pi\,\pi\,\pi$$
  • Mensajes: 596
  • País: uy
  • Karma: +0/-0
  • Sexo: Masculino
El tamaño de la pantalla siempre es 384*384, lo que cambia es el tamaño son las imágenes (entre más sean menos debe ocupar cada una, podrían ser 4, 9, 16...) y de los cuadraditos (entre más imágenes deba haber, y mientras más cuadraditos deba tenga cada una, más pequeños deben ser).

¿A qué llamas u y v? ¿a la cantidad de dibujos en horizontal y vertical?

Me cuesta mucho entenderte... ¿H y V son constantes que no es necesario que calcule, sólo es parte de la explicación?

Voy a probar esto que sería lo que interpreto de lo que dijiste:
Código: [Seleccionar]
Contador = 0
Repetir
  Contador++
  La posición X de la imagen nro (Contador) es: Resto(Contador/ImagenesPorFila)*(CuadraditosPorLado+1)
  La posición Y de la imagen nro (Contador) es: RedondearHaciaArriba(Contador/ImagenesPorFila)*(CuadraditosPorLado+1)
mientras Contador<Imagenes
Si falla arriba pruebo abajo.

Probablemente cometi algún error, me da esto:
La imagen 1 se colocará en X: 68
Resto: 1
La imagen 1 se colocará en Y: 4
La imagen 2 se colocará en X: 64
Resto: 0
La imagen 2 se colocará en Y: 4
La imagen 3 se colocará en X: 68
Resto: 1
La imagen 3 se colocará en Y: 8
La imagen 4 se colocará en X: 64
Resto: 0
La imagen 4 se colocará en Y: 8

Las posiciones X están fuera de la pantalla y entre las Y hay demasiada poca diferencia, quizá no expliqué bien el problema.

El código que puse fue:
Código: [Seleccionar]
// Agregar y distribuir cuadros:
CuadrosColocados = 0;
do {
CuadrosColocados++;
        // Esto coloca la imagen, está bien:
attachMovie("mCuadro", "Dibujo"+CuadrosColocados, CuadrosColocados);
trace ("La imagen "+CuadrosColocados+" se colocará en X: "+(64+(CuadrosColocados%CuadrosdeLargo)*(PixelesdeLargo+1)));
setProperty ("Dibujo"+CuadrosColocados, _x, 64+(CuadrosColocados%CuadrosdeLargo)*(PixelesdeLargo+1));
trace ("Resto: "+CuadrosColocados%CuadrosdeLargo);
trace ("La imagen "+CuadrosColocados+" se colocará en Y: "+Math.ceil(CuadrosColocados/CuadrosdeLargo)*(PixelesdeLargo+1));
setProperty ("Dibujo"+CuadrosColocados, _y, Math.ceil(CuadrosColocados/CuadrosdeLargo)*(PixelesdeLargo+1));
} while (CuadrosColocados<MaxPosiciondePuntero);

Edit: Ya lo logré, aquí son:
PixelesdeLargo = 9;
CuadrosdeLargo = 8;

Tengo que mejorar el nombre de varias cosas:
Código: [Seleccionar]
// Cuadraditos por fila y columna de cada dibujo:
PixelesdeLargo = 9;
// Dibujos por fila y columna de la pantalla:
CuadrosdeLargo = 8;
// Largo de los cuadraditos:
DistanciaEntrePixeles = 384/(PixelesdeLargo*CuadrosdeLargo+CuadrosdeLargo-1);
LargoDeCuadros = PixelesdeLargo*DistanciaEntrePixeles;
MaxPosiciondePuntero = CuadrosdeLargo*CuadrosdeLargo;
// Agregar y distribuir cuadros:
CuadrosColocados = 0;
Columna = 0;
Fila = 0;
do {
CuadrosColocados++;
attachMovie("mCuadro", "Dibujo"+CuadrosColocados, CuadrosColocados);
setProperty ("Dibujo"+CuadrosColocados, _x, 64+LargoDeCuadros*Columna+Columna*DistanciaEntrePixeles);
setProperty ("Dibujo"+CuadrosColocados, _y, LargoDeCuadros*Fila+Fila*DistanciaEntrePixeles);
Columna = Columna+1;
if (Columna == CuadrosdeLargo) {
Columna = 0;
Fila = Fila+1;
}
} while (CuadrosColocados<MaxPosiciondePuntero);

Tenía más errores de los que puedo recordar o entender xP

Veo que entre algunos cuadraditos hay una línea que no debería estar, intentaré arreglar eso más adelante.

26 Abril, 2024, 12:08 pm
Respuesta #3

Richard R Richard

  • Ingeniero Industrial
  • $$\Large \color{#5b61b3}\pi\,\pi\,\pi\,\pi\,\pi$$
  • Mensajes: 2,356
  • País: ar
  • Karma: +1/-0
  • Sexo: Masculino
  • Dentro de la ciencia todo,fuera de la ciencia nada
La pantalla tiene 384 x 384 , fijo inamovible listo, ahora entendí.
U y V , son la cantidad de imágenes  en horizontal  y en vertical dentro de la pantalla,  si las imágenes  son cuadradas entonces U y V son iguales.
El pixel de separación entre una imagen y su contigua existe o no? Eso que pintas verde ahora en pantalla esta o no esta? O bien cada imagen empieza en el pixel siguiente donde termina la otra.

La cantidad de imágenes de lado $$n$$ que tienen $$n\cdot n =n^2$$ pixeles  que entran en la pantalla de 384 de lado con un pixel se separacion entre imagenes son

$$384=U\cdot n+U-1$$ de donde el tamaño mínimo mo de pantalla es n=1 y U=192 es decir 192 × 192 cuadrados de un pixel y el máximo será 2x2 cuadrados de 191 pixeles cada uno por lado cada uno
Lo que imagino ya preves que la pantalla debe quedar completa, pero a veces te sobra algún pixel sobre el final.

De lado 1 pixel te entran 191 x 191 cuadrados
De lado 2 pixeles te entran 127 x 127
De 3 entran 96 x96
De 4 entran 76 x 76
...
En fin divides 384 por n+1 y te fijas si el último pixel entra.

Si cada imagen es rectangular entonces haces lo mismo por horizontal y vertical
Saludos  \(\mathbb {R}^3\)

30 Abril, 2024, 02:31 am
Respuesta #4

Tachikomaia

  • $$\Large \color{#c88359}\pi\,\pi\,\pi\,\pi$$
  • Mensajes: 596
  • País: uy
  • Karma: +0/-0
  • Sexo: Masculino
El pixel de separación entre una imagen y su contigua existe o no? Eso que pintas verde ahora en pantalla esta o no esta? O bien cada imagen empieza en el pixel siguiente donde termina la otra.
La pantalla es verde, encima se insertan los cuadros (grandes), donde están las X rojas, de tal modo que queda un espacio libre, del tamaño de los cuadraditos. En ese espacio no hay cuadraditos, se ve el fondo de la pantalla.

En cuanto a lo último que dices, ten en cuenta que el programa que uso puede mostrar puntitos más pequeños que un pixel, o... No sé, pero aunque la pantalla mida 384 pixeles de largo, pueden entrar más de 384 cuadraditos, no sé cuántos, en teoría infinitos pero cuando son muy pequeños sólo se muestran algunos o se muestran suavizados, mezclados, no sé.
El problema de las líneas pequeñitas verdes debe ser porque se están usando números decimales y las PCs no lidian bien con ellos. Antes de intentar solucionar eso voy a por cuestiones más importantes del programa. La idea es hacer un generador de imágenes usando programación genética  :D

30 Abril, 2024, 11:42 am
Respuesta #5

Richard R Richard

  • Ingeniero Industrial
  • $$\Large \color{#5b61b3}\pi\,\pi\,\pi\,\pi\,\pi$$
  • Mensajes: 2,356
  • País: ar
  • Karma: +1/-0
  • Sexo: Masculino
  • Dentro de la ciencia todo,fuera de la ciencia nada

En cuanto a lo último que dices, ten en cuenta que el programa que uso puede mostrar puntitos más pequeños que un pixel, o... No sé, pero aunque la pantalla mida 384 pixeles de largo, pueden entrar más de 384 cuadraditos, no sé cuántos, en teoría infinitos pero cuando son muy pequeños sólo se muestran algunos o se muestran suavizados, mezclados, no sé.



El lenguaje de programación debe tener una resolución,  incluso la pantalla donde miras tiene una resolución,  no puedes pintar medio pixel de un color y medio de otro.
Un pixel es el tamaño mínimo.
Si necesitas imágenes cada vez más grandes debes agrandar el contenedor 384 x 384 es pequeño  aún para pantalla viejas de 800x 600 pixeles,  creo que 384 te autoimpones un límite innecesario, o bien el resto de la pantalla lo quieres para otra cosa.
Sea como sea entonces si debes dejar un pixel entre una imagen y la contigua, entonces la formula que te dí esta bien, la has probado?

Saludos  \(\mathbb {R}^3\)

Hoy a las 01:26 am
Respuesta #6

Tachikomaia

  • $$\Large \color{#c88359}\pi\,\pi\,\pi\,\pi$$
  • Mensajes: 596
  • País: uy
  • Karma: +0/-0
  • Sexo: Masculino
No sé cual es el mínimo tamaño visible. El programa es Macromedia Flash 5. Cuando pegas una imagen de Paint ahí, la imagen resultante es un poco más grande (quizá con algunas versiones de Paint no), entre otras cosas. Por eso pensé que en ese programa era posible hacer puntitos más pequeños que un pixel, pero de hecho pueden medir 0.1 pixeles, 0.01 o lo que se especifique. No sé, no me interesa mucho, no es un problema.

Citar
Si necesitas imágenes cada vez más grandes debes agrandar el contenedor
Puede ser, pero no llegué a tanto. Cuando digo grandes me refiero a que tienen más cuadritos, pero si pueden ser más pequeños no hay problema mientras sean visibles. Recuerda que lo quiero principalmente para hacer sprites, ejemplo:

En algún cuadro, algo parecido a uno de esos dibujos, no necesitan muchos cuadritos de largo.

También ten en cuenta que mi PC no es tan rápida. Años atrás, si intentaba algo como eso en mi PC, era lentísimo.

Citar
la has probado?
No, pues ya solucioné el problema, además me cuesta entenderte en esto. En parte es mi culpa por decir pixeles cuando en realidad son cuadritos de tamaño variable, lo que pasa que representan un pixel, simplemente se ven más grandes.