What is the p5.js library ?

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.

Your first SKETCH

In the p5.js web editor you will find this pre filled Template

function setup() {
    createCanvas ( 400 , 400 );
}

function draw (  ) { 
    background(220);
}

The setup is a function which gets invoked ONCE at the start and the second function draw ( ) gets called reatedly ( in a loop ) at 60 frames per second.

For more details on the p5.js you may refer to getting started in their documentation. Refer this for detialed tutorials

Getting started

Problem Statement

  • Stage- I : Create a sketch which displays the KATAKANI symbol in the centre of the screen. The symbol ( letter) starts from the top and falls down at variable speed.
  • Stage- II : Add randomness to the code such that as the symbol falls feom the top, y= 0 to the bottom y = height ( Frame height) it should also change to other symbols randomly. Note that there are a total of 96 symbols in the KATAKANI UTF-8 set.

Green Rain - full CODE 

1 var symbol;
2
3 function setup() {
4  createCanvas(window.innerWidth, window.innerHeight);
5  background(0);
6  symbol = new Symbole(width/2,0,random(5,10));
7  symbol.setToRandomSymbol();   
8 }
9
10  function draw() {
11    background(0)  ;
12    fill(255);
13    textSize(46);
14   text("All the fun is happening here.", 200, 100);
15   symbol.render() ;
16   }
17
18  class  Symbole { 
19        constructor(x,y,speed)  {
20         this.x = x;
21         this.y = y;
22  
23         this.speed = speed;
24         this.switchInterval = round(random(2,20));
25  
26        this.setToRandomSymbol = function()  {
27          if ( frameCount % this.switchInterval == 0){
28          this.value = String.fromCharCode((0x30A0)+  round(random(0,96)))
29
30                                }    
31       } ;
32  
33        this.render = function()  {
34            fill(0,255,70);
35            text(this.value,this.x,this.y);
36            this.rain() ;
37            this.setToRandomSymbol();
38         };
39    
40      this.rain = function()  {
41              if(this.y >= height){
42                      this.y=0;
43                    } 
44            else {
45                 this.y = this.y + this.speed;
46                   }          
47          }   
48       }
49    }

The LOGIC behind the CODE

var symbol ; is a global variable declared which can be acessed by any function or method.

SETUP( )

3 function setup() {

4 createCanvas(window.innerWidth, window.innerHeight);

5 background(0);

6 symbol = new Symbole(width/2,0,random(5,10));

7 symbol.setToRandomSymbol();

8 }

Lines 3-8 is where the one time setup() function is defined. createCanvas() as the name says does so. We also need to take care that the animation encompasses entire of the device. To make the extents device agnoistic P5.js has inbuilt keywords window.innerWidth and window.innerHeight. Line 5 assigns a black colour to the enotre background.

symbol on Line 6 is an instance of the class Symbole which is created and the relevant paramenters x, y and a random value for speed are passed.

Line 7 calls the setToRandomSymbol() method for the object symbol

DRAW ( )

10 function draw() {

11 background(0) ;

12 fill(255);

13 textSize(46);

14 text("All the fun is happening here.", 200, 100);

15 symbol.render() ;

16 }

Line 10 intitiaates the core draw() function which runs in a loop at 60 fps and is responsible for displaying the animation on the screen.

All line are self explanatory. Line 15 is where the magic happens when the symbol object invokes render() method.

It is in the render method that all the action is defined.

OBJECT ORIENTED CLASS defintion

class Symbole {

19 constructor(x,y,speed) {

20 this.x = x;

21 this.y = y;

22

23 this.speed = speed;

24 this.switchInterval = round(random(2,20));

25

26 this.setToRandomSymbol = function() {

27 if ( frameCount % this.switchInterval == 0){

28 this.value = String.fromCharCode((0x30A0)+ round(random(0,96)))

29

30 }

31 } ;

the class Symbole needs to be defined with the first letter in upper case. It consists of the following attributes :

  • constructor - where the common variable, local and global are defined
  • function setToRandomSymbol( ) function which assigns the value to the KATAKANI font randomly. In order to introduce more randomness, a Bollean condition is introduced at Line 27 where frameCount - an in built variable = 60 is divided by random numbers between 2 and 20 swithInterval and only if the remainder is zero then the font is displayed on the canvas.

0x30A0 is the first of the 96 KATAKANI letters/symbols. UTF-8 stands for Unicode Transformation Format. It is a family of standards for encoding the Unicode character set into its equivalent binary value. UTF was developed so that users have a standardized means of encoding the characters with the minimal amount of space.

RENDER Method

33 this.render = function() {

34 fill(0,255,70);

35 text(this.value,this.x,this.y);

36 this.rain() ;

37 this.setToRandomSymbol();

38 };

render( ) is the function which does all the work. fill(0,255,75) assigns GREEN colour to the symbols but also adds a slight tinge of BLUE thorugh 70.

The inbuilt text in P5.js accpets three parameters : first- the sumbol stored in the key word value. Second x and third y are the x and y co-ordinates of the location where the symbol is to be placed on the canvas.

lastly the RAIN method

40 this.rain = function() {

41 if(this.y >= height){

42 this.y=0;

43 }

44 else {

45 this.y = this.y + this.speed;

46 }

47 }

Finally the rain( ) method ensures that y cordinate of the symbol keeps chanign from the very top to the bottom of the canvas. When the symbol reaches the bottom, the y coordinate is re set to zero on LINE 42. If the symbol has not reached the bottom, its y co ordinate is incremented with the randomized speed variable.