Introdução ao p5.

js:
Funções
Programação II
Funções
• Funções correspondem a blocos de construções primárias
• Permitem o gerenciamento da complexidade do programa a partir da
organização e agrupamento de operações, sendo executadas sob uma
chamada à um nome (nome da função)
• Funções são uma forma de criar bocos de código (módulos) que
podem ser reutilizados ao longo do código.
• Funções aumentam a escalabilidade
• Quando em um programa se verifica um trecho de código que se
repete, este é um possível caso de trazer o código para uma função
Funções
• Em p5.js há as funções padrões setup() e draw()
• Há um grupo de outras funções pré-definidas na biblioteca
• Ex.: ellipse() background() etc.
• É possível, também, criar suas próprias funções
Criando funções
• Para criar ou declarar uma nova função, utiliza-se a palavra-chave function
• Ex.:
function functionName() {
// function body
}

Para funções que requerem a entrada de dados de usuários, trabalha-se

com parâmetros dentro dos parênteses.
function circle(x, y, diameter) {
ellipse(x, y, diameter, diameter);
}
Exemplo de função própria
function setup() {
createCanvas(800, 300);
sayHello();
}
function draw() {
background(220);
}
function sayHello() {
var message = 'Hello World!';
console.log(message);
}
console.log(message); // this line will throw an error
Retornando um valor
• Funções podem trabalhar sem inputs, com um único input ou com
múltiplos inputs.
• Elas podem retornar um resultado(valor) ou não.
• return result;
• Ex.:
• Crie uma função para retornar o quadrado de um número. Solicite que o
usuário entre com um valor, e passe esse número como parâmetro para a
função.
Exemplo de retorno de valor de uma função
function setup() {
createCanvas(800, 300);
}
function draw() {
background(1, 75, 100);
squared(10);
}
function squared(num) {
fill(237, 34, 93);
textSize(60);
textAlign(CENTER, CENTER);
text ('O quadrado de ' + num + ' é: ',400,80);
text(num * num, width/2, height/2);
}
Palavra chave return
• As funções podem retornar ao término de sua execução.
• A palavra-chave return é utilizada nessas situações.
• Ex.: Crie uma função para realizar o cálculo do quadrado de um
número e retorne o valor deste operação.
Palavra chave return
function setup() {
createCanvas(800, 300);
}
function draw() {
background(1, 75, 100);
var x = squared(10);
console.log(x);
}
function squared(num) {
fill(237, 34, 93);
textSize(60);
textAlign(CENTER, CENTER);
var result = num * num;
text(result, width/2, height/2);
// return the value of the result from the function
return result;
Declaração de uma função x Chamar uma
função
• Declarando uma função:
function myFunction() {
}

Chamando uma função:

myFunction();

Obs.: em p5.js não é necessário chamar as funções setup() e draw().

Exercício 1
• Escreva uma função que role dados aleatoriamente.
Exercício 2
• Crie uma função que gere 3 agrupamentos de elipses, em que cada
uma é inscrita em outra. Assim, são desenhadas n elipses, onde n
corresponde ao número de elipses.
• Ex.: function drawTarget(xloc, yloc, size, num) {}