The sketch generates a new pattern each time it runs. Hover the mouse to see colors change
xxxxxxxxxx
let a;
let b;
let c;
let rSeed1;
function setup() {
colorMode(HSB, 360, 100, 100, 100);
createCanvas(windowWidth, windowHeight);
background(0);
rSeed1 = int(random(100));
a = width / 40;
b = 3 * a / 2;
c = 5 * a / 2;
}
function draw() {
randomSeed (rSeed1);
fill (40, 45, 70);
rect (0, 0, windowWidth, windowHeight);
//Background
for ( let i = 0; i < width; i+=a){
for ( let j = 0; j < height; j+=a){
push();
translate(i , j);
bgtile();
pop();
}
}
for ( let i = 0; i < width; i+=a/2){
push();
translate(i , 0);
HorizRow();
pop();
}
//Triangles
for (let i=0; i<=width; i+=c) {
for (let j=0; j<=height; j+=c) {
push();
translate(i, j);
trianglesPattern();
pop();
}
}
//Rectangles
for (let i=0; i<=width; i+=c) {
for (let j=0; j<=height; j+=c) {
push();
translate(i, j);
let n= random(1);
if (n<.7) {
rectsPattern();
}
else {
rectsPattern1();
}
pop();
}
}
//Square dots
for (let i=0; i<=width; i+=c) {
for (let j=0; j<=height; j+=c) {
push();
translate(i, j);
let n= random(1);
if (n<0.3) {
rectsPattern1();
}
pop();
}
}
//Interactive triangle
for (let i=0; i<=width; i+=2*a) {
for (let j=0; j<=height; j+=2*a) {
let c= int((mouseX/2)+(mouseY/2));
let n= random(0.6);
if (c>10){
if (n<0.1) {
push();
translate(i, j);
trianglesPattern2();
pop();
}
}
}
}
/*if (mouseIsPressed) {
saveCanvas('EllieNikoo_Pattern');
}*/
//////Tiles
//Background Patterns
function bgtile() {
let i=0;
let j=0;
smooth();
noFill();
strokeWeight(0.25);
stroke(10, 20, 50, 70);
line(i, j, i+a, j+a);
line(i+a, j, i, j+a);
}
function HorizRow () {
let i=0;
let j=0;
smooth();
strokeWeight(0.25);
stroke(10, 20, 50, 70);
line(i, j, i, height);
}
//Triangles Pattern
function trianglesPattern() {
let i=0;
let j=0;
smooth();
noStroke();
let n= random(0.6);
if (n<0.4) {
fill(random(30), random(30, 70), 50, random (150));
}
else {
fill(random(30), random(30, 70), 50, random (50));
}
//1
triangle(i+a, j, i+a, j+a, i+3*a/2, j+a/2 );
//2
triangle(i+a/2, j+a/2, i+a, j+a, i+a/2, j+3*a/2);
//3
triangle(i, j+a, i+a/2, j+3*a/2, i, j+2*a);
//4
triangle(i+a/2, j+3*a/2, i+a, j+2*a, i+a/2, j+5*a/2);
//5
triangle(i+a, j+2*a, i+3*a/2, j+5*a/2, i+a, j+3*a);
//6
triangle(i+3*a/2, j+5*a/2, i+2*a, j+2*a, i+2*a, j+3*a);
//7
triangle(i+2*a, j+2*a, i+5*a/2, j+3*a/2, i+5*a/2, j+5*a/2);
//8
triangle(i+5*a/2, j+3*a/2, i+3*a, j+a, i+3*a, j+2*a);
//9
triangle(i+2*a, j+a, i+5*a/2, j+a/2, i+5*a/2, j+3*a/2);
//10
triangle(i+3*a/2, j+a/2, i+2*a, j, i+2*a, j+a);
}
//Interactive Triangle Patterns
function trianglesPattern2() {
let i=0;
let j=0;
smooth();
noStroke();
let c= int((mouseX/2)+(mouseY/2));
if (c<200) {
fill(c, random(70, 90), random(40, 60), random (40));
}
else {
fill((c-190), random(70, 90), random(40, 60), random (60));
}
//1
triangle(i+b, j, i+b, j+b, i+3*b/2, j+b/2 );
//2
triangle(i+b/2, j+b/2, i+b, j+b, i+b/2, j+3*b/2);
//3
triangle(i, j+b, i+b/2, j+3*b/2, i, j+2*b);
//6
triangle(i+3*b/2, j+5*b/2, i+2*b, j+2*b, i+2*b, j+3*b);
//8
triangle(i+5*b/2, j+3*b/2, i+3*b, j+b, i+3*b, j+2*b);
//9
triangle(i+2*b, j+b, i+5*b/2, j+b/2, i+5*b/2, j+3*b/2);
fill(random(c), random(70, 90), random(40, 60), random (70));
//10
triangle(i+3*b/2, j+b/2, i+2*b, j, i+2*b, j+b);
//4
triangle(i+b/2, j+3*b/2, i+b, j+2*b, i+b/2, j+5*b/2);
//5
triangle(i+b, j+2*b, i+3*b/2, j+5*b/2, i+b, j+3*b);
//7
triangle(i+2*b, j+2*b, i+5*b/2, j+3*b/2, i+5*b/2, j+5*b/2);
}
//Cross Pattern
function rectsPattern() {
let i=0;
let j=0;
smooth();
noStroke();
fill(random(60, 250), random(40, 55), random(30, 50), random (100));
rectMode(CENTER);
rect(i+3*a/2, j+3*a/2, a/3, a);
rect(i+3*a/2, j+3*a/2, a, a/3);
rectMode(CORNER);
}
//Square dots pattern
function rectsPattern1() {
let i=0;
let j=0;
smooth();
noStroke();
fill(random(60), random(40, 55), random(30, 50), random(100));
rectMode(CENTER);
//1
rect(i+3*a/2, j+a, a/6, a/6);
//2
rect(5*a/4, 5*a/4, a/6, a/6);
//3
rect(a, 3*a/2, a/6, a/6);
//4
rect(7*a/4, 5*a/4, a/6, a/6);
//5
rect(3*a/2, 3*a/2, a/6, a/6);
//6
rect(5*a/4, 7*a/4, a/6, a/6);
//7
rect(2*a, 3*a/2, a/6, a/6);
//8
rect(7*a/4, 7*a/4, a/6, a/6);
//9
rect(3*a/2, 2*a, a/6, a/6);
rectMode(CORNER);
}
}