xxxxxxxxxx340
let tiles = [];let colors = [];let angles = [];let tilesMaxX = 0;let tilesMaxY = 0;let strokeSlider;let s;let sepSlider;let sep = 45;let tileno = 1;let d;function setup() { createCanvas(windowWidth, windowHeight); strokeSlider = createSlider(2, 10, 5, 1); strokeSlider.position(20, 55); sepSlider = createSlider(75, 135, 95, 10); sepSlider.position(200, 55); colors.push(color(255, 36, 0)); // 0 red colors.push(color(9, 136, 255)); // 1 blue colors.push(color(239, 200, 96)); angles = [0, HALF_PI, PI, PI + HALF_PI]; //angles=[0]; tilesMaxX = int(windowWidth / sep) * 2; tilesMaxY = tilesMaxX; //int(windowHeight / sep) * 2; for (let i = 0; i < tilesMaxX; i++) { for (let j = 0; j < tilesMaxY; j++) { tiles.push(new Tile(i, j)); } } }function draw() { background(255); push(); //translate(-width/2, -height/2); tiles.forEach((el, i) => { el.draw(); }); noStroke(); push(); translate(0,0,1) fill(255); rect(0,0,width,100); pop(); noStroke(); textSize(12); rect(0, 0, width, 100); textFont('Helvetica'); text("Stroke Weight", 20, 50); text("Tile Size", 200, 50); textSize(18); text("Press the left or right arrow keys to change patterns.\nUse the mouse to click, drag and right click to download current pattern!", width-600, 50); pop(); s = strokeSlider.value(); sep = sepSlider.value(); }function keyPressed() { if (keyCode == 39) { tileno++; } if (keyCode == 37) { tileno--; } if (tileno > 11) tileno = 1; if (tileno < 1) tileno = 11;}function mousePressed() { if(mouseY>100) { tiles.forEach((el, i) => { el.check(); }); }}function mouseDragged() { if(mouseY>100) { tiles.forEach((el, i) => { el.check(); }); }}class Tile { constructor(theX, theY) { this.x = theX; this.y = theY; this.angleIndex = int(random(angles.length)); this.col = random(colors); this.bg = color(255); } draw() { push(); translate(this.x * sep, this.y * sep); rotate(angles[this.angleIndex]); noFill(); rectMode(CENTER); // noFill(); // fill(this.bg); // rect(0, 0, sep, sep); strokeWeight(s); stroke(this.col); // noFill(); switch (tileno) { case 1: this.trutchet1(); break; case 2: this.trutchet2(); break; case 3: this.trutchet3(); break; case 4: this.trutchet4(); break; case 5: this.trutchet5(); break; case 6: this.trutchet6(); break; case 7: this.trutchet7(); break; case 8: this.trutchet8(); break; case 9: this.trutchet9(); break; case 10: this.trutchet10(); break; case 11: this.trutchet11(); break; } // this.trutchet1(); pop(); } trutchet0() { } trutchet1() { line(-sep / 6, -sep / 2, -sep / 6, sep / 2); push(); translate(-sep / 2, 0); rotate(-HALF_PI); arc(0, 0, sep / 3, sep / 3, 0, PI); pop(); push(); rotate(HALF_PI); translate(sep / 2, -sep / 2); arc(0, 0, 2 * sep / 3, 2 * sep / 3, 0, HALF_PI); pop(); push(); rotate(PI); translate(sep / 2, sep / 2); arc(0, 0, 2 * sep / 3, 2 * sep / 3, 0, HALF_PI); pop(); } trutchet2() { arc(-sep / 4, -sep / 4, sep / 2, sep / 2, PI + HALF_PI, 0); line(0, -sep / 4, sep / 2, -sep / 4); line(-sep / 2, -sep / 4, -sep / 4, -sep / 4); arc(-sep / 4, 0, sep / 2, sep / 2, PI + HALF_PI, 0); arc(sep / 4, 0, sep / 2, sep / 2, HALF_PI, PI); line(sep / 4, sep / 4, sep / 2, sep / 4); arc(sep / 2, sep / 2, sep / 2, sep / 2, PI, PI + HALF_PI); arc(-sep / 2, sep / 2, sep / 2, sep / 2, PI + HALF_PI, 0); arc(sep / 2, -sep / 2, sep / 2, sep / 2, HALF_PI, PI); } trutchet3() { push(); translate(-sep / 2, 0); rotate(-HALF_PI); arc(0, 0, sep / 3, sep / 3, 0, PI); pop(); arc(sep / 2, -sep / 2, 2 * sep / 3, 2 * sep / 3, HALF_PI, PI); arc(sep / 2, sep / 2, 2 * sep / 3, 2 * sep / 3, PI, PI + HALF_PI); line(-sep / 6, -sep / 2, -sep / 6, sep / 2); strokeWeight(2); arc(sep / 2, -sep / 2, sep, sep, HALF_PI, PI); arc(-sep / 2, sep / 2, sep, sep, PI + HALF_PI, 0); line(0, -sep / 2, 0, -sep / 6); line(-sep / 2, 0, -sep / 6, 0); arc(-sep / 6, -sep / 6, sep / 3, sep / 3, 0, HALF_PI); } trutchet4() { line(-sep / 6, -sep / 2, -sep / 6, sep / 2); push(); translate(-sep / 2, 0); rotate(-HALF_PI); arc(0, 0, sep / 3, sep / 3, 0, PI); pop(); arc(sep / 2, -sep / 2, 2 * sep / 3, 2 * sep / 3, HALF_PI, PI); arc(sep / 2, sep / 2, 2 * sep / 3, 2 * sep / 3, PI, PI + HALF_PI); } trutchet5() { arc(sep / 2, sep / 2, 6 * sep / 4, 6 * sep / 4, PI, HALF_PI + PI); arc(sep / 2, sep / 2, 4 * sep / 4, 4 * sep / 4, PI, HALF_PI + PI); arc(sep / 2, sep / 2, 2 * sep / 4, 2 * sep / 4, PI, HALF_PI + PI); arc(-sep / 2, sep / 2, sep / 2, sep / 2, HALF_PI + PI, 0); arc(-sep / 2, -sep / 2, sep / 2, sep / 2, 0, HALF_PI); arc(-sep / 2, -sep / 2, sep / 2, sep / 2, 0, HALF_PI); arc(sep / 2, -sep / 2, sep / 2, sep / 2, HALF_PI, PI + HALF_PI); arc(-sep / 8, -sep / 2, sep / 4, sep / 4, 0, PI); //stroke(0); arc(-sep / 2, -sep / 8, sep / 4, sep / 4, HALF_PI + PI, HALF_PI); } trutchet6() { arc(0, -sep / 2, sep / 3, sep / 3, 0, PI); push(); rotate(PI); arc(0, -sep / 2, sep / 3, sep / 3, 0, PI); pop(); line(-sep / 2, -sep / 6, sep / 2, -sep / 6); line(-sep / 2, sep / 6, sep / 2, sep / 6); } trutchet7() { line(-sep / 2, -sep / 2, sep / 2, sep / 2); } trutchet8() { arc(-sep / 2, -sep / 2, sep, sep, 0, HALF_PI) arc(sep / 2, sep / 2, sep, sep, PI, PI + HALF_PI); } trutchet9() { arc(sep / 2, -sep / 2, sep / 2, sep / 2, 0, PI); noStroke(); fill(this.col); arc(-sep / 2, -sep / 2, sep, sep, 0, PI); } trutchet10() { arc(-sep / 2, -sep / 2, sep, sep, 0, HALF_PI, CHORD) arc(-sep / 2, -sep / 2, sep, sep, 0, PI, CHORD) } trutchet11() { arc(-sep / 2, -sep / 2, sep, sep, 0, HALF_PI) arc(-sep / 2, -sep / 2, sep + 20, sep + 20, 0, HALF_PI) arc(-sep / 2, -sep / 2, sep + 40, sep + 40, 0, HALF_PI) //arc(-sep / 2, -sep / 2, sep+60, sep+60, 0, HALF_PI) // arc(-sep / 2, -sep / 2, sep+80, sep+80, 0, HALF_PI) } check() { let x0 = this.x * sep - sep / 2; let y0 = this.y * sep - sep / 2; let x1 = (this.x + 1) * sep - sep / 2; let y1 = (this.y + 1) * sep - sep / 2; if (mouseX > x0 && mouseX < x1 && mouseY > y0 && mouseY < y1) { this.bg = color(0); // push(); this.neighbors(); // pop(); } } changeAngle() { this.angleIndex++; this.angleIndex %= angles.length; this.bg = color(0); } neighbors() { let x0 = max(0, this.x - 1); let y0 = max(0, this.y - 1); let x1 = min(tilesMaxX, this.x + 1); let y1 = min(tilesMaxY, this.y + 1); // x0 = 1;// x1 = 3;// y0 = 1;// y1 = 3; for (let i = x0; i <= x1; i++) { for (let j = y0; j <= y1; j++) { tiles[i * tilesMaxX + j ].changeAngle(); } } }}