<jupyter_start><jupyter_text>Generative Art usinf p5.js - Part 1( static )>  This is part1 of a two series post that I am writing in order to explain the usage of [p5.js](https://p5js.org/) on the web browser to implement animations. The librabry needs no installation and one can get on with actual trials immediately. - toc: true - badges: true- comments: true- categories: ['jupyter','generative art','javascript','p5.js','matrix']- author : <NAME>- image: images/p5js1.JPG  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 SKETCHIn the [p5.js web editor](https://editor.p5js.org/) 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](https://p5js.org/get-started/) in their documentation.  Refer [this](https://p5js.org/learn/) 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;23 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 }910  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   }1718  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)))2930                                }    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.<jupyter_code><jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.09679250638660233, 'fraction_numerical': 0.0430031223389157, 'mean_word_length': 3.0383954154727792, 'pattern_counts': {'":': 0, '<': 6, '<?xml version=': 0, '>': 10, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 7, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '1', 'dir': 'jupyter-structured-clean-dedup', 'id': '547587', 'license': 'Apache-2.0', 'n_tokens_mistral': 2116, 'n_tokens_neox': 1908, 'n_words': 868, 'path': '_notebooks/2021-06-22-GenerativeArtinp5jsPart1.ipynb', 'repo_name': 'AnandKhandekar/blog', 'size': '7055'}