// Laser template - 1.4.2023

// ..................................

// In this example, the preload() function loads the image, and the setup() function creates a new p5.Image object called cutout with a size of 100x100. The copy() function is used to copy a rectangular portion of the loaded image starting at the position (50, 50) with a width and height of 100 pixels, and paste it into the cutout image starting at the position (0, 0) with the same width and height.

​

​

// NOTES: 

// image in corel draw larger than canvas here. Probably due masking and cutting..

​

// setup:

var laser = false; // false; // true; // true; // false;

var filename = "tiedosto";

var datetag = "230308";

​

var marginaali = 4; // mm

var lisarektangeli = false;

// Leikkuualue [mm]

​

let leikkaanelio = true;

var w = 512 * 0.2 + marginaali * 2;

var h = 512 * 0.2 + marginaali * 2; // 768 *0.2 + marginaali*2; //512*0.2 + marginaali*2;

​

// vakiot

var sc = 1; // 0.5 - make image larger before printing: isoille pinnoille

var s = sc * 2.83491576757; // 200 / 39 * 90 / 162.805; // scale TODO:

​

let tekstireunoilla = "x";

​

let image_loc_x = marginaali * s;

let image_loc_y = marginaali * s;

​

let tekstimarginaali = -s * 4;

​

// ..................................

// colors

var vainleikkaus = true;

// ..................................

var cutcolor = [0, 0, 0];

var redcolor = [255, 0, 0];

var lime = [0, 255, 0];

var bluecolor = [0, 0, 255];

var yellow = [255, 255, 0];

var fuchsia = [255, 0, 255];

var aqua = [0, 255, 255];

​

var innercut = redcolor;

var fastvcarving = lime;

var fastraster = yellow;

var finalcut = aqua;

// ..................................

​

// ..................................

// lisamuuttujat

var tekstikoko = 30;

var leikkausalueenkulmienpyoristys = 0; // 3;

// ..................................

​

var iw;

var ih;

var image_size_x;

var image_size_y;

​

// ..................................

// preload - fonts etc.

// ..................................

function preload() {

  let selectimage = 6; // 14; // toimii vaan neliö ja pystykuvilla.

​

  font = loadFont("data/Publishers.ttf");

  img = loadImage("img/" + selectimage + ".png");

}

​

// ..................................

​

// ..................................

function setup() {

  createCanvas(w * s, h * s, SVG); // Create SVG Canvas (w mm x h mm)

  if (laser) {

    strokeWeight(0.1 * sc); // 0.1 for laser, larger values for

  } else {

    strokeWeight(1); // 0.1 for laser, larger values for

  }

  if (vainleikkaus) {

    stroke(cutcolor); //

  } else {

    stroke(redcolor); // use colors given above

  }

​

  if (!laser) {

    background(240);

  }

  print("leikkuualue:" + w + " X " + h + "[mm]");

​

  textFont(font);

  textSize(tekstikoko);

  textAlign(CENTER, CENTER);

  noFill(); // use fill only for raster design.

​

  // createImage() is a function in p5.js that creates a new, empty p5.Image object with a specified width and height. You can use it to create a new image that you can then manipulate and draw to the canvas using other p5.js functions.

​

  if (false) {

    // Set the pixels of the image to a grayscale gradient

    img.loadPixels();

    ii = 0;

    for (var i = 0; i < img.width; i++) {

      for (var j = 0; j < img.height; j++) {

        ii = ii + 1;

        var value = map(i + j, 0, img.width + img.height, 0, 255);

​

        var r = img.pixels[ii];

        var g = img.pixels[ii + 1];

        var b = img.pixels[ii + 2];

        var pixelColor = color(10, g, b);

​

        //  var pixelColor = img.get(i, j);

        // print(pixelColor);

        img.set(i, j, color(pixelColor));

      }

    }

    img.updatePixels();

  }

​

  iw = img.width;

  ih = img.height;

  sc = 0.2;

​

  // To put an image inside an ellipse shape, you can use the mask() function in p5.js. Here's an example:

​

  image_size_x = iw * sc * s;

​

  if (leikkaanelio) {

    image_size_y = iw * sc * s;

  } else {

    image_size_y = ih * sc * s;

  }

​

  print("image_size_x:" + iw, "image_size_y:" + ih);

​

  // let leikkaanelio = true;

  if (leikkaanelio) {

    print(

      "SCALED: image_size_x:" + image_size_x,

      "image_size_y:" + image_size_y

    );

    cutout = createImage(iw, iw);

​

    // cut a rectangular portion from the loaded image and paste it into the cutout

    cutout.copy(img, 0, 0, iw, iw, 0, 0, image_size_x, image_size_x);

  } else {

    print(

      "SCALED: image_size_x:" + image_size_x,

      "image_size_y:" + image_size_y

    );

    cutout = createImage(iw, ih);

​

    // cut a rectangular portion from the loaded image and paste it into the cutout

    cutout.copy(img, 0, 0, iw, ih, 0, 0, image_size_x, image_size_y);

  }

  //  copy(srcImage, srcX, srcY, srcW, srcH, destX, destY, destW, destH)

  //Here's what each argument means:

​

  //srcImage: The source image from which to copy pixels.

  //srcX: The x-coordinate of the upper-left corner of the region of the source image to copy.

  //srcY: The y-coordinate of the upper-left corner of the region of the source image to copy.

  //srcW: The width of the region of the source image to copy.

  //srcH: The height of the region of the source image to copy.

  //destX: The x-coordinate of the upper-left corner of the destination image where the pixels will be copied to.

  //destY: The y-coordinate of the upper-left corner of the destination image where the pixels will be copied to.

  //destW: The width of the destination image.

  //destH: The height of the destination image.

}

​

// ..................................

​

// ..................................

function draw() {

  rect(0 * s, 0 * s, w * s, h * s, leikkausalueenkulmienpyoristys * s);

​

  if (lisarektangeli)

    rect(image_loc_x, image_loc_y, image_size_x, image_size_x);

​

  let usemask = true;

​

  if (usemask) {

    // let maskGraphic = createGraphics(width, height);

    let maskGraphic;

    if (leikkaanelio) {

      maskGraphic = createGraphics(iw, iw);

    } else {

      maskGraphic = createGraphics(iw, ih);

    }

​

    //let maskGraphic = createGraphics(iw, ih); // createImage(iw, ih);

​

    // Draw an ellipse on the graphics buffer

    maskGraphic.noStroke();

    maskGraphic.fill(255);

    //maskGraphic.ellipse(iw/2, ih/2 , iw);

    //maskGraphic.ellipse(image_loc_x + image_size_x/2, image_loc_y + image_size_y/2, image_size_x);

​

    maskGraphic.ellipse(

      0 + image_size_x / 2,

      0 + image_size_y / 2,

      image_size_x

    );

​

    // Use the graphics buffer as a mask for the image

    cutout.mask(maskGraphic);

​

    image(cutout, image_loc_x, image_loc_y);

  } else {

    image(cutout, image_loc_x, image_loc_y);

  }

​

  ellipse(

    image_loc_x + image_size_x / 2,

    image_loc_y + image_size_y / 2,

    image_size_x

  );

​

  curvetext();

​

  if (laser) {

    save(filename + datetag + ".svg");

    print("Your svg-design was saved.");

  }

​

  noLoop();

}

// ..................................

function curvetext() {

  // Draw the curved text

  push();

  translate(image_loc_x + image_size_x / 2, image_loc_y + image_size_y / 2);

  rotate(-HALF_PI);

​

  let kohtakaarel = image_size_x / 2 - tekstikoko - tekstimarginaali;

​

  let angleStep = TWO_PI / 12;

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

    let x = cos(angleStep * i) * kohtakaarel;

    let y = sin(angleStep * i) * kohtakaarel;

    push();

    translate(x, y);

    rotate(angleStep * i + HALF_PI);

    let ix = i;

    if (ix == 0) ix = 12;

    text(ix, 0, 0);

    pop();

  }

  pop();

}

​

// ..................................

function keyPressed() {

  if (key == "p") {

    //     if (laser) {

    save(filename + datetag + ".svg");

    print("Your svg-design was saved.");

    // }

  }

}

​