-
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
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
Comments
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! |
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 |
Hi @kuncevic. I would like to work on the issue as I have solved it locally. Can you assign it to me? |
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. |
Hii @davepagurek ! |
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 Then there is that 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); |
Most appropriate sub-area of p5.js?
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
However it seems that everytime function runs it produces different colors.
Here is reproduction stepa
Steps:
The text was updated successfully, but these errors were encountered: