Week 05
Functions: the basics
We have used functions before......
1. Function we are calling 'ellipse function" to make ellipse..
ellipse(100,100,100,100);
But we did not make/define this function as "ellipse(x, y, width, height){ .... .... ...}"
We are just using the function!!
2. Function setup started functioning when the page opens without calling it...
But we made/defined it.
function setup() {
createCanvas(500, 500);
}
Both are functions but it was either 'Defined Previously' OR 'Functioning before Calling it.'
These are library functions. It is done by P5js library. For example, tone.js is a musical library which has functions already defined by the developer, Yotam Mann
Function needs "Define" and "Call"
function setup()
ellipse()
We did not define:
function ellipse(){
stroke(10,10,10,10);
rotate(1,1,1,10);
}
But we called:
ellipse(10,10,10,10);
These are library functions... we are using p5.js library.
Let's 'Define' and 'Call' Your Own Function.
Modular
Reusable
We made ball bouncing with ball object.
var ball = {
x : 300,
y : 200,
xspeed : 4,
yspeed : -5
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(ball.x,ball.y,20,20);
if (ball.x>width || ball.x<0){
ball.xspeed = ball.xspeed*-1;
}
if (ball.y>height || ball.y<0){
ball.yspeed = ball.yspeed*-1;
}
ball.y = ball.y + ball.yspeed;
ball.x = ball.x + ball.xspeed;
}
Here we have 3 functions:
Drawing
Bouncing
Moving
Let's make with functions.
function move
function move(){
ball.y = ball.y + ball.yspeed;
ball.x = ball.x + ball.xspeed;
}
function bounce
function bounce(){
if (ball.x>width || ball.x<0){
ball.xspeed = ball.xspeed*-1;
}
if (ball.y>height || ball.y<0){
ball.yspeed = ball.yspeed*-1;
}
}
function display
function display(){
ellipse(ball.x,ball.y,20,20);
}
var ball = {
x : 300,
y : 200,
xspeed : 4,
yspeed : -5
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
move();
bounce();
display();
}
function move(){
ball.y = ball.y + ball.yspeed;
ball.x = ball.x + ball.xspeed;
}
function bounce(){
if (ball.x>width || ball.x<0){
ball.xspeed = ball.xspeed*-1;
}
if (ball.y>height || ball.y<0){
ball.yspeed = ball.yspeed*-1;
}
}
function display(){
ellipse(ball.x,ball.y,20,20);
}
Define and Call
Define
Define functions:
function move(){
ball.y = ball.y + ball.yspeed;
ball.x = ball.x + ball.xspeed;
}
function bounce(){
if (ball.x>width || ball.x<0){
ball.xspeed = ball.xspeed*-1;
}
if (ball.y>height || ball.y<0){
ball.yspeed = ball.yspeed*-1;
}
}
function display(){
ellipse(ball.x,ball.y,20,20);
}
Call
Call functions:
move();
bounce();
display();
Assignment
Make a project with your own function.
Schedule for Next Week Thursday OR Friday
보강 시간 입력 바랍니다. 다음 주 목/금 중 가능시간
Last updated