SOURCE

var x=75;
var y=75;

function setup() { 
  createCanvas(600, 600);
  noStroke();
} 
function draw(){
            background(255)
        fill(0)
        ellipse(x,y,25,25)
        
        if(keyIsPressed){
        if(keyCode==37){
            x-=5
        }
        else if(keyCode==39){
            x+=5
        }
        else if(keyCode==38){
            y-=5
        }
        else if(keyCode==40){
            y+=5
        }
    }
    fill(0)
    beginShape();
    vertex(0,0); vertex(0,600);vertex(600,600);vertex(600,550);
    vertex(50,550); vertex(50,0);
    endShape(CLOSE);

    beginShape();
    vertex(100,0);vertex(600,0);vertex(600,500);vertex(550,500);
    vertex(550,50);vertex(100,50);
    endShape(CLOSE);

    beginShape();
    vertex(100,100);vertex(100,300); vertex(300,300); vertex(300,250);
    vertex(150,250); vertex(150,100);
    endShape(CLOSE);

    beginShape();
    vertex(200,100); vertex(600,100);vertex(600,150);vertex(200,150);
    endShape(CLOSE);

    beginShape();
    vertex(350,150);vertex(400,150);vertex(400,500);vertex(350,500);
    endShape(CLOSE);
    
    beginShape();
    vertex(450,200);vertex(500,200);vertex(500,600);vertex(450,600);
    endShape(CLOSE);
    
    beginShape();
    vertex(100,350);vertex(300,350);vertex(300,500);vertex(250,500);
    vertex(250,400);vertex(100,400);
    endShape(CLOSE);
    
    beginShape();
    vertex(150,400);vertex(200,400);vertex(200,550);vertex(150,550);
    endShape(CLOSE);

var keys = [ 
	{ codes: [ 37, 72, 65 ], pressed: false }, // left
	{ codes: [ 38, 75, 87 ], pressed: false }, // up
	{ codes: [ 39, 76, 68 ], pressed: false }, // right
	{ codes: [ 40, 74, 83 ], pressed: false }  // down
];
}

<script src='https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.min.js'></script>