I used the code I wrote for the hexagonal grid as a base for the wallpaper’s tiling pattern. I drew a custom shape in its own function (called ‘flame’) and made it repeat. The triangle/sparks are generated randomly.
/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-05
*/
var magentaColor;
var greenColor;
//var blueColor;
function setup() {
createCanvas(500, 500);
magentaColor = color(238,116,217);
greenColor = color(156, 255, 209);
//blueColor = color(104,142,243);
}
function draw() {
background(9,9,9);
var tw = 100;
var th = 100;
var oy = 0;
var ox = 0;
for (var y = 0; y < 8; y++) {
for (var x = 0; x < 8; x++) {
if (y%2 === 0) {
var px = ox + x * tw;
} else if (y%2 !== 0 & x < 9) {
var px = ox +tw/2 + x * tw;
}
var py = oy + y * th;
fill(greenColor);
flame(px,py,20); //outer flame
fill(magentaColor); //inner flame
flame(px,py+10,10);
sparks(px,py,20);
}
}
noLoop();
}
function flame(x,y,size) {
stroke(magentaColor);
strokeWeight(1.5);
beginShape();
vertex (x,y-4*size/3); //1
vertex (x+size/4,y-size); //2
vertex (x+size/3,y-size/3); //3
vertex (x+2*size/3,y-3*size/4); //4
vertex (x+size,y-size); //5
vertex (x+3*size/4,y+size/3); //6
vertex (x+size/2,y+3*size/4); //7
vertex (x,y+size); //8
vertex (x-size/2,y+3*size/4); //9
vertex (x-3*size/4,y+size/3); //10
vertex (x-size,y-size); //11
vertex (x-2*size/3,y-3*size/4); //12
vertex (x-size/3,y-size/3); //13
vertex (x-size/4,y-size); //14
endShape(CLOSE); //back to 1
}
function sparks(x,y,size) {
a = size*random(-1,1);
b = random(.9,1.1);
triangle((x+a)*b,(y+a),
(x+size/5+a)*b,(y+size/5+a),
(x-size/5+a)*b,(y+size/5+a)*b);
c = size*random(-1,1);
d = random(.9,1.1);
triangle((x+c)*d,(y+c)*d,
(x+size/5+c)*d,(y+size/5+c),
(x-size/5+c)*d,(y+size/5+c)*d);
e = size*random(-1,1);
f = random(.9,1.1);
triangle((x+e)*f,(y+e)*f,
(x+size/5+e)*f,(y+size/5+e)*f,
(x-size/5+e)*f,(y+size/5+e)*f);
}