ICL
ICL
Intro to Computational Language
Academic Policy
Week 01
Week 02
Week 03
Week 04
Week 05
Week 06
Week 07
Week 08
Week 09
Week 10
Week 11
Week 12
Week 13
Week 14
Week 15
Portfolio
Powered by GitBook

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 ​

​https://tonejs.github.io/​

Function needs "Define" and "Call"

function setup()

We defined setup:

function setup(){    
  ellipse(10,10,10,10);
 }

But we did not call: 

 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.

  1. Modular

  2. 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;
  
}

​https://editor.p5js.org/kdoodoo/sketches/SJyXQ_g5m​

Here we have 3 functions:

  1. Drawing

  2. Bouncing

  3. 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);
}

​https://editor.p5js.org/kdoodoo/sketches/ByW1H_x9X​

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.

​https://goo.gl/forms/FslZlLy46wAns0HI3​

Schedule for Next Week Thursday OR Friday

보강 시간 입력 바랍니다. 다음 주 목/금 중 가능시간

​https://goo.gl/forms/WFa0kI75GirvCU8B3​

Previous
Week 04
Next
Week 06
Last updated 2 years ago
Contents
We have used functions before......
1. Function we are calling 'ellipse function" to make ellipse..
2. Function setup started functioning when the page opens without calling it...
Both are functions but it was either 'Defined Previously' OR 'Functioning before Calling it.'
Function needs "Define" and "Call"
These are library functions... we are using p5.js library.
Let's 'Define' and 'Call' Your Own Function.
We made ball bouncing with ball object.
Here we have 3 functions:
Let's make with functions.
Define and Call
Assignment
Make a project with your own function.
Schedule for Next Week Thursday OR Friday