html,
body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
function setup() {
  createCanvas(400, 400);
}

let Sound1;
let Sound2;
let Sound3;
let Sound4;

function preload() {
  Sound1 = loadSound("https://assets.codepen.io/5720103/guitar1.wav");
  Sound2 = loadSound("https://assets.codepen.io/5720103/guitar2.wav");
  Sound3 = loadSound("https://assets.codepen.io/5720103/guitar3.wav");
  Sound4 = loadSound("https://assets.codepen.io/5720103/guitar4.wav");
}

function draw() {
  background("black");
  push();
  noStroke();
  pop();

  GuitarHead();
  GuitarBody();
  GuitarStrings();
  GuitarEnd();

  text("Press Q, W, E, R for sound", 25, 25);
}
function GuitarHead() {
  fill("white");
  rect(185, 60, 35, 5);
  rect(185, 70, 35, 5);
  rect(185, 80, 35, 5);
  fill(101, 67, 33);
  rect(400 / 2 - 10, 50, 25, 125);
}

function GuitarBody() {
  fill(202, 164, 144);
  circle(200, 200, 100);
  circle(200, 275, 125);
  fill("black");
  circle(200, 275, 57);
}

function GuitarStrings() {
  stroke("white");
  let strings1x = 195;
  let strings1y = 50;
  let strings1x2 = 195;
  let strings2y2 = 330;
  //line(strings1x,strings1y,strings1x2,strings2y2)
  let strings1 = line(195, 50, mouseX, mouseY);
  let strings12 = line(mouseX, mouseY, 195, 330);
  let strings2 = line(200, 50, mouseX + 5, mouseY + 5);
  let strings22 = line(mouseX + 5, mouseY + 5, 200, 330);
  let strings3 = line(205, 50, mouseX + 10, mouseY + 10);
  let strings32 = line(mouseX + 10, mouseY + 10, 205, 330);
  let strings4 = line(210, 50, mouseX + 15, mouseY + 15);
  let strings42 = line(mouseX + 15, mouseY + 15, 210, 330);
  noStroke();
}

function GuitarEnd() {
  fill(101, 67, 33);
  rect(190, 330, 25, 5);
}

function keyPressed() {
  if (keyCode == 81) {
    Sound1.play();
  }
  if (keyCode == 87) {
    Sound2.play();
  }
  if (keyCode == 69) {
    Sound3.play();
  }
  if (keyCode == 82) {
    Sound4.play();
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js
  2. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js
  3. https://cdn.jsdelivr.net/gh/StriveMath/p5-teach/dist/Strive.iife.js