Ayuda o consejos para calcular coordenadas

Hola Shanon, no estaria entendiendo tu duda, pero la respuesta final seria asi //Posición rostro pincel.fillStyle = 'darkgreen'; //x - y - base- altura pincel.fillRect(200, 50, 350 ,300); //Posición ojos pincel.fillStyle = 'black'; //x - y - base- altura pincel.fillRect(250, 110, 90, 90); pincel.fillRect(410, 110, 90, 90); //Posición nariz //x - y - base- altura pincel.fillRect(340, 200, 70, 100); //Posición boca //x - y - base- altura pincel.fillRect(300, 240, 40, 110); pincel.fillRect(410, 240, 40, 110);

No, no respondiste mi duda. Gracias!! Igual ya con las instrucciones finalmente lo hice. Pero la idea era poder calcular los ejes X y Y sola (sin que el instructor me dijera cuáles eran o en este caso tu que estás haciendo lo mismo).

¡Hola Shanon!

Ciertamente este es un tema complejo al inicio, cuando uno da sus primeros pasos. ¡Pero tranquila! Con el tiempo ya le irás cogiendo el ritmo a esto :)

Entonces, imaginemos que nuestro monitor nos da una resolución de 800x600, vale decir, 800 pixeles en el eje X y 600 pixeles en el eje Y, los que le darían la dimensión a nuestra pequeña pantalla.

Nuestro canvas sin embargo, podemos dimensionarlo como nosotros queramos, pero siempre es bueno tener en cuenta la dimensión de nuestra pantalla para hacernos una idea de cómo resultará nuestro canvas, entonces mi canvas podría dejarlo como 400x300, es decir, a la mitad de los ejes X e Y de mi monitor.

Y luego, para ir calculado las distancias que vamos a ocupar tendremos que tener bastante ojo... Por ejemplo, pincel.fillRect(200, 50, 350, 300) nos va a situar en el eje X en el pixel 200 (de 400 que definimos para nuestro canvas, es decir, a la mitad de la pantalla) y se moverá 150 pixeles a la derecha, dejandonos en el pixel 350 del eje X, a 50 pixeles de distancia de llegar al límite que hemos establecido para nuestro eje X de 400. ¿Hasta ahora, se entiende?

Luego para el eje Y, lo mismo, el método nos situará en el eje Y de 50 pixeles, de 300 que hemos definido, mucho menos de la mitad. Y se moverá 250 pixeles en el eje Y, dejandonos en el pixel 300 del eje Y. Esto quiere decir que se moverá desde el pixel 50, hasta el final de mi canvas, porque definimos el canvas como 400x300.

Entonces, es una cuestión de imaginar nuestra pantalla y pensar que tanto el eje Y como el eje X son como "reglas" medidas en pixeles de izquierda a derecha y de arriba hacia abajo, comenzando ambas en el eje 0, avanzando hasta el final del canvas.

0       50    100   150   200  250  300  350  400  Eje X
50                          X ------------X
100                        |              |
150                        |              |
200                        |              |
250                        |              |
300                        |--------------X
eje Y

No sé si me habré explicado bien. Pero si tienes alguna duda, procuraré ser más claro para poder responderlas.

Saludos!

Hola Shanon, si de pronto puedes, para que se pueda comprender un poco, lo mejor es hacer lo mismo pero de pronto con cartulina a escala, así vas teniendo una visión más clara y se puede comprender aún mejor, can cada una de las figuras que hagas las vas sobreponiendo, una encima de la otra y luego vas sacando las medidas, después que lo comprendas, trasladalo a un papel, con todas las coordenadas, después de eso lo podrás pasar más sencillo a sublime, y se te facilitará hacer lo mismo con los siguientes problemas similares que encuentres. Sí se puede! adelante!

Hola Shanon, intentaré explicarme lo mejor posible, mira en el ejemplo que pones en tu duda, es el texto que menciona el profesor para la parte de la boca, en este caso tenemos que la nariz mide 70 en el eje "x" y 100 en el eje "y" (el dato de "y" no lo tomaremos en cuenta en este caso) y los laterales de la boca miden 40 en el eje "x" y 110 en el eje "y" (nuevamente no tomaremos en cuenta este dato), entonces si tenemos esto: "Las coordenadas de la primera parte de la boca (izquierda) es el X inicial de la nariz menos 40".

El -40 es por la distancia que mide la primera parte de la boca en el eje "x", porque ocupas que la boca empiece 40 posiciones antes de donde inicia la nariz para que quede cuadrado. (Espero haberme explicado)

Y el +70 es la medida de la distancia de la nariz en el eje "x", en este caso ocupamos irnos al otro lado de la nariz para hacer la segunda parte de la boca, teniendo en cuenta que la nariz empieza en el 340 del eje "x", necesitas sumar esos +70 (que es lo que mide la nariz en el eje "x"), he de ahi el resultado de la suma de ambos = 410 (que es donde inicia la segunda parte de la boca).

Hola ¿cómo están?

Oigan, muchísimas gracias a todos por compartirme sus soluciones y sus dudas, me despejan un poco más mi incertidumbre, porque mentiría si digo que ya entiendo al 100%, sin embargo, fueron de mucha ayuda y pondré todos sus consejos en práctica. La solución de realizar el plano cartesiano con una cartulina a escala realmente me gusta mucho, es como cuando uno está en el colegio que le enseñaban a sumar con palitos o con los dedos. Una vez se entiende lo básico creo que se pueden avanzar ya a dimensionarlo en la pantalla del computador.

PD: Lo mejor de todo es que no me siento sola en esto, gracias nuevamente por responder y enseñarme.

Abrazos.

Lo que yo hice para que todo quedara centrado es primero identificar a dirección al que van las coordenadas (de izquierda a derecha el ancho y de arriba hacia abajo el alto) luego, así:

A. Dimensionar la pizarra, que sería propiamente las dimensiones como lo expllicó el instructor: (0,0,600,400).

B. Luego, quería que la cabeza quedara centrada dentro de esas dimensiones, comencé primero con el ancho de la cabeza que son 350. Bueno, si la pizarra tiene de ancho 600, le resto 350 y me queda el sobrante de la pizarra que serían 250; ahora si divido 250 entre 2 puedo ponerlo centrado de esta manera: 125 + 350 + 125 = 600, si te fijas ya el ancho quedo centrado.

C. Luego hice lo mismo con el alto (comenzando su recorrido de arriba hacia abajo), 400 le resto 300 quedan 100 y para centrar divido entre dos esos 100 quedando: 50 + 300 + 50 = 400.

D. Quiere decir que yo recorro 125 en x (izq a der), 50 en y (arr a aba), para que la dimensionar 350x300 del otro lado me queden 125 y 50 en la pizarra respectivamente.

Así:

Luego así hice con todo lo demás. Yo comencé con la nariz porque su ancho esta en el centro de la cabeza y deahí en adelante me agarré de la nariz para que quedase pegado todo.

Saludos y éxitos a todos los de este tópico :)

Estoy en el mismo punto que tú Shanon y tengo que leer hasta tres veces las respuestas de los compañeros para medio entender. Comprendo tu frustración y comparto tus ganas de querer aprender.

<canvas width="600" height="400"> </canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "darkgreen" //cabeza
    pincel.fillRect(0,0,350,300); //(posicion eje x, posicion eje Y, ancho figura, largo figura)

    pincel.fillStyle="black"; 
    pincel.fillRect(50,70,90,90) //ojo1
    pincel.fillRect(210,70,90,90) //ojo2 
    pincel.fillRect(140,160,70,100) //nariz
    pincel.fillRect(100,190,40,110) //boca1 
    pincel.fillRect(210,190,40,110) //boca2

</script>

Si, es muy complejo explicar algo de manera escrita. Voy a intentar hacerlo de nuevo mas amplio en unas horas, y si no podemos practicar en una sesión de zoom, meet o en discord.

Yo lo hice de esta manera

<canvas width = "600" height = "400"> </canvas>

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
//cuadro1
    pincel.fillStyle = "darkgreen";// propiedad
    pincel.fillRect(0,0,350,300); 

//Cuadro2
    pincel.fillStyle = "black";// propiedad
    pincel.fillRect(50,60,90,90);

//cuadro3
    pincel.fillStyle = "black";// propiedad
    pincel.fillRect(210,60,90,90);

//cuadro4
    pincel.fillStyle = "black";// propiedad
    pincel.fillRect(140,150,70,100);

//cuadro5
    pincel.fillStyle = "black";// propiedad
    pincel.fillRect(100,190,40,110);

//cuadro6
    pincel.fillStyle = "black";// propiedad
    pincel.fillRect(210,190,40,110);

</script>

porque no entendi en esta parte del profe que menciona esto en su explicacion de porque las coordenadas iniciales son 200 y 50:

Con el pincel en mano podemos diseñar la cabeza verde de Creeper. Las coordenadas iniciales son 200 en el eje X y 50 en el eje Y; con una base de 350 pixeles y altura de 300 pixeles.