​

let drawHeight = 350;

let controlHeight = 50;

let canvasHeight = drawHeight + controlHeight;

let aspectRatio = 1.91; // Open Graph standard

let canvasWidth = canvasHeight * aspectRatio;

let halfWidth = canvasWidth / 2;

let margin = 40;

​

function setup() {

  const canvas = createCanvas(canvasWidth, canvasHeight);

  // Attach the canvas to the <main> element

  const mainElement = document.querySelector('main');

  canvas.parent(mainElement);

}

​

function draw() {

  background('aliceblue');

  solarCell(100, 50, 100, 150, "Solar Cell", 'black');

}

​

// draw a solar cell with a grid upper left at (x,y) of width and height a title on top like "Solar Cell"

function solarCell(x, y, width, height, title, textColor) {

  push(); // Save current drawing state

  fill(textColor);

  textSize(16);

  textAlign(CENTER);

  text(title, x+width/2, y-10);

  // Main panel background

  fill(40, 70, 110); // Dark blue-gray color typical of solar panels

  stroke(80);

  strokeWeight(2);

  rect(x, y, width, height);

  // Grid lines for solar cells

  const cellsPerRow = 4;

  const cellsPerCol = 4;

  const cellWidth = width / cellsPerRow;

  const cellHeight = height / cellsPerCol;

  // Draw vertical grid lines

  strokeWeight(1);

  stroke(60);

  for (let i = 1; i < cellsPerRow; i++) {

    line(x + i * cellWidth, y, x + i * cellWidth, y + height);

  }

  // Draw horizontal grid lines

  for (let i = 1; i < cellsPerCol; i++) {

    line(x, y + i * cellHeight, x + width, y + i * cellHeight);

  }

  // Add metallic connectors

  stroke(200);

  strokeWeight(1);

  for (let i = 0; i < cellsPerRow; i++) {

    for (let j = 0; j < cellsPerCol; j++) {

      // Draw thin lines representing the metallic connections

      const cellX = x + i * cellWidth;

      const cellY = y + j * cellHeight;

      // Horizontal connector lines

      line(cellX + 2, cellY + cellHeight/2, 

           cellX + cellWidth - 2, cellY + cellHeight/2);

      // Vertical connector lines

      line(cellX + cellWidth/2, cellY + 2, 

           cellX + cellWidth/2, cellY + cellHeight - 2);

    }

  }

  // Add subtle reflection effect

  noStroke();

  fill(255, 255, 255, 15);

  beginShape();

  vertex(x, y);

  vertex(x + width * 0.1, y + height * 0.1);

  vertex(x + width * 0.9, y + height * 0.1);

  vertex(x + width, y);

  endShape(CLOSE);

  pop(); // Restore previous drawing state

}