[Dúvida] Dúvida em relação a simplificação do código Esquadro #2

também não intendi de onde saio esse monte de multiplicação e divisão. a forma que eu fiz ficou mais simple:

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

<script>

    function desenhaEsquadro(xa, ya, xc, yc, cor)    {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.fillStyle = cor
        pincel.beginPath();
        pincel.moveTo(xa, ya);
        pincel.lineTo(xc, yc);
        pincel.lineTo(xa, yc);
        pincel.fill();
    }

    desenhaEsquadro(50, 50, 400, 400, 'black');
    desenhaEsquadro(100, 175, 275, 350, 'white');

</script>

também queria saber de onde apareceu essa conta.

Também não entendi muito bem este exercício. Acredito que com uma explicação lógica de por que usar determinados números e operações, utilizar a função pode tornar um projeto com muitas funcionalidades mais simples (por exemplo, imagine ter que criar mais de uma esquadra. Com uma função, ao invés de repetir todas essas linhas de código apenas chamariam a função com novas coordenadas).

Porém, apesar de assimilar algumas coisas que aprendi durante a aula, outras não consigo assimilar, então quem puder indicar qual vídeo aborda mais sobre esse exercício (apesar de saber que o exercício pede coisas que foram ensinadas em mais de uma aula), fico grato.

Olá, olá!

Acompanhando aqui porque eu também não entendi de onde saíram aqueles números para multiplicar e dividir... Tô perdida!

Entendi que não devo fazer a função apenas com o desenho de um triângulo, como o Marx citou e como eu havia feito anteriormente, porque assim deveria ser desenhaTriangulo, e não desenhaEsquadro, já que o esquadro precisa de dois triângulos sobrepostos. Mas e o restante? xa 6? xc 9? (ya + 6 yc) / 7?

Olá,

Estou aqui há um tempo também tentando entender porque ele multiplicou por 6, por 9 e assim por diante...

Não sei se foi mais simples, mas fiz da seguinte forma:

function desenhaEsquadro(xa, ya, xc, yc, cor){

pincel.fillStyle =cor; pincel.beginPath(); pincel.moveTo(xa, ya); pincel.lineTo(xc, yc); pincel.lineTo(xa, yc); pincel.fill();

pincel.fillStyle = "white"; pincel.beginPath(); pincel.moveTo(xa + 50, ya + 125); pincel.lineTo(xc - 125, yc - 50); pincel.lineTo(xa + 50, yc-50); pincel.fill();

} desenhaEsquadro(50, 50, 400, 400, "black");

Acredito que, para entender o motivo de o código do instrutor ser mais simples do que a resolução já colocando as coordenadas dos triângulos, é necessário lembrar que o objetivo da função é tornar o processo mais ágil. A pergunta que devemos fazer é: como sabemos que o triângulo de dentro tem os pontos (100, 175), (100, 350), (275, 350)? Isso não saiu do nada, por isso que tem aquelas fórmulas ali.

Não sei se repararam, mas o triângulo interno tem a metade do comprimento dos lados do triângulo externo. Ou seja, uma proporção de 1/2. Eu não sei como surgiram aquelas fórmulas, é necessário fazer uma pesquisa para entender como chegar à elas. Se vocês substituírem os valores para desenhar o triângulo maior, o menor sempre terá a metade do tamanho dele. Por isso que é mais simples, pois você não precisará sempre fazer a conta para descobrir a posição dos pontos que corresponderia à metade do ponto maior no plano cartesiano.

Boa noite, gostaria de entender também como o professor chegou a esses números para multiplicar e dividir.

Nessa parte eu fiquei perdido.