30:T81d,Se quisermos criar 2 bolas, será necessário criar mais 4 variáveis para controlar os mesmos dados da segunda bola, e também será necessário criar uma nova função `gira2()`, já que a função `gira()` aplica os cálculos para as variáveis já existentes. Se quisermos criar 3 bolsas, mais um novo conjunto precisará ser criado. E se quisermos criar 10 bolas, o código certamente ficará complicadíssimo. É nisso que a orientação a *objetos* irá ajudar: um único objeto será criado, e então copiado quantas vezes forem necessárias. Ao invés das variáveis globais `px`, `py`, `angulo` e `raio`, teremos estas mesmas variáveis como parte interna do *objeto*, guardando os valores particulares de cada objeto. E da mesma forma que as *variáveis*, a *função* `gira()` também será parte do próprio *objeto*. Isso é feito assim: ```js let bola = { px: 0, py: 0, angulo: 0, raio: 50, gira: function(mX,mY) { this.px = Math.cos(this.angulo) * this.raio; this.py = Math.sin(this.angulo) * this.raio; this.ellipse(this.px + mX, this.py + mY, 20, 20); this.angulo = this.angulo + 0.01; } } ``` Ao criar o *objeto*, utilizamos `this` antes das *variáveis* para indicar que o valor sendo alterado ou utilizado é aquele que pertence ao próprio *objeto*. É possível utilizar valores de *variáveis* de quaisquer outros *objetos*, e por esse motivo é necessário indicar de qual deles estamos falando. ☞ *Repare que para `mX` e `mY` não utilizamos `this`, pois são as variáveis recebidas através dos parâmetros da função, e não variáveis do objeto.* Para criarmos 3 cópias de bola, utilizaremos o operador *spread* dos *objetos* e *arrays*: ```js let bolaA = { ... bola }; let bolaB = { ... bola }; let bolaC = { ... bola }; ``` E para que as bolas não fiquem todas exatamente na mesma posição, substituiremos os valores iniciais de `angulo` e `raio` em cada *objeto*: ```js bolaA.angulo = 2; bolaA.raio = 50; bolaB.angulo = 4; bolaB.raio = 50; bolaC.angulo = 6; bolaC.raio = 50; ```31:T583,Inicialmente, isto pode parecer muito trabalho para pouco resultado, mas a inclusão de 10 novas bolas se resumirão a criar uma nova copia `bolaD`, `bolaE`, etc., como nas linhas `18`, `19` e `20`, definir seus ângulos e raios iniciais, como nas linhas `22`, `25` e `28`, e executar suas funções `gira()`, como nas linhas `35`, `36` e `37`. Isso será bem mais simples do que gerenciar cerca de 40 variáveis diferentes, e 10 *funções* específicas para cada bola. Agora, imagine que desejemos modificar a cor de cada bola. Sem um *objeto*, seria necessário criar mais 10 *variáveis*, e modificar cada uma das 10 *funções* criadas para girar cada uma das bolas. Como temos um único *objeto* servindo de matriz, nos bastará alterar sua *função* `gira()`, e modificar os valores individuais nos *objetos*, como feito para outros valores nas linhas `22`, `25` e `28`. O *objeto* `bola` (matriz original) ficará assim: ```js let bola = { px: 0, py: 0, angulo: 0, raio: 50, cor: "#000000", gira: function(mX,mY) { this.px = Math.cos(this.angulo) * this.raio; this.py = Math.sin(this.angulo) * this.raio; fill(this.cor); this.ellipse(this.px + mX, this.py + mY, 20, 20); this.angulo = this.angulo + 0.01; } } ``` Como a instrução `fill` já estará sendo dada no próprio *objeto*, ela também poderá ser retirada da *função* `draw()`.32:[] 2e:{"title":"Iniciando com Orientação a Objetos","cells":[{"id":0,"value":"# Iniciando com Orientação a Objetos","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"### POO: Programação Orientada a Objetos\n\n------\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1099,"value":"O conceito de programação orientada a objetos geralmente utiliza o conceito de *classes* e *instâncias*, isto é, o desenho de um componente contendo propriedades (*variáveis*), e métodos (*funções*), que é copiado inúmeras vezes no programa, desempenhando funções e atividades semelhantes, mas com parâmetros diferentes.\n\nJavascript possui *classes* e *instâncias*, mas esta maneira específica de se programar é raramente utilizada com a linguagem. O que encontrarmos com muito mais frequência é a criação de *objetos* javascript, e sua simples cópia. Estes *objetos* guardarão dados próprios (*variáveis*) e utilizarão *funções* próprias para lidar com estes dados, ou para realizarem suas próprias ações.","pinned":false,"hidden":false,"mode":"md"},{"id":1386,"value":"Vamos criar aqui um código que irá gerar uma bola circundando a posição do mouse:","pinned":false,"hidden":false,"mode":"md"},{"id":1388,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1391,"value":"Para fazer isso, foi necessário criarmos quatro variáveis: `angulo`, que guarda o ângulo em que a bola se encontra; `raio`, que guarda a distância entre a posição do mouse e a bola; `px`, que guarda a coordenada calculada no eixo horizontal da bola, em relação à posição do mouse, e `py` que faz a mesma coisa em relação ao eixo vertical.","pinned":false,"hidden":false,"mode":"md"},{"id":1393,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":1397,"value":"A partir disso, bastará acionar a *função* `gira()` de cada *objeto*, para que as três bolas calculem suas posições e sejam desenhadas na tela:\n\n```js\nbolaA.gira(mouseX,mouseY);\nbolaB.gira(mouseX,mouseY);\nbolaC.gira(mouseX,mouseY);\n```\n\nJuntando tudo isso no código, teremos:","pinned":false,"hidden":false,"mode":"md"},{"id":1400,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1405,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1411,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1414,"value":"Novas características como velocidades diferentes, tamanhos diferentes, ou outros comportamentos, podem agora ser incluídos em todas as bolas, com muito mais facilidade.","pinned":false,"hidden":false,"mode":"md"},{"id":1068,"value":"

","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}