Como adicionar Biblioteca processingJS no code?

[Adenilson Araújo 0]

Olá pessoal estou começando a programar JS na KhanAcademy, lá tem uma plataforma de reproduzir o código online e é usado o processingJS, dai peguei meu code e coloquei em um HTML, porém não funciona porque falta o processingJS, eu já baixei ele só que não consigo adicionar, nunca dá certo, alguém me diz como posso adicioná-lo e fazer funcionar meu código? Já procurei no google e em outros códigos.

 

É SÓ UMA SIMPLES ANIMAÇÃO

//INÍCIO DA ANIMAÇÃO CÓDIGO

//variáveis corpo
var corpoX=200;
var corpoY=250;
var corpoW=150;
var corpoH=200;
//variáveis cabeça
var cabeçaX=200;
var cabeçaY=120;
var cabeçaW=70;
var cabeçaH=80;

var bolaVeneno=5;
var Moon = 30;

background(0, 196, 245);


fill(0, 0, 0);
text("*PT/BR - Pressione cada uma das setinhas do seu teclado\npara espalhar o veneno!", 20, 20);
text("*ENG - Press each of the little arrows on your keyboard\nto spread the poison!",20,50);

//Imagem do monstrinho no canto superior
image(getImage("avatars/old-spice-man"),285,30);

//corpo
fill(0, 143, 131);
ellipse(corpoX,corpoY,corpoW,corpoH);
//cabeça
ellipse(cabeçaX,cabeçaY,cabeçaW,cabeçaH);

//listas
strokeWeight(25);
stroke(224, 0, 0);
line(corpoX-62,corpoY,corpoX+62,corpoY);
line(corpoX-50,corpoY-50,corpoX+50,corpoY-50);
line(corpoX-50,corpoY+50,corpoX+50,corpoY+50);

//matos
noStroke();
fill(12, 148, 0);
rect(0,350,400,50);

//bola no meio da barriga
stroke(224, 0, 0);
fill(0, 0, 0);
ellipse(corpoX,corpoY,corpoW*1/2,corpoH*2/3);

//Som ao clicar com mouse e criatura
mouseClicked = function() {
    
    playSound(getSound("rpg/giant-no"));
    image(getImage("creatures/OhNoes"), mouseX, mouseY,20,20);
    
};

//Olhos | preencher tela com setas, e som.

strokeWeight(10);
stroke(250, 245, 245);
ellipse(cabeçaX-15,cabeçaY-10,10,10);
ellipse(cabeçaX+15,cabeçaY-10,10,10);

draw = function() {
    noStroke();
    if (keyIsPressed && keyCode === UP) {
        fill(255, 0, 0);ellipse(200,340,bolaVeneno,bolaVeneno);

    playSound(getSound("rpg/battle-swing"));
    bolaVeneno +=2;
    }
    if(keyIsPressed && keyCode ===DOWN){
        fill(17, 0, 255);ellipse(200,340,bolaVeneno,bolaVeneno);
    playSound(getSound("rpg/battle-swing"));
    bolaVeneno +=2;
    }
    if(keyIsPressed && keyCode ===LEFT){
        fill(255, 0, 247);ellipse(200,340,bolaVeneno,bolaVeneno);
    playSound(getSound("rpg/battle-swing"));
    bolaVeneno +=2;
    }
    if(keyIsPressed && keyCode === RIGHT){
        ellipse(200,340,bolaVeneno,bolaVeneno);
        fill(0, 255, 234);
    playSound(getSound("rpg/battle-swing"));
    bolaVeneno +=2;
    }
    ellipse(390,10,20,20);
    arc(corpoX,corpoY+90,50,50,0,360);
    
//efeito olhos

var xPos=cabeçaX-15;
var yPos=cabeçaY-10;

var xPos2=cabeçaX+15;

stroke(3, 0, 0);
noStroke();
ellipse(xPos,yPos,10,10);
ellipse(xPos2,yPos,10,10);

};

//FIM DO CÓDIGO!

Valeu!