daniellaSewing.js

let TutorialButton;
let PatternsButton;
let GalleryButton;
let img;
let tutorialLink;

function preload() {
  img = loadImage('App_Idea.jpg');
}

function setup() {
  let c = createCanvas(windowWidth, windowHeight);

  // Call a function when a file
  // dropped on the canvas has
  // loaded.
  c.drop(file => {
    // Remove the current image, if any.
    if (img) {
      img.remove();
    }

    // Create an element with the
    // dropped file.
    img = createImg(file.data, '');
    img.hide();

    // Draw the image.
    image(img, 40, 20, width-40, height-20);
  });


  let numButtons = 3; // Number of buttons
  let buttonWidth = 150; // Adjust as needed
  let spacing = 80; // Adjust as needed

  let totalWidth = numButtons * buttonWidth + (numButtons - 1) * spacing;
  let startX = windowWidth/6;

  let buttonY = windowHeight * 0.75; // Adjust button y-position

  tutorialLink = createA('https://drive.google.com/drive/u/0/folders/1a3Ol6y4qRh8cwOfdHD1FvpIOtC18xvnU', 'Tutorials', '_blank');
  tutorialLink.position(startX, buttonY);
  tutorialLink.style('background-color', '#f7f0f0')
 tutorialLink.style('color','black')
  tutorialLink.style('padding','5px 10px')
  tutorialLink.style('text-align','center')
  tutorialLink.style('text-decoration','none')
  // color: white;
  // padding: 14px 25px;
  // text-align: center;
  // text-decoration: none;
  // display: inline-block;
  
  PatternsButton = createButton("Patterns");
  PatternsButton.position(windowWidth/2, buttonY);

  GalleryButton = createButton("Gallery");
  GalleryButton.position(windowWidth-(windowWidth/6), buttonY);
  GalleryButton.mousePressed(openGalleryPage); // Call openGalleryPage function when button is pressed
}

function draw() {
  background('#FAECE2');
  
  // Draw the image
  if (img) {
    image(img, 0, 0, width, height);
  }
  
  // Draw mouse coordinates
  // textSize(20);
  // text("(" + mouseX + ", " + mouseY + ")", 5, 26);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);

  // Adjust button positions when window is resized
  let numButtons = 3; // Number of buttons
  let buttonWidth = 150; // Adjust as needed
  let spacing = 100; // Adjust as needed

  let totalWidth = numButtons * buttonWidth + (numButtons - 1) * spacing;
  let startX = (windowWidth - totalWidth) / 2;
  let buttonY = windowHeight * 0.75; // Adjust button y-position

  tutorialLink.position(startX, buttonY);
  PatternsButton.position(startX + (buttonWidth + spacing), buttonY);
  GalleryButton.position(startX + 2 * (buttonWidth + spacing), buttonY);
}

function openGalleryPage() {
  // Open a new window with the gallery page
  window.open('https://editor.p5js.org/25daniella.nunez/full/R41BQgUiF', '_blank');
}