Translating Processing to P5js

p5.js Coding Questions
1

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 for the conversion.
Hopefully somebody can help.

Processing Code


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

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;
}
2

Hello, @codeflow, and welcome to the Processing Foundation Forum!

In p5.js there is no createFont() function. See the documentation for loadFont();

1 Like
3

thanks for your quick response.
I added :

var cooper; 

function preload()
{
  cooper = loadFont('CooperHewitt-Bold'); 
}

and deleted the createFront part.
unfortunately there’s still nothing being displayed.

4

You have this:

  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.

1 Like
5

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 ?

2 Likes
6

The function contains this:

    cooper = null;

That is the reason cooper was set to null. You should remove that function as well as the call to it.

1 Like
7

Thank you so much!
It’s working now

1 Like