Snippet: P5 Stickman! | Rold

P5 Stickman!

Rold — RoldGold

Using p5.js this snippet creates a stickman and a background on a canvas inside of an HTML page! To see the website just click run while inside of the run tab.

let p5js = `
function setup() {
  createCanvas(2000, 1000)
}

//This is where you start making the p5 objects
function draw() {

  textSize(20);
  textStyle(NORMAL);
  text('This website is using p5.js to make shapes!', 50, 50);
  text('p5.js is a library that basically lets you draw things and put them on HTML sites using js', 50, 80);
  text('This is a stickman with a background:', 50, 110);
  
  //Background
  fill(128, 176, 255);
  rect(20, 150, 1000, 500);
  
  //Grass
  fill(5, 153, 0);
  rect(20, 500, 1000, 150);
  
  //Sun
  fill(228, 240, 0)
  circle(800, 220, 100)
  
  //Legs
  line(50, 500, 75, 400);
  line(100, 500, 75, 400);
  
  //Body
  line(75, 400, 75, 250);
  
  //Arms
  line(75, 300, 100, 400);
  line(75, 300, 50, 400);
  
  //Head
  fill(255, 183, 120);
  circle(75, 250, 75);
  
  //Eyes and mouth
  fill(255, 255, 255);
  circle(60, 240, 20);
  circle(90, 240, 20);
  fill(0, 0, 0);
  circle(58, 242, 5);
  circle(88, 242, 5);
  ellipse(75, 270, 20, 30);
  
  //House
  fill(112, 69, 30);
  rect(400, 300, 300, 200);
  fill(156, 109, 67);
  triangle(375, 300, 550, 200, 725, 300);
  rect(450, 450, 30, 50);
  fill(227, 219, 70);
  circle(457, 480, 10);
  
  fill(0, 0, 0);
  text('This page only uses shapes, which only peaks the surface of what you can do with p5. The p5 library is awesome because of how much you can do with it, you can try some of this on your own by reading the p5.js docs: https://p5js.org/', 50, 520, 700, 1000);
}
`;

let bodyHtml = `


  
    
    
    p5
    
  
  
    
  
`;

return {
  statusCode: 200,
  headers: {'Content-Type': 'text/html'},
  body: Buffer.from(bodyHtml),
};