p5.zine 0.0.1

package/src/custom.js

@@ -0,0 +1,430 @@
+// customized functions
+export function customAddon(p5, fn) {
+  const applyMethod = (name, method) => {
+    fn[name] = method;
+    if (p5?.Graphics?.prototype) {
+      p5.Graphics.prototype[name] = method;
+    }
+  };
+
+  applyMethod("Background", function (r, g, b) {
+    if (typeof r === "string") {
+      if (r.indexOf("rgb") > -1) {
+        let colorArr = r.slice(r.indexOf("(") + 1, r.indexOf(")")).split(",");
+        this.background(
+          colorArr.map((str) => {
+            return Number(str);
+          })
+        );
+      } else {
+        this.background(r);
+      }
+    }
+    this.background(r, g, b);
+  });
+
+  applyMethod("selfieBackground", function (r, g, b) {
+    this.push();
+    this.translate(this.width, 0);
+    this.scale(-1, 1);
+
+    if (r != undefined && g != undefined && b != undefined) {
+      this.tint(r, g, b);
+    }
+
+    if (selfie.height > selfie.width) {
+      this.image(
+        selfie,
+        0,
+        0,
+        this.width,
+        (this.height * selfie.height) / selfie.width
+      );
+    } else {
+      this.image(
+        selfie,
+        -50,
+        0,
+        (this.width * selfie.width) / selfie.height,
+        this.height
+      );
+    }
+    this.pop();
+  });
+
+  applyMethod("rightCamera", function () {
+    image(
+      capture,
+      0,
+      0,
+      this.width,
+      (this.width * capture.height) / capture.width
+    );
+  });
+
+  applyMethod("randomLayout", function (
+    word = ["word"],
+    size = 7,
+    num = 5,
+    repeat = 20,
+    fun = false
+  ) {
+    const sizer = size*10;
+    this.push();
+
+    this.translate(this.width / 2, this.height / 2);
+    for (let i = 0; i < repeat; i++) {
+      for (let j = 0; j < word.length; j++) {
+        if (fun) {
+          this.textSize(random(20, 100));
+        }
+        if (typeof word[j] === "string") {
+          this.text(
+            word[j],
+            random(-(this.width / 10) * num, (this.width / 10) * num),
+            random(-(this.height / 10) * num, (this.height / 10) * num)
+          );
+        } else if (typeof word[j] === "object") {
+          let ar = word[j].width / word[j].height;
+          this.image(
+            word[j],
+            random(-(this.width / 10) * num, (this.width / 10) * num),
+            random(-(this.height / 10) * num, (this.height / 10) * num),
+            sizer * ar * 2,
+            sizer * 2
+          );
+        }
+      }
+    }
+    this.pop();
+  });
+
+  applyMethod("gridLayout", function (
+    word = ["word"],
+    size = 7,
+    columnNum = 5,
+    repeat = 15,
+    fun = false
+  ) {
+    this.push();
+    this.translate(10, 30);
+    let row = 0,
+      column = 0;
+    let num = 0;
+    let sizer = size*10;
+
+    for (let i = 0; i < repeat; i++) {
+      for (let j = 0; j < word.length; j++) {
+        if (fun) {
+          const rowNum = int(random(5, 10));
+          row = floor(num / rowNum);
+          column = num % columnNum;
+        } else {
+          row = floor(num / columnNum);
+          column = num % columnNum;
+        }
+
+        if (typeof word[j] === "string") {
+          this.text(word[j], column * sizer * 2.5, row * sizer * 2.5);
+        } else if (typeof word[j] === "object") {
+          let ar = word[j].width / word[j].height;
+          this.image(
+            word[j],
+            column * sizer * 2.5 - sizer / 2,
+            row * sizer * 2.5 - sizer,
+            sizer * ar * 2,
+            sizer * 2
+          );
+        }
+        num++;
+      }
+    }
+    this.pop();
+  });
+
+  applyMethod("glitchLayout", function (
+    word = ["word"],
+    sizer = 7,
+    numMax = 5,
+    repeat = 20,
+    fun = false
+  ) {
+
+    let wave;
+    if (fun) {
+      wave = random(100);
+    } else {
+      wave = random(10, 20);
+    }
+
+    for (let i = 0; i < repeat; i++) {
+      const num = random(1, numMax)
+
+      for (let j = 0; j < word.length; j++) {
+        const w = random(this.width);
+        const h = random(this.height);
+
+        for (let n = 0; n < num; n++) {
+          if (typeof word[j] === "string") {
+            this.text(word[j], w + n * 20, h + sin(n * wave) * 30);
+          } else if (typeof word[j] === "object") {
+            let ar = word[j].width / word[j].height;
+            this.image(word[j], w + n * 30, h + sin(n * wave) * 40, 10 * ar * 2 * sizer+ n * 5, 10 * 2 *sizer);
+          }
+        }
+      }
+    }
+  });
+
+  applyMethod("leftBackground", function (r, g, b) {
+    this.push();
+    this.noStroke();
+    if (typeof r === "string") {
+      if (r.indexOf("rgb") > -1) {
+        let colorArr = r.slice(r.indexOf("(") + 1, r.indexOf(")")).split(",");
+        this.fill(
+          colorArr.map((str) => {
+            return Number(str);
+          })
+        );
+      } else {
+        this.fill(r);
+      }
+    } else {
+      this.fill(r, g, b);
+    }
+    this.rect(0, 0, this.width / 2, this.height);
+    this.pop();
+  });
+
+  applyMethod("rightBackground", function (r, g, b) {
+    this.push();
+    this.noStroke();
+    if (typeof r === "string") {
+      if (r.indexOf("rgb") > -1) {
+        let colorArr = r.slice(r.indexOf("(") + 1, r.indexOf(")")).split(",");
+        this.fill(
+          colorArr.map((str) => {
+            return Number(str);
+          })
+        );
+      } else {
+        this.fill(r);
+      }
+    } else {
+      this.fill(r, g, b);
+    }
+    this.rect(this.width / 2, 0, this.width / 2, this.height);
+    this.pop();
+  });
+
+  applyMethod("fullPage", function (material) {
+    let size;
+
+    if (typeof material === "object") {
+      if (material.width > material.height) {
+        size = this.height;
+        let ar = material.width / material.height;
+        this.image(material, 0, 0, size * ar, size);
+      } else {
+        size = this.width;
+        let ar = material.height / material.width;
+        this.image(material, 0, 0, size, size * ar);
+      }
+    } else {
+      this.text(material, 10, 10, this.width - 20);
+    }
+  });
+
+  applyMethod("leftPage", function (material, offsetX, offsetY) {
+    this.push();
+    this.translate(offsetX, offsetY);
+    if (typeof material === "object") {
+      this.push();
+      if (material.width > material.height) {
+        size = this.height;
+        let ar = material.width / material.height;
+        this.image(material, 0, 0, size * ar, size);
+      } else {
+        size = this.width / 2;
+        let ar = material.height / material.width;
+        this.image(material, 0, 0, size, size * ar);
+      }
+      this.pop();
+    } else {
+      this.push();
+
+      if (typeof material === "string") {
+        this.text(material, 10, 10, this.width / 2 - 20);
+      }
+      this.pop();
+    }
+    this.pop();
+  });
+
+  applyMethod("rightPage", function (material, offsetX, offsetY) {
+    this.push();
+    this.translate(offsetX, offsetY);
+    if (typeof material === "object") {
+      this.push();
+      this.translate(this.width / 2, 0);
+
+      if (typeof material === "object") {
+        if (material.width > material.height) {
+          size = this.height;
+          let ar = material.width / material.height;
+          this.image(material, 0, 0, size * ar, size);
+        } else {
+          size = this.width / 2;
+          let ar = material.height / material.width;
+          this.image(material, 0, 0, size, size * ar);
+        }
+      }
+      this.pop();
+    } else {
+      this.push();
+      this.translate(this.width / 2, 0);
+
+      if (typeof material === "string") {
+        this.text(material, 10, 10, this.width / 2 - 20);
+      }
+      this.pop();
+    }
+    this.pop();
+  });
+
+  applyMethod("textSet", function (
+    theFont = "Averia Libre",
+    theSize = 20,
+    theAlign = LEFT,
+    theLead = theSize,
+    theColor
+  ) {
+    if(typeof theColor !== "undefined" && typeof theColor !== null){
+      this.fill(theColor)
+    }
+    this.textFont(theFont);
+    this.textSize(theSize);
+    this.textAlign(theAlign);
+    this.textLeading(theLead);
+  });
+
+  applyMethod("textBox", function (
+    inputText,
+    startX = 0,
+    startY = 0,
+    boxWidth = this.width,
+    boxHeight = this.height,
+    gapX = 50,
+    showBox = false
+  ) {
+    let paragraphs = inputText.split("\n");
+    let lineHeight = this.textAscent() + this.textDescent();
+    let currentY = startY;
+    let currentX = startX;
+    let textAlignMode = this.textAlign().horizontal;
+    let textVerticalAlignMode = this.textAlign().vertical;
+
+    let linesInColumn = [];
+    let currentColumn = 0;
+    let linesCount = 0;
+
+    // Calculate the total number of lines in each column
+    for (const paragraph of paragraphs) {
+      let words = paragraph.split(" ");
+      let currentLine = words[0];
+
+      for (let i = 1; i < words.length + 1; i++) {
+        let word = words[i];
+        let nextLine = currentLine + " " + word;
+
+        if (i < words.length && ceil(this.textWidth(nextLine)) < boxWidth) {
+          currentLine = nextLine;
+        } else {
+          linesCount++;
+          currentY += lineHeight;
+
+          if (currentY + lineHeight > startY + boxHeight) {
+            linesInColumn[currentColumn] = linesCount;
+            linesCount = 0;
+            currentY = startY;
+            currentX += boxWidth + gapX;
+            currentColumn++;
+          }
+
+          currentLine = word;
+        }
+      }
+    }
+
+    linesInColumn[currentColumn] = linesCount;
+
+    // Draw the text with the correct alignment
+    currentY = startY;
+    currentX = startX;
+    currentColumn = 0;
+    linesCount = 0;
+
+    for (const paragraph of paragraphs) {
+      let words = paragraph.split(" ");
+      let currentLine = words[0];
+
+      for (let i = 1; i < words.length + 1; i++) {
+        let word = words[i];
+        let nextLine = currentLine + " " + word;
+
+        if (i < words.length && ceil(this.textWidth(nextLine)) < boxWidth) {
+          currentLine = nextLine;
+        } else {
+          let offsetX = 0;
+          let offsetY = 0;
+
+          // Calculate horizontal offset based on textAlign
+          if (textAlignMode === this.CENTER) {
+            offsetX = boxWidth / 2;
+          } else if (textAlignMode === this.RIGHT) {
+            offsetX = boxWidth;
+          }
+
+          // Calculate vertical offset based on textBaseline
+          if (textVerticalAlignMode === this.CENTER) {
+            offsetY = ceil(
+              (boxHeight - (linesInColumn[currentColumn] - 1) * lineHeight) / 2
+            );
+          } else if (textVerticalAlignMode === this.BOTTOM) {
+            offsetY = ceil(
+              boxHeight - (linesInColumn[currentColumn] - 1) * lineHeight
+            );
+          }
+
+          this.text(currentLine, currentX + offsetX, currentY + offsetY);
+
+          currentY += lineHeight;
+
+          if (currentY + lineHeight > startY + boxHeight) {
+            currentY = startY;
+            currentX += boxWidth + gapX;
+            currentColumn++;
+          }
+
+          currentLine = word;
+        }
+      }
+    }
+
+    // console.log(linesInColumn);
+
+    // Draw outlines for text boxes
+    if (showBox === true) {
+      this.push();
+      this.stroke(0, 0, 255);
+      this.strokeWeight(1);
+      this.noFill();
+      let numColumns = Math.ceil((currentX - startX) / (boxWidth + gapX)) + 1;
+      for (let i = 0; i < numColumns; i++) {
+        this.rect(startX + i * (boxWidth + gapX), startY, boxWidth, boxHeight);
+      }
+      this.pop();
+    }
+  });
+}

package/src/html.js

@@ -0,0 +1,6 @@
+import html from "./ui.html";
+
+// HTML-----------------------------------------
+document.addEventListener("DOMContentLoaded", function () {
+  document.body.insertAdjacentHTML("beforeend", html);
+});

package/src/index.js

@@ -0,0 +1,3 @@
+import "./html.js";
+import "./style.js";
+import "./adapters/p5-2.js";

package/src/index.legacy.js

@@ -0,0 +1,3 @@
+import "./html.js";
+import "./style.js";
+import "./adapters/p5-1.js";

package/src/index.modern.js

@@ -0,0 +1,3 @@
+import "./html.js";
+import "./style.js";
+import "./adapters/p5-2.js";

package/src/page-size.js

@@ -0,0 +1,143 @@
+const UNIT_TO_INCH = {
+  in: 1,
+  inch: 1,
+  inches: 1,
+  cm: 1 / 2.54,
+  mm: 1 / 25.4,
+  pt: 1 / 72,
+  px: null,
+};
+
+function parseWithUnit(value) {
+  const trimmed = String(value).trim().toLowerCase();
+  const match = trimmed.match(/^([0-9]*\.?[0-9]+)\s*([a-z%]*)$/);
+  if (!match) {
+    return null;
+  }
+  return {
+    number: Number(match[1]),
+    unit: match[2] || null,
+  };
+}
+
+export function parseDimension(value, options = {}) {
+  if (value === null || typeof value === "undefined") {
+    return null;
+  }
+
+  const dpi = typeof options.dpi === "number" ? options.dpi : 96;
+  const defaultUnit = options.defaultUnit || null;
+
+  if (typeof value === "number") {
+    if (defaultUnit && UNIT_TO_INCH[defaultUnit]) {
+      return value * UNIT_TO_INCH[defaultUnit] * dpi;
+    }
+    return value;
+  }
+
+  const parsed = parseWithUnit(value);
+  if (!parsed) {
+    return null;
+  }
+
+  const unit = parsed.unit || defaultUnit || "px";
+  if (unit === "px") {
+    return parsed.number;
+  }
+
+  const inchFactor = UNIT_TO_INCH[unit];
+  if (!inchFactor) {
+    return null;
+  }
+
+  return parsed.number * inchFactor * dpi;
+}
+
+export function resolvePageDimensions(config = {}, defaults = {}) {
+  const dpi =
+    typeof config.pageDPI === "number"
+      ? config.pageDPI
+      : typeof config.paperDPI === "number"
+        ? config.paperDPI
+        : typeof config.dpi === "number"
+          ? config.dpi
+          : 96;
+  const defaultUnit =
+    typeof config.pageUnit === "string"
+      ? config.pageUnit
+      : typeof config.paperUnit === "string"
+        ? config.paperUnit
+        : typeof config.unit === "string"
+          ? config.unit
+          : null;
+
+  let width = null;
+  let height = null;
+
+  if (config.pageSize) {
+    if (Array.isArray(config.pageSize)) {
+      width = config.pageSize[0];
+      height = config.pageSize[1];
+    } else if (typeof config.pageSize === "object") {
+      width = config.pageSize.width;
+      height = config.pageSize.height;
+    }
+  }
+
+  if (typeof config.pageWidth !== "undefined") {
+    width = config.pageWidth;
+  }
+  if (typeof config.pageHeight !== "undefined") {
+    height = config.pageHeight;
+  }
+
+  if (typeof width === "undefined" || width === null || typeof height === "undefined" || height === null) {
+    let paperWidth = null;
+    let paperHeight = null;
+
+    if (config.paperSize) {
+      if (Array.isArray(config.paperSize)) {
+        paperWidth = config.paperSize[0];
+        paperHeight = config.paperSize[1];
+      } else if (typeof config.paperSize === "object") {
+        paperWidth = config.paperSize.width;
+        paperHeight = config.paperSize.height;
+      }
+    }
+
+    if (typeof config.paperWidth !== "undefined") {
+      paperWidth = config.paperWidth;
+    }
+    if (typeof config.paperHeight !== "undefined") {
+      paperHeight = config.paperHeight;
+    }
+
+    const parsedPaperWidth = parseDimension(paperWidth, { dpi, defaultUnit });
+    const parsedPaperHeight = parseDimension(paperHeight, { dpi, defaultUnit });
+
+    if (typeof parsedPaperWidth === "number" && typeof parsedPaperHeight === "number") {
+      width = parsedPaperHeight / 4;
+      height = parsedPaperWidth / 2;
+    }
+  }
+
+  const parsedWidth = parseDimension(width, { dpi, defaultUnit });
+  const parsedHeight = parseDimension(height, { dpi, defaultUnit });
+
+  let finalWidth = typeof parsedWidth === "number" ? parsedWidth : defaults.width;
+  let finalHeight = typeof parsedHeight === "number" ? parsedHeight : defaults.height;
+
+  if (typeof parsedWidth === "number" && typeof parsedHeight !== "number" && defaults.ratio) {
+    finalHeight = parsedWidth / defaults.ratio;
+  }
+
+  if (typeof parsedHeight === "number" && typeof parsedWidth !== "number" && defaults.ratio) {
+    finalWidth = parsedHeight * defaults.ratio;
+  }
+
+  return {
+    width: finalWidth,
+    height: finalHeight,
+    dpi,
+  };
+}

package/src/style.js

@@ -0,0 +1,28 @@
+import styles from "./ui.css";
+
+// css------------------------------------------
+const styleSheet = document.createElement("style");
+styleSheet.innerText = styles;
+document.head.appendChild(styleSheet);
+
+// dark mode
+if (
+  window.matchMedia &&
+  window.matchMedia("(prefers-color-scheme: dark)").matches
+) {
+  document.documentElement.setAttribute("data-theme", "dark");
+} else {
+  document.documentElement.setAttribute("data-theme", "light");
+}
+
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", (event) => {
+    const colorScheme = event.matches ? "dark" : "light";
+
+    if (colorScheme === "dark") {
+      document.documentElement.setAttribute("data-theme", "dark");
+    } else {
+      document.documentElement.setAttribute("data-theme", "light");
+    }
+  });