# Translating Processing to P5js
**URL:** https://discourse.processing.org/t/translating-processing-to-p5js/27332
**Category:** Coding Questions
**Created:** [January 24, 2021, 9:04am UTC](https://discourse.processing.org/t/translating-processing-to-p5js/27332 "2021-01-24T09:04:45Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@codeflow](https://discourse.processing.org/u/codeflow)
#### Post date: [January 24, 2021, 9:04am UTC](https://discourse.processing.org/t/translating-processing-to-p5js/27332/1 "2021-01-24T09:04:45Z")
Hey guys,
this problem is driving me crazy, so I hope somebody can help.
I have this code written in processing, that I want to implement into my html website.
I was doing research and realized I need to convert it into p5js.
Here is the problem:
When running the code in Processing it is working but as soon as I convert it to p5js nothing is being displayed to the website.
The code includes external fonts. Maybe it has something to do with that?
I used [https://pde2js.herokuapp.com](https://pde2js.herokuapp.com) for the conversion.
Hopefully somebody can help.
**Processing Code**
```auto
var cooper;
function setup() {
initializeFields();
createCanvas(1200, 900);
cooper = createFont("CooperHewitt-Bold.otf", 1000);
}
function draw() {
background(color(0xF1, 0xF1, 0xF1));
var ai = "ARTIFICIAL INTELLIGENCE";
var tec = "TECHNOLOGY TECHNOLOGY TECHNOLOGY TECHNOLOGY ";
var soc = "SOCIETY SOCIETY SOCIETY SOCIETY SOCIETY SOCIETY ";
var fontSize = 200;
var lineHeight = fontSize * 0.9;
textFont(cooper);
textSize(fontSize);
textAlign(LEFT_ARROW, TOP);
var xspeed = -frameCount;
fill(0);
text(soc.toUpperCase(), xspeed * 1.5, 70);
fill(0);
rect(0, height / 3, width, height / 3);
fill(color(0xf1, 0xf1, 0xf1));
text(ai.toUpperCase(), xspeed, 170 + lineHeight);
fill(0);
text(tec.toUpperCase(), xspeed * 2, 260 + lineHeight + lineHeight);
}
function initializeFields() {
cooper = null;
}
```
**p5js Code**
```auto
var cooper;
function setup() {
initializeFields();
createCanvas(1200, 900);
cooper = createFont("CooperHewitt-Bold.otf", 1000);
}
function draw() {
background(color(0xF1, 0xF1, 0xF1));
var ai = "ARTIFICIAL INTELLIGENCE";
var tec = "TECHNOLOGY TECHNOLOGY TECHNOLOGY TECHNOLOGY ";
var soc = "SOCIETY SOCIETY SOCIETY SOCIETY SOCIETY SOCIETY ";
var fontSize = 200;
var lineHeight = fontSize * 0.9;
textFont(cooper);
textSize(fontSize);
textAlign(LEFT_ARROW, TOP);
var xspeed = -frameCount;
fill(0);
text(soc.toUpperCase(), xspeed * 1.5, 70);
fill(0);
rect(0, height / 3, width, height / 3);
fill(color(0xf1, 0xf1, 0xf1));
text(ai.toUpperCase(), xspeed, 170 + lineHeight);
fill(0);
text(tec.toUpperCase(), xspeed * 2, 260 + lineHeight + lineHeight);
}
function initializeFields() {
cooper = null;
}
```
---
### Author:  [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [January 24, 2021, 1:51pm UTC](https://discourse.processing.org/t/translating-processing-to-p5js/27332/2 "2021-01-24T13:51:17Z")
Hello, @codeflow, and welcome to the Processing Foundation Forum!
In p5.js there is no `createFont()` function. See the documentation for [`loadFont()`](https://p5js.org/reference/#/p5/loadFont);
---
### Author:  [@codeflow](https://discourse.processing.org/u/codeflow)
#### Post date: [January 24, 2021, 5:00pm UTC](https://discourse.processing.org/t/translating-processing-to-p5js/27332/3 "2021-01-24T17:00:51Z")
thanks for your quick response.
I added :
```auto
var cooper;
function preload()
{
cooper = loadFont('CooperHewitt-Bold');
}
```
and deleted the createFront part.
unfortunately there’s still nothing being displayed.
---
### Author:  [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [January 24, 2021, 5:12pm UTC](https://discourse.processing.org/t/translating-processing-to-p5js/27332/4 "2021-01-24T17:12:15Z")
You have this:
```auto
cooper = loadFont('CooperHewitt-Bold');
```
Does the name of the file have an extension, such as `.otf`, and is the file in the folder or directory with your program?
_Edited on January 24, 2021 to clarify the question relating to the location of the file._
---
### Author:  [@codeflow](https://discourse.processing.org/u/codeflow)
#### Post date: [January 24, 2021, 5:30pm UTC](https://discourse.processing.org/t/translating-processing-to-p5js/27332/5 "2021-01-24T17:30:52Z")
The files are in the same folder and I added the correct extension “.otf”. Still not working…
What does the function “initializeFields()” do? And why is the cooper set to null ?
---
### Author:  [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [January 24, 2021, 5:43pm UTC](https://discourse.processing.org/t/translating-processing-to-p5js/27332/6 "2021-01-24T17:43:40Z")
> [@codeflow](#):
>
> What does the function “initializeFields()” do?
The function contains this:
```auto
cooper = null;
```
That is the reason `cooper` was set to `null`. You should remove that function as well as the call to it.
---
### Author:  [@codeflow](https://discourse.processing.org/u/codeflow)
#### Post date: [January 25, 2021, 9:50am UTC](https://discourse.processing.org/t/translating-processing-to-p5js/27332/7 "2021-01-25T09:50:33Z")
Thank you so much!
It’s working now