How to convert ProcessingJS library to p5.js?

126 views Asked by At

I am trying to convert the code I created in khan academy (processingJS library) to Code Sandbox (p5.js). Any assistance would be great. I am having trouble with the background and text functions. code from processing js.

var l = "1. Have an open heart.";
var k = "2. Be kind.";
var h = "3. Respect boundaries.";
var x = 10;

draw = function() {
    background(165, 231, 232);
    //title
createFont("bookman old style");    
textSize(30);
text("LOVE, ACTUALLY!", 23, 30);
textSize(20);
//first line
text(l, 18, 64);
textSize(20);

// second line
text(k, 18, 88);
textSize(20);

// third line
text(h, 18, 109);
fill(158, 32, 32);

//face outline
noStroke();
ellipse(x,206,142,127);

//eyes
fill(255, 255, 255);
rect(x,175,34,21);
fill(255, 255, 255);
rect(x - 50,175,34,21);
fill(43, 46, 35);

//pupils
ellipse(x + 10,185,13,14);
ellipse(x -33,185,13,14);

//mouth
fill(51, 48, 23);
strokeWeight(7);
arc(x, 223, 55 ,71, 1, 180);

//tongue
fill(222, 11, 11);
arc(x, 223, 20 ,60, 1, 180);
x = x + 2;
     
};

Error messages from p5.js 'draw' is not defined. (no-undef) eslint 'background' is not defined. (no-undef) eslint 'createFont' is not defined. (no-undef) eslint 'textSize' is not defined. (no-undef) eslint 'text' is not defined. (no-undef) eslint 'textSize' is not defined. (no-undef) eslint 'text' is not defined. (no-undef) eslint 'textSize' is not defined. (no-undef) eslint 'text' is not defined. (no-undef) eslint

1

There are 1 answers

1
Ulti On BEST ANSWER

Do you have p5.js imported in your index.html file?

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>

And also you don't seem to have function setup(){ ... declared.
The default code in this function:

function setup() {
  createCanvas(windowWidth, windowHeight);
}