Skip to main content
adicionou 2 caracteres ao conteúdo
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

Quando relacionado ao desenvolvimento de software, pode-se traduzir a definição para como cada parte do código não possuir projeção sobre as demais partes, isto é, quando uma parte sofresofrer alteração, as demais partes do sistema não serão afetadas. Quando partes não são ortogonais, a projeção de uma sobre a outra peé diferente de zero e, portanto, qualquer alteração feita em uma deve-se tomar o cuidado sobre como impactará na outranas outras.

Quando relacionado ao desenvolvimento de software, pode-se traduzir a definição para como cada parte do código não possuir projeção sobre as demais partes, isto é, quando uma parte sofre alteração, as demais partes do sistema não serão afetadas. Quando partes não são ortogonais, a projeção de uma sobre a outra pe diferente de zero e, portanto, qualquer alteração feita em uma deve-se tomar o cuidado sobre como impactará na outra.

Quando relacionado ao desenvolvimento de software, pode-se traduzir a definição para como cada parte do código não possuir projeção sobre as demais partes, isto é, quando uma parte sofrer alteração, as demais partes do sistema não serão afetadas. Quando partes não são ortogonais, a projeção de uma sobre a outra é diferente de zero e, portanto, qualquer alteração feita em uma deve-se tomar o cuidado sobre como impactará nas outras.

adicionou 12 caracteres ao conteúdo
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const x = document.getElementsByName('x')[0];
const y = document.getElementsByName('y')[0];

function update() {

  context.clearRect(0, 0, canvas.width, canvas.height);

  // Desenha o eixo X:
  context.beginPath();
  context.moveTo(0, 300);
  context.lineTo(x.value, 300);
  context.lineWidth = 5;
  context.stroke();

  context.beginPath();
  context.moveTo(0, 300);
  context.lineTo(0, 300 - y.value);
  context.lineWidth = 5;
  context.stroke();

  context.beginPath();
  context.moveTo(0, 300);
  context.lineTo(x.value, 300 - y.value);
  context.strokeStyle = "#FF0000";
  context.lineWidth = 5;
  context.stroke();

  context.strokeStyle = "#000000";
}

x.addEventListener('change', update);
y.addEventListener('change', update);

update();
.half {
  width: 50%;
  float: left;
}

canvas {
  border: 1px solid black;
}
<div class="half">
  <div>
    <label>X: <input type="range" name="x" value="100" min="0" max="300"></label>
  </div>
  <div>
    <label>Y: <input type="range" name="y" value="100" min="0" max="300"></label>
  </div>
</div>

<div class="half">
  <canvas width="300" height="300"></canvas>
</div>
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const x = document.getElementsByName('x')[0];
const y = document.getElementsByName('y')[0];

function update() {

  context.clearRect(0, 0, canvas.width, canvas.height);

  // Desenha o eixo X:
  context.beginPath();
  context.moveTo(0, 300);
  context.lineTo(x.value, 300);
  context.lineWidth = 5;
  context.stroke();

  context.beginPath();
  context.moveTo(0, 300);
  context.lineTo(0, 300 - y.value);
  context.lineWidth = 5;
  context.stroke();

  context.beginPath();
  context.moveTo(0, 300);
  context.lineTo(x.value, 300 - y.value);
  context.strokeStyle = "#FF0000";
  context.lineWidth = 5;
  context.stroke();

  context.strokeStyle = "#000000";
}

x.addEventListener('change', update);
y.addEventListener('change', update);

update();
.half {
  width: 50%;
  float: left;
}

canvas {
  border: 1px solid black;
}
<div class="half">
<div>
  <label>X: <input type="range" name="x" value="100" min="0" max="300"></label>
</div>
<div>
  <label>Y: <input type="range" name="y" value="100" min="0" max="300"></label>
</div>
</div>

<div class="half">
<canvas width="300" height="300"></canvas>
</div>
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const x = document.getElementsByName('x')[0];
const y = document.getElementsByName('y')[0];

function update() {

  context.clearRect(0, 0, canvas.width, canvas.height);

  // Desenha o eixo X:
  context.beginPath();
  context.moveTo(0, 300);
  context.lineTo(x.value, 300);
  context.lineWidth = 5;
  context.stroke();

  context.beginPath();
  context.moveTo(0, 300);
  context.lineTo(0, 300 - y.value);
  context.lineWidth = 5;
  context.stroke();

  context.beginPath();
  context.moveTo(0, 300);
  context.lineTo(x.value, 300 - y.value);
  context.strokeStyle = "#FF0000";
  context.lineWidth = 5;
  context.stroke();

  context.strokeStyle = "#000000";
}

x.addEventListener('change', update);
y.addEventListener('change', update);

update();
.half {
  width: 50%;
  float: left;
}

canvas {
  border: 1px solid black;
}
<div class="half">
  <div>
    <label>X: <input type="range" name="x" value="100" min="0" max="300"></label>
  </div>
  <div>
    <label>Y: <input type="range" name="y" value="100" min="0" max="300"></label>
  </div>
</div>

<div class="half">
  <canvas width="300" height="300"></canvas>
</div>
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

Em desenvolvimento de software a definição de ortogonalidade é exatamente a mesma que a utilizada no âmbito matemático.

Na álgebra, diz-se ortogonais quando duas grandezas possuem o produto escalar (ou interno) igual a zero, xy = 0. O cálculo do produto escalar pode ser resumido à xy = x y cosθ, sendo θ o menor ângulo entre as duas grandezas. Para grandezas não nulas, diz-se ortogonais apenas quando cosθ vale 0, o que implica em θ igual a 90º. Por isso que, quando consideradas apenas duas grandezas, o conceito de ortogonalidade e perpedicularidade acabam se misturando.

Quando tratado de vetores, também pode-se calcular quanto a grandeza de um vetor influencia da grandeza de outro, isto é, calcula-se a projeção de uma grandeza sobre a outra e esse cálculo pode ser feito através de proj = |p| cosθ, sendo θ novamente o menor ângulo entre as grandezas.

Assim, portanto, se duas grandezas são ortogonais, sabe-se que cosθ será nulo e, consequentemente, a projeção de grandeza sobre a outra também será nula.

Em termos menos técnicos, isso implica que pode-se alterar a magnitude de uma das grandezas sem alterar a magnitude das demais grandezas ortogonais a ela.

Quando relacionado ao desenvolvimento de software, pode-se traduzir a definição para como cada parte do código não possuir projeção sobre as demais partes, isto é, quando uma parte sofre alteração, as demais partes do sistema não serão afetadas. Quando partes não são ortogonais, a projeção de uma sobre a outra pe diferente de zero e, portanto, qualquer alteração feita em uma deve-se tomar o cuidado sobre como impactará na outra.

Buscar desenvolver "orientado à ortogonalidade" tem várias consequências positivas, tal como a facilidade de manutenção, dado que uma unidade de código sendo ortogonal ao resto da aplicação pode ser alterada sem a preocupação de como as alterações impactarão na aplicação inteira, desde que a ortogonalidade seja mantida.

Para uma visualização mais prática, podemos imaginar uma grandeza em X e outra em Y, ortogonais entre si, produzindo, juntas, a grandeza vermelha. É possível alterar individualmente as grandezas X e Y (através dos ranges) sem afetar a outra de forma a alterar o resultado como desejado.

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const x = document.getElementsByName('x')[0];
const y = document.getElementsByName('y')[0];

function update() {

  context.clearRect(0, 0, canvas.width, canvas.height);

  // Desenha o eixo X:
  context.beginPath();
  context.moveTo(0, 300);
  context.lineTo(x.value, 300);
  context.lineWidth = 5;
  context.stroke();

  context.beginPath();
  context.moveTo(0, 300);
  context.lineTo(0, 300 - y.value);
  context.lineWidth = 5;
  context.stroke();

  context.beginPath();
  context.moveTo(0, 300);
  context.lineTo(x.value, 300 - y.value);
  context.strokeStyle = "#FF0000";
  context.lineWidth = 5;
  context.stroke();

  context.strokeStyle = "#000000";
}

x.addEventListener('change', update);
y.addEventListener('change', update);

update();
.half {
  width: 50%;
  float: left;
}

canvas {
  border: 1px solid black;
}
<div class="half">
<div>
  <label>X: <input type="range" name="x" value="100" min="0" max="300"></label>
</div>
<div>
  <label>Y: <input type="range" name="y" value="100" min="0" max="300"></label>
</div>
</div>

<div class="half">
<canvas width="300" height="300"></canvas>
</div>