P5.js Snowman Sketch
A bit more work with shapes and exploring the placement of objects on a page. The original sketch utilized the prompt method to gather input from the user. This was removed from the sketch because it felt pretty invasive.
Here’s a peek at the raw Javascript code to make this sketch work.
function setup() {
createCanvas(730, 600);
ellipseMode(RADIUS);
background('#314248');
//createCanvas(800, 600);
//stroke('#c2c2c2');
//strokeWeight(4);
//background(214, 21, 48);
}
function draw() {
stroke('#cbbab4');
circle(400, 250, 10); //Left, top, width,
circle(400, 275, 10); //Left, top, width,
circle(400, 300, 10); //Left, top, width,
circle(380, 190, 20);
circle(410, 190, 20);
fill('#fff')
ellipse(400, 380, 200, 200); //Left, top, width, height Bottom
ellipse(395, 240, 120, 120); //Left, top, width, height Middle
ellipse(395, 150, 80, 80); //Left, top, width, height Top
stroke('#000');
line(430, 278, 500, 270); //x1, y1, x2, y2
stroke('#000');
line(370, 278, 300, 270);
stroke('#cbbab4');
circle(390, 120, 10);
circle(410, 120, 10);
fill('#cd7a69');
circle(400, 160, 10);
fill('#cd7a69');
strokeWeight(2);
stroke('#fff');
circle(50, 70, 20);
circle(50, 55, 15);
circle(50, 40, 10);
circle(150, 170, 20);
circle(150, 155, 15);
circle(150, 140, 10);
circle(150, 70, 20);
circle(150, 55, 15);
circle(150, 40, 10);
circle(50, 170, 20);
circle(50, 155, 15);
circle(50, 140, 10);
}
Here’s a link to the Github repository for this P5.js sketch.