Skip to main content
Minecraft creeper

Project URL in online editor: http://alpha.editor.p5js.org/Kemlove/sketches/SJ1ClYNqZ

Both my children are fascinated by the world of Minecraft. I am not really a gamer, and have no clue how to play. I am quite impressed by the block world concept, so In an attempt to impress my children, I am replicating the creeper, a character in this game.

I began by charting coordinates in Photoshop that looked like this:

Creeper

head

135, 5

265, 5

135, 135

265, 135

body

145, 135

255, 135

145, 230

250, 230

r leg

113, 231

178, 231

113, 290

178, 290

l leg

222, 231

286, 231

222, 290

286, 290

Then I found out the colors I wanted using the color sample tool.

RGB colors

51, 204, 51

black, 000

I quickly found out that the grid in P5 is similar, but not quite like Photoshop, so I had to play around with the coordinates...

I wanted to import an actual creepers face, which I uploaded to my server, but my code didn't work. I wonder if I did not apply the code as it was displayed in the example, and found in this link here.

creeper's face

So I drew more blocks for the face. At the end of the day, my children were impressed, and said my version looked like the creeper found in the Minecraft texture pack.

This exercise took me 2 hours, and a good 30 minutes trying to figure out why my image code didn't work.

 

Here is my code:

  var creeperface;   


function setup() {
  createCanvas(450, 450);
 background(153, 204, 153);

creeperface=loadImage("http://itp.afrikatoday.com/creeperface.png");  // creeper's face
}
function draw() {
    
   //creeper's face
  image(creeperface, 140, 10);
 

 
  // head
  stroke(0);
  strokeWeight(10);
  fill(51, 204, 51);
  rect(135, 5, 165, 165);
    //drawing face because image is not loading
  fill(0);
  rect(170, 40, 32, 32);
    fill(0);
  rect(240, 40, 32, 32);
   fill(0);
  rect(205, 72, 32, 16);
    fill(0);
  rect(190, 95, 64, 23);
    fill(0);
 rect(190, 108, 20, 23);
  fill(0);
 rect(234, 108, 20, 23);

  // body
   fill(51, 204, 51);
  rect (165, 165, 108, 200);

  // left leg
   fill(51, 204, 51);
  rect (110,325,75,75);


  // right leg
  fill(51, 204, 51);
  rect (260,325,75,75);

 
}

This is the original 3d creeper image from Minecraft

original minecraft creeper