cat

The p5.js load*() functions (loadImage, loadFont, …) are asynchronous, and may not complete if called in setup(). p5.js has a preload() function that is guaranteed to return before setup() is called.

During conversion, we move any load functions from setup() to preload().

Converted p5.js:

//
// cat
//
let cat;
let mouse;
let mouse_x, mouse_y;
function setup() {
    createCanvas(400, 400);
    noCursor();
    cat.resize(100, 100);
    mouse.resize(50, 50);
    moveMouse();
}
function preload() {
    cat = loadImage("cat.png");
    mouse = loadImage("mouse.png");
}
function moveMouse() {
    mouse_x = random(50, width - 50);
    mouse_y = random(50, height - 50);
}
function draw() {
    background(100);
    imageMode(CENTER);
    image(cat, mouseX, mouseY);
    image(mouse, mouse_x, mouse_y);
    if (dist(mouseX, mouseY, mouse_x, mouse_y) < 50) moveMouse();
}

Original Processing:

//
// cat
//


PImage cat;
PImage mouse;
float mouse_x, mouse_y;


void setup() 
{
    size(400, 400);
    noCursor();

    cat = loadImage("cat.png");
    cat.resize(100, 100);

    mouse = loadImage("mouse.png");
    mouse.resize(50, 50);
    moveMouse();
}


void moveMouse()
{
    mouse_x = random(50, width-50);
    mouse_y = random(50, height-50);
}


void draw() 
{
    background(100);

    imageMode(CENTER);
    image(cat, mouseX, mouseY);
    image(mouse, mouse_x, mouse_y);

    if (dist(mouseX, mouseY, mouse_x, mouse_y) < 50)
      moveMouse();
}