​

let img;

function preload() {

  img = loadImage('winter.jpg');

}

​

function setup() {

  createCanvas(600, 600);

  image(img, 0, 0,);

  //Create an input text and a button for interaction. 

  input = createInput();

  input.position(20,550);

  button = createButton('Submit');

  button.position(input.x + input.width, 550);

  button.mousePressed(interact);

  interaction = createElement('h2', 'Hello! What is your name?');

  interaction.position(20, 500);

}

function interact() {

  const name = input.value();

  interaction.html('What a wonderful winter '+name+'!');

  input.value('');

}

​

function draw() {

noStroke();

  //Draw a moon.

  push();

  fill('yellow');

  ellipse(30, 15, 20, 20);

  pop();

  // Draw the snowman.

  push();

  ellipse(100, 440, 110, 150);

  ellipse(100, 335, 70, 70);

  fill('black')

  ellipse(100, 400, 20, 20);

  ellipse(100, 440, 20, 20);

  ellipse(100, 480, 20, 20);

  ellipse(85, 330, 10, 10);

  ellipse(115, 330, 10, 10);

  triangle(20, 500, 70, 350, 100, 400);

  triangle(190, 500,135, 350, 100, 400);

  triangle(70, 310, 130, 310, 100, 250);

  fill('red');

  triangle(100, 345, 140, 330, 100, 340);

  ellipse(105, 354, 10, 10);

  pop();

}

​