/* Inspired by Vera Molnár's Un, deux, trois Based on a translation from Generative Artistry: https://generativeartistry.com/tutorials/un-deux-trois/ */ //stroke cap! never changed it before >< function setup() { createCanvas(windowWidth, windowHeight); strokeCap(ROUND); strokeWeight(4); } function draw() { background(255); //chose a smaller one from height or width let step = min(width / 15, height / 15); // like grid, add one step for one times, //in the for loop it will add until it reach to the height or width for (let y = step; y < height - step; y += step) { for (let x = step; x < width - step; x += step) { // seperate it into three levels // and draw different lines //DrawLine function with 4 parameters if (y < height / 3) { drawLine(x, y, step, [0.5]); } else if (y < (height / 3) * 2) { drawLine(x, y, step, [0.2, 0.8]); } else { drawLine(x, y, step, [0.1, 0.5, 0.9]); } } } noLoop(); } function drawLine(_x, _y, _step, positions) { push(); //interesting! translate + half of step ,rotate, then translate back! translate( _x + _step / 2, _y + _step / 2 ); rotate(random(5)); translate(-_step / 2, -_step / 2); // loop by it self! for (let i = 0; i <= positions.length; i++) { //x are the same-> horizontal //y 0 to step line( positions[i] * _step, 0, positions[i] * _step, _step); } pop(); } function windowResized() { resizeCanvas(windowWidth, windowHeight); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter