Skip to content

I Must Find A Place For Their Souls To Rest

I'm done with the feelings I've learned to know in paradox

Bram Adams
Bram Adams
3 min read
I Must Find A Place For Their Souls To Rest

Table of Contents

Results

https://bram-adams.ghost.io/content/images/2023/08/2023.08.10-21.20.38.png
2023.08.10-21.20.38.png
https://bram-adams.ghost.io/content/images/2023/08/2023.08.10-21.20.16.png
2023.08.10-21.20.16.png
https://bram-adams.ghost.io/content/images/2023/08/2023.08.10-21.15.51.png
2023.08.10-21.15.51.png
https://bram-adams.ghost.io/content/images/2023/08/2023.08.10-21.14.38.png
2023.08.10-21.14.38.png
https://bram-adams.ghost.io/content/images/2023/08/2023.08.10-21.11.18.png
2023.08.10-21.11.18.png

Process

Inspiration (Spoiler Alert for Vinland Saga!)

https://bram-adams.ghost.io/content/images/2023/08/i-must-carry-them-to-a-place-they-can-rest.png
i must carry them to a place they can rest.png

  1. Generate background image with DALL-E
  2. Run the following code

Code

const canvasSketch = require("canvas-sketch");
const p5 = require("p5");

let img;

const preload = (p5) => {
  img = p5.loadImage(
    "assets/DALL·E 2023-08-10 20.56.53 - i must find a place for them to rest.png"
  );
};

const settings = {
  // Pass the p5 instance, and preload function if necessary
  p5: { p5, preload },
  // Turn on a render loop
  animate: false,
};

canvasSketch(({ p5 }) => {
  function rectanglePortion(img, x, y, width, height) {
    let numRows = 15;
    let totalWidth = width - 40; // Subtracting 40 to add some padding
    let rowHeight = height / numRows;

    // Loop through each row
    for (let i = 0; i < numRows; i++) {
      let x = 20; // Starting x position for rectangles
      let y = i * rowHeight; // y position based on current row
      let remainingWidth = totalWidth;
      p5.noStroke()

      // Randomly create rectangles until the row is filled
      while (remainingWidth > 0) {
        let rectWidth = p5.random(20, remainingWidth); // Random width, but not more than the remaining space
        let rectHeight = p5.random(rowHeight * 0.5, rowHeight); // Random height within the row

        // choose random opacity from 0.6 to 1.0
        let opacity = p5.random(0.4, 0.8);

        // Set the fill color
        p5.fill(255, opacity * 255);

        // Draw the rectangle
        p5.rect(x, y + (rowHeight - rectHeight) * 0.5, rectWidth, rectHeight);

        // draw a series of small rectangles up to height of the row
        for (let j = 0; j < 10; j++) {
            p5.noStroke()
            let rectWidth = 1;
            let rectHeight = p5.random(rowHeight * 0.5, rowHeight); // Random height within the row

            // choose random opacity from 0.6 to 1.0
            let opacity = p5.random(0.4, 0.8);

            // Set the fill color

            p5.fill(p5.color("rgb(220,20,60)"), opacity * 255);

            // Draw the rectangle
            p5.rect(x + p5.random(1, 15), y + (rowHeight - rectHeight) * 0.5, rectWidth, rectHeight);
            x += rectWidth;
            remainingWidth -= rectWidth;
        }


        if (p5.random() > 0.5) {
            // draw parallel lines through the rectangle
            p5.stroke(0, opacity * 255);
            p5.strokeWeight(1);
            p5.line(x, y + (rowHeight - rectHeight) * 0.5, x + rectWidth, y + (rowHeight - rectHeight) * 0.5 + rectHeight);
        }

        // Update x position for next rectangle, and the remaining width
        x += rectWidth;
        remainingWidth -= rectWidth;
      }
    }
  }
  return ({ p5 }) => {
    p5.createCanvas(1000, 1000);
    p5.background(255);
    p5.image(img, 0, 0);
    rectanglePortion(img, 0, 0, 1000, 1000);
  };
}, settings);

bramadams.dev is a reader-supported published Zettelkasten. Both free and paid subscriptions are available. If you want to support my work, the best way is by taking out a paid subscription.

creative-coding

Bram Adams

writer, programmer

Comments


Related Posts

Members Public

Kingdom Hearts Menu Style Portfolio

~~ dearly beloved ~~

Kingdom Hearts Menu Style Portfolio
Members Public

AI Standup Comedy Club

Should I stay poker-faced, the machine knows and tosses out a different breed of gag. But crack a laugh, the model serves up more of the same brand of humor.

AI Standup Comedy Club
Members Public

Bleeding Edge Technology is Made for Silly Art

The only defensible use for bleeding edge tech is play!

Bleeding Edge Technology is Made for Silly Art