Monet Art loop issue

[druchtie]

Hi, I have been watching some tutorials this weekend and came across a tutorial that I started to tweak to create some Monet-like artworks from my pictures. The only problem is that it has some strange behavior on the right side of the image (long lines), and I’m not sure what is causing it. I guess they are the last pixels of every column.

Does anyone have an idea how I could change my code not to get this effect?

I created a Sandbox for the project:

Monet - CodeSandbox

Code:

let img;
let cnv;

function preload() {
  img = [
    "/assets/temp-1.jpeg",
    "/assets/temp-2.jpeg",
    "/assets/temp-3.jpeg",
    "/assets/temp-4.jpeg",
    "/assets/temp-5.jpeg",
    "/assets/temp-6.jpeg",
    "/assets/temp-7.jpeg",
    "/assets/temp-8.jpeg",
    "/assets/temp-9.jpeg",
    "/assets/temp-11.jpeg",
    "/assets/temp-13.jpeg"
  ];

  var pos = floor(random(img.length));
  img = loadImage(img[pos]);
}

function setup() {
  // img.resize(img.width, img.height);

  cnv = createCanvas(img.width, img.height);

  let newCanvasX = (windowWidth - img.width) / 2;
  let newCanvasy = (windowHeight - img.height) / 2;

  cnv.position(newCanvasX, newCanvasy);

  for (let col = 0; col < img.width; col += 1) {
    for (let row = 0; row < img.height; row += 1) {
      let xPos = col;
      let yPos = row;

      let c = img.get(xPos, yPos);

      push();
      translate(xPos, yPos);
      rotate(radians(random(90, 360)));
      noFill();
      stroke(color(c));
      strokeWeight(random(1, 3));

      curve(
        xPos,
        yPos,
        sin(xPos) * random(4, 10),
        cos(xPos) * sin(xPos) * random(2, 10),
        random(10),
        random(2, 10),
        cos(yPos) * sin(yPos) * random(2, 3),
        cos(xPos) * sin(xPos) * 2
      );
      pop();
    }
  }
}

[druchtie]

I added an additional test image to verify that it’s only happening on the last row of pixels but not sure why.

[javagar]

Hello, @druchtie, and welcome to the Processing Foundation Forum!

What is the purpose of this line in the setup() function?

  img.resize(img.width, img.height);

By the way, Monet is one of my favorite artists!

[druchtie]

Hi @javagar good questions.
I was playing around with reducing the image size for performance but I forgot to delete it.

[mnse]

Hi @druchtie,

slow but nice.

Guess you want this …

Cheers
— mnse

      curve(
        0, // already on xPos by translate above
        0, // already on yPos by translate above
        sin(xPos) * random(4, 10),
        cos(xPos) * sin(xPos) * random(2, 10),
        random(1, 10),
        random(2, 10),
        cos(yPos) * sin(yPos) * random(2, 3),
        cos(xPos) * sin(xPos) * 2
      );

[druchtie]

That was it! Thank you so much @mnse.
Unfortunately it’s a bit slow, but it does the trick!

I guess there is no other way to speed things up in JS?

[mnse]

Hi @druchtie,

maybe you can try out this in your setup. Should be speed up things, at least a bit …

Cheers
— mnse

function setup() {
  cnv = createCanvas(img.width, img.height);
  let newCanvasX = (windowWidth - img.width) / 2;
  let newCanvasy = (windowHeight - img.height) / 2;
  cnv.position(newCanvasX, newCanvasy);
  
  img.loadPixels();
  for (let idx = 0,pidx = 0; idx < img.width * img.height; idx++,pidx+=4) {
    let xPos = floor(idx % img.width);
    let yPos = floor(idx / img.width);
    push();
    translate(xPos, yPos);
    rotate(radians(random(90, 360)));
    noFill();
    stroke(color(img.pixels[pidx],img.pixels[pidx + 1], img.pixels[pidx + 2], img.pixels[pidx + 3]));
    strokeWeight(random(1, 3));

    curve(
      0,
      0,
      sin(xPos) * random(4, 10),
      cos(xPos) * sin(xPos) * random(2, 10),
      random(10),
      random(2, 10),
      cos(yPos) * sin(yPos) * random(2, 3),
      cos(xPos) * sin(xPos) * 2
    );
    pop();
  } 
}

EDIT: just added alpha channel for the sake of completeness.

[javagar]

Nice work, @druchtie and @mnse!

@druchtie

… came across a tutorial that I started to tweak to create some Monet-like artworks …

Could we have a link to that tutorial?

Thanks!

[druchtie]

@javagar this is the tutorial I followed: https://youtu.be/me04ZrTJqWA

[javagar]

Thanks for the link!