2021-01-22-wrong-lines.md

layout	title	thumbnail	tagline	sort-key	meta-title	meta-description	meta-image	tags	includeP5jsWidget	previousPost	redirect_from	discourseEmbedUrl
tutorial	Wrong Lines	/tutorials/p5js/for-loops/images/wrong-lines-1.png	Draw lines the wrong way.	720	p5.js Example - Wrong Lines	Draw lines the wrong way.	/tutorials/p5js/for-loops/images/wrong-lines-1.png	example p5.js javascript for-loops genuary	true	/tutorials/p5js/for-loops	/examples/p5js/for-loops/wrong-lines	/examples/p5js/for-loops/wrong-lines

{% include youtube-embed.html slug="lNKFhaOQJys" %}

---

{% include p5js-widget.html width=300 height=400 %} const margin = 25;

function setup() { createCanvas(300, 400); noLoop(); strokeWeight(2); }

function draw() { background(32); stroke(255);

noFill(); rect(margin, margin, width - margin * 2, height - margin * 2);

for (let y = margin*2; y < height - margin * 2; y += 25) { drawLine(y); }

}

function drawLine(lineY) { const range = map(lineY, margin * 2, height - margin * 2, 0, 50);

let prevX = margin * 2; let prevY = lineY; const lineSpacing = 10;

for (let x = prevX + lineSpacing; x <= width - margin * 2; x += lineSpacing) {

const y = lineY + random(-range, range);
line(prevX, prevY, x, y);

prevX = x;
prevY = y;

} } </script>

Click here to edit this code in the p5.js editor.

This sketch uses a for loop to draw lines that get progressively messier.

I created this for the 22nd day of Genuary which had a prompt of "Draw a line. Wrong answers only."

Remix Ideas

• Give each line a random color, or make the lines progressively darker.
• Add more lines over time.
• Base the randomness off the x coordinate instead of the y coordinate.