Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Each resolution output different colors #6496

Closed
2 of 17 tasks
kuncevic opened this issue Oct 26, 2023 · 6 comments
Closed
2 of 17 tasks

Each resolution output different colors #6496

kuncevic opened this issue Oct 26, 2023 · 6 comments

Comments

@kuncevic
Copy link

Most appropriate sub-area of p5.js?

  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • Build Process
  • Unit Testing
  • Internalization
  • Friendly Errors
  • Other (specify if possible)

p5.js version

1.4.0

Web browser and version

Chrome 116.0.5845.187

Operating System

14.0 (Sanoma)

Steps to reproduce this

I have a drawing that always output same result using Random Seed
I want to save drawing in different resolutions, for that I've setup a function

function saveNextResolution() {
    if (savingIndices.length === 0) return; // No more indices left

    let i = savingIndices.shift(); // Get the next index
    let resolutions = [
      { name: '5x5', width: 1500, height: 1500 },
      { name: '8x8', width: 2400, height: 2400 },
      { name: '11x11', width: 3300, height: 3300 },
      { name: '16x16', width: 4800, height: 4800 },
      { name: '10x10', width: 3000, height: 3000 },
    ];
    let selectedResolution = resolutions[i];
    p.createCanvas(selectedResolution.width, selectedResolution.height);
    generatePattern(selectedResolution.width, selectedResolution.height);
    p.draw();
    p.saveCanvas(selectedResolution.name, 'jpg');

    // Wait for a delay, then continue saving the next resolution
    setTimeout(saveNextResolution, 500); // 500ms delay for example
  }

However it seems that everytime function runs it produces different colors.

Here is reproduction stepa

Steps:

  1. Open https://editor.p5js.org/Jamessssss/sketches/B6ahAkrGO
  2. Run the snippet (if rerun always same colors)
  3. Press S to trigger the save function
  4. Each saved file has different colors
@kuncevic kuncevic added the Bug label Oct 26, 2023
@welcome
Copy link

welcome bot commented Oct 26, 2023

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

@kuncevic kuncevic changed the title Each resolution outout different colors Each resolution output different colors Oct 26, 2023
@davepagurek
Copy link
Contributor

Hi! I think the issue is that not all state in your sketch is resetting when you draw each size, which causes the random calls to be a bit different. Currently, you only ever push to stripes, so the array keeps growing, and you draw more and more lines each time. Try adding stripes = [] to the start of generatePattern. I think that should do it!

@godspeed-03
Copy link

Hi @kuncevic. I would like to work on the issue as I have solved it locally. Can you assign it to me?
Thanks!

@davepagurek
Copy link
Contributor

Hi @godspeed-03, can you explain your solution a bit? Currently I'm not sure this is actually an issue in p5.js itself, but rather something that can be solved in the sketch in the issue description.

@godspeed-03
Copy link

godspeed-03 commented Nov 24, 2023

Hii @davepagurek !
The issue seems to be that the random seed is not being applied consistently in the draw function.
To ensure consistent colors across different resolutions, we should use the same set of random values for each run.
In fact stripes array is a global variable that may not be getting reset correctly. So, It should must have same randomseed to acquire same color thorough out the loop.
We need to reset value for each iteration.

@limzykenneth
Copy link
Member

The value is reset for each iteration with the randomSeed() function so that's not quite where the problem is. There are a few things that are a bit unorthodox being used here that in combination creates the problem.

First is that createCanvas() is being called multiple times which in normal circumstances should not be called like this and can cause memory leaks, if you need a separate drawing surface from the main canvas you can use createGraphics() once at the start of the sketch to create a drawing buffer not tied to the animation loop.

Then there is that draw() should not be called manually, from the reference "draw() is called automatically and should never be called explicitly." You should use redraw() instead if you want to manually trigger a draw call.

See modified code below that saves consistent output. I'll close this issue for now as this is not something to fix in p5.js. Thanks.

let sketch = function (p) {
  let rows = 35;
  let radius = 200;
  let minLength = 1;
  let maxLength = 122;
  let space = 'SQUARE';
  let outerStrokeWeight = 14;
  let innerStrokeWeight = 14;
  let randomSeed = 1230;
  let stripes = [];

  p.setup = function () {
    // CHANGE: Only create canvas once, for additional canvases use p5.Graphics
    p.createCanvas(400, 400); // Set canvas size to 400x400 for simplicity
    generatePattern();
  };

  function generatePattern() {
    p.randomSeed(randomSeed);
    p.stroke(0);
    p.strokeWeight(5);
    p.noLoop();

    let enhancedRows = rows + 2;
    for (var i = 0; i < enhancedRows; i++) {
      let yPos = (i / (enhancedRows - 1)) * (radius * 2) - radius;
      let rowLength = 2 * p.sqrt(radius * radius - yPos * yPos);
      drawRow(yPos, rowLength);
    }

    p.randomSeed(randomSeed);
  }

  p.draw = function () {
    p.background('#fff');
    p.translate(p.width / 2, p.height / 2);
    p.scale((1.3 * p.width) / 1500);
    p.strokeCap(p[space]);
    let angleDegrees = 0;
    p.rotate((angleDegrees * p.PI) / 180);

    for (var s in stripes) {
      var stripe = stripes[s];
      let randomColor = p.color(
        p.random(255), // Red channel
        p.random(255), // Green channel
        p.random(255) // Blue channel
      );
      console.log(randomColor.levels); // Log the color values to the console
      p.strokeWeight(outerStrokeWeight);
      p.stroke(randomColor);
      p.line(stripe.start, stripe.y, stripe.end, stripe.y);
      p.strokeWeight(innerStrokeWeight);
      p.stroke(randomColor);
      p.line(stripe.start, stripe.y, stripe.end, stripe.y);
    }
  };

  function drawRow(yPos, rowLength) {
    let length = p.random(minLength, maxLength);
    let start = -0.5 * rowLength;
    let end = start + length;
    while (end < rowLength / 2 - space - minLength) {
      stripes.push({ y: yPos, start: start, end: end });
      length = p.random(minLength, maxLength);
      start = end + space;
      end = start + length;
    }
    stripes.push({ y: yPos, start: start, end: rowLength / 2 });
  }

  p.keyPressed = function () {
    if (p.keyCode === 83) {
      // Initialize the list of indices
      savingIndices = [0, 1, 2, 3, 4]; // For the resolutions
      saveNextResolution();
    }
  };

  function saveNextResolution() {
    if (savingIndices.length === 0) return; // No more indices left

    let i = savingIndices.shift(); // Get the next index
    let resolutions = [
      { name: '5x5', width: 1500, height: 1500 },
      { name: '8x8', width: 2400, height: 2400 },
      { name: '11x11', width: 3300, height: 3300 },
      { name: '16x16', width: 4800, height: 4800 },
      { name: '10x10', width: 3000, height: 3000 },
    ];
    let selectedResolution = resolutions[i];
    // CHANGE: Don't recreate the canvas
    // p.createCanvas(selectedResolution.width, selectedResolution.height);
    generatePattern(selectedResolution.width, selectedResolution.height);
    // CHANGE: Don't call draw() manually
    // p.draw();
    p.saveCanvas(selectedResolution.name, 'jpg');

    // Wait for a delay, then continue saving the next resolution
    setTimeout(saveNextResolution, 500); // 500ms delay for example
  }
};

new p5(sketch);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants