Drawing a simple pattern with p5js

I have recently started to pick up on my coding skills. I’ve discovered Processing a few years back while in a digital fabrication class in architecture school. I was very exited by the clarity and awesomeness of the code. I’ve done a lot of work in the past with ActionScript 2.0 and 3.0. But, in recent years my interest diverted a bit. This is an attempt to revive this skill. P5js is a JavaScript framework written with the same goals as Processing, to make coding accessible for artists, designers, educators, and beginners.

My first attempt was to replicate a pattern with code. Can I create a program that would allow me to see different color variations?

First, I started looking at how this might translate into code with a sketch.


//create a variable to decide which vertex to fill
var fillIt = true;
var dontfillIt = false;

function setup() {
createCanvas(920, 700);
}

function draw() {
background(255);
var dimension = 100; //size of the motiff unit
//loop thorugh every row and column and place the pattern
for (var i = 0; i < 800; i = i + 200) {
for (var j = 0; j < 800; j = j + 200) {
pattern(0, i, dimension);
pattern(200, i, dimension);
pattern(400, i, dimension);
pattern(600, i, dimension);
pattern(0 + 100, j + 100, dimension);
pattern(0 + 300, j + 100, dimension);
pattern(0 + 500, j + 100, dimension);
}
}
}

//draw the motiff unit
function draw_vertex(dimension, x1_coord, y1_coord, x2_coord, y2_coord, x3_coord, y3_coord, fillIt) {
// Set the points of the triangle
var x1 = dimension * x1_coord;
var y1 = dimension * y1_coord;
var x2 = dimension * x2_coord;
var y2 = dimension * y2_coord;
var x3 = dimension * x3_coord;
var y3 = dimension * y3_coord;
//check if the polyline needs filling
if (fillIt === true) {
fill(1, 148, 68);
} else {
noFill();
}
beginShape();
vertex(x1, y1);
vertex(x2, y2);
vertex(x3, y3);
endShape();
}

//Draw the pattern
function pattern(x, y, dimension) {
push();
translate(x, y);
// Look familiar? this is from the sketch vertex abstraction
draw_vertex(dimension, 0, 1, 0, 0, 1, 0, fillIt);
draw_vertex(dimension, 0.5, 1, 1, 1, 1, 0.5, fillIt);
draw_vertex(dimension, 0, 0.5, 0.5, 0.5, 1, 1, dontfillIt);
pop();
}

I struggle for a while with the logic. But finally I was able to draw some results

So, let’s make this a bit more fun. Why no change¬†the color on every other row in relationship to the row above, and add some sliders to let the user have control over the colors. See final code below
//create some variables to store the sliders
var rSlider, gSlider, bSlider, aSlider;
var fillIt = true;
var dontfillIt = false;

function setup() {
createCanvas(800, 700);
// initialize sliders
rSlider = createSlider(0, 255, 200);//range and starting value of slider
rSlider.position(20, height - rSlider.height + 20);//position sliders

gSlider = createSlider(0, 255, 200);
gSlider.position(gSlider.width + 30, height - gSlider.height + 20);

bSlider = createSlider(0, 255, 180);
bSlider.position(bSlider.width + 180, height - bSlider.height + 20);
}

function draw() {
var dimension = 100;
for (var i = 0; i < 800; i = i + 200) {
for (var j = 0; j < 800; j = j + 200) {
pattern(0, i, dimension);
pattern(200, i, dimension);
pattern(400, i, dimension);
pattern(600, i, dimension);

pattern2(0 + 100, j + 100, dimension);
pattern2(0 + 300, j + 100, dimension);
pattern2(0 + 500, j + 100, dimension);

}
}
}
function draw_vertex(dimension, x1_coord, y1_coord, x2_coord, y2_coord, x3_coord, y3_coord, fillIt, clr) {
// Set the points of the triangle
var x1 = dimension * x1_coord;
var y1 = dimension * y1_coord;
var x2 = dimension * x2_coord;
var y2 = dimension * y2_coord;
var x3 = dimension * x3_coord;
var y3 = dimension * y3_coord;
// //color variations
if (fillIt === true) {
fill(clr);
} else {
noFill();
}
beginShape();
vertex(x1, y1);
vertex(x2, y2);
vertex(x3, y3);
endShape();
}

//Draw the pattern
function pattern(x, y, dimension) {
//store the value of the sliders into a variable
var r = rSlider.value();
var g = gSlider.value();
var b = bSlider.value();
//now you control the color values from the slider component
var clr1 = color(r-50, g-50, b-50);
var clr2 = color(b-100, r-100, g-100);
push();
translate(x, y);
draw_vertex(dimension, 0, 1, 0, 0, 1, 0, fillIt, clr2);
draw_vertex(dimension, 0.5, 1, 1, 1, 1, 0.5, fillIt, clr1);
draw_vertex(dimension, 0, 0.5, 0.5, 0.5, 1, 1, dontfillIt, clr1);
pop();
}

//Draw the pattern with a variation for every other row
function pattern2(x, y, dimension) {
var r = rSlider.value();
var g = gSlider.value();
var b = bSlider.value();
var clr1 = color(r, g, b);
var clr2 = color(b, r, g);
push();
translate(x, y);
draw_vertex(dimension, 0, 1, 0, 0, 1, 0, fillIt, clr2);
draw_vertex(dimension, 0.5, 1, 1, 1, 1, 0.5, fillIt, clr1);
draw_vertex(dimension, 0, 0.5, 0.5, 0.5, 1, 1, dontfillIt, clr1);
pop();
}

The results are seen below: