Merging 2 sketches into 1

p5.js Coding Questions
1

please format code with </> button * homework policy * asking questions

hi, i have two sketches

let scale = 0.004;

function setup() {
  createCanvas(1200, 1200);
  smooth()
}

function draw() {
	
  for(let x = 100; x < width; x++) {
    for(let y = 100; y < height; y++) {
			set(x, y, color(noise(scale*x,scale*y, frameCount*0.01)>0.4?255:0));
    }
  }
  updatePixels();
	
}

that one should be at the bottom (cow pattern), and this one should go above (stripes):

// https://twitter.com/usefulslug/status/1265604318016811011

const palette = [];
const palette2 = [];
function setup() {
	createCanvas(600, 600);
	background(100);
	colorMode(HSB, 255, 255, 255, 100);
	const seed = random(255);
	const variation = random(100);
	const N = Math.floor(random(4, 8));
	for(let i = -N; i <= N; i++) {
		palette.push(color((seed + variation * i + 2550) % 255, random(255), random(255)));
		palette2.push(color((seed + variation * i + 2550) % 255, 255, 255));
	}
}

function draw() {
	noStroke();
	const w = width / palette.length;
	for(let i = 0; i < palette.length; i++) {
		for(let j = 0; j < 5; j++) {
			fill(lerpColor(palette[i], palette2[i], j / 4));
			rect(i * w, height / 5 * j, w, height/5);
		}
	}
	noLoop();
}

i combined them this way:

[```] (cow2 - OpenProcessing)

this is example with the least errors i get.
i read errors, and correcting each one just gets me few more.
thank you so much if anyone can find what i am writting wrong!
mg

2

The problem with the code that you linked to is that you have a bunch of code that should be inside your setup() and draw() functions that is just floating off at the top level. Here’s your code, just with the formatting cleaned up and the issues highlighted in comments:

// https://twitter.com/usefulslug/status/1265604318016811011

var canvas;
var myGraphics;
let scale = 0.004;

const palette = [];
const palette2 = [];

function setup() {
	canvas = createCanvas(1400, 1000);
	canvas.position(0, 0);
	canvas.style('z-index', '-3');

	myGraphics = createGraphics(600, 600);
	myGraphics.show();
	colorMode(HSB, 255, 255, 255, 100);
	const seed = random(255);
	const variation = random(100);
	const N = Math.floor(random(4, 8));
	// ^--- Doesn't really make a lot of sense to define a bunch of const variables
	// and never use them 🤔
	
} // <---------- END OF setup()

// what's this for loop that references the undefined variable N doing down here?
for (let i = -N; i <= N; i++) {
	palette.push(color((seed + variation * i + 2550) % 255, random(255), random(255)));
	palette2.push(color((seed + variation * i + 2550) % 255, 255, 255));
}

function draw() {
	//cow
	background('#F4EDED');

	for (let x = 100; x < width; x++) {
		for (let y = 100; y < height; y++) {
			set(x, y, color(noise(scale * x, scale * y, frameCount * 0.01) > 0.4 ? 255 : 0));
		}
	}
	
	updatePixels();
} // <----------- END OF draw();

// Here's a bunch of drawing code off by itself, not part of any function????

// stripes
// myGraphics will be undefined because it setup() hasn't run yet.
myGraphics.push();
myGraphics.noStroke();

const w = width / palette.length;

for (let i = 0; i < palette.length; i++) {
	for (let j = 0; j < 5; j++) {
		fill(lerpColor(palette[i], palette2[i], j / 4));
		rect(i * w, height / 5 * j, w, height / 5);
	}
}

noLoop();

imageMode(CENTER)
image(myGraphics, width / 2, height / 2);

myGraphics.pop();

// ============== Below here is fine =================

function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
}

You should try and keep your indent and spacing consistent. It will make it a lot easier to spot issues with where scopes start and end. When it comes to code, cleanliness is next to not having a bunch of bugs. On OpenProcessing.org pressing either Command+B on Mac or Ctrl+B on Windows will auto-format your code (I’ve complained about this not being more discoverable, but so far they haven’t fixed it).

Regardless though, once you fix the obvious bugs you’re going to have to deal with how you’re going to lay out these to patterns, because right now it’s just going to draw the second over top of the first.

1 Like
3

thank you, will keep trying! i was looking at the source which uses one drawing on canvas and extra drawing on extra canvas. each of these sketches works perfectly on its own. when combining them i am unsure what should i omit. merci, grazie!