p5.zine 0.0.1 → 0.0.2

package/src/custom.js

@@ -1,430 +0,0 @@
-// 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

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

package/src/index.js

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

package/src/index.legacy.js

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

package/src/index.modern.js

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

package/src/page-size.js

@@ -1,143 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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");
-    }
-  });