xxxxxxxxxx928
// p5.Pattern// MIT License// Copyright (c) 2021 Taichi Sayama// A pattern drawing library for p5.js.// ---------------------------------------------------------------------------// PatternControler Calss// ---------------------------------------------------------------------------function PatternControler(){ this.x = 0; this.y = 0; this.w = 0; this.h = 0; this.colors = ['#FFFFFF', '#000000']; this.angle = 0; this.patternFunction = null; this.renderTarget = null;}// ---------------------------------------------------------------------------/*Function to change the amount of pattern rotation.Use patternAngle() to check current angle.*/PatternControler.prototype.patternAngle = function(_angle){ if(typeof(_angle) === 'number') this.angle = _angle; return this.angle;}/*Function to set the drawing function.*/PatternControler.prototype.setPatternFunction = function(_func){ if(typeof(_func) !== 'function')return false; this.patternFunction = _func; return this.patternFunction;}; /** * Function to set parameters and draw pattern. * @param {Number} _x x-coordinate of the corner of pattern * @param {Number} _y y-coordinate of the corner of pattern * @param {Number} _w width of the pattern * @param {Number} _h height of the pattern * @param {} _renderTarget */PatternControler.prototype.applyPattern = function(_x, _y, _w, _h, _renderTarget){ this._setPatternArea(_x, _y, _w, _h); this._setRenderTarget(_renderTarget); this.renderTarget = _renderTarget; this._drawPattern();}/** * Function to set the color palette of the pattern. * Use patternColors() to check current palette. * @param {Array} _colsArr */PatternControler.prototype.patternColors = function(_colsArr){if(Array.isArray(_colsArr))this.colors = _colsArr;//return this.colors;return this.colors.slice(0, this.colors.length);}// ---------------------------------------------------------------------------//Private functions/*Function to change the drawing range of a pattern*/PatternControler.prototype._setPatternArea = function(_x, _y, _w, _h){ this.x = _x; this.y = _y; this.w = _w; this.h = _h;};/*Function to set the pattern target.*/PatternControler.prototype._setRenderTarget = function(_renderTarget){ this.renderTarget = _renderTarget;};/*Function to draw the pattern.*/PatternControler.prototype._drawPattern = function(){ const rt = this.renderTarget; //Generate a drawing function. apply rotation const func = typeof(this.patternFunction) === 'function' ? this.patternFunction : this._flatFill(); const rotatedFunc = this._rotatedFuncGen(func, this.angle); //cache renderMode const pRectMode = rt._renderer._rectMode; const pEllipseMode = rt._renderer._ellipseMode; //draw rt.push(); rt.drawingContext.clip(); rt.translate(this.x, this.y); rotatedFunc(this.w, this.h, rt); rt.pop(); //reset renderMode rt.rectMode(pRectMode); rt.ellipseMode(pEllipseMode);};/*Generate a drawing function with rotation applied.*/PatternControler.prototype._rotatedFuncGen = function(_ptnFunc, _angle){ const func = function(_w, _h, _rt) { //Calculate the new size according to the rotation angle. const p1 = _rt.createVector(-_w/2, _h/2).rotate(_angle); const p2 = _rt.createVector(_w/2, _h/2).rotate(_angle); const nw = Math.max(Math.abs(p1.x), Math.abs(p2.x)) * 2; const nh = Math.max(Math.abs(p1.y), Math.abs(p2.y)) * 2; _rt.push(); _rt.translate(_w / 2, _h / 2); _rt.rotate(_angle); _rt.translate(-nw / 2, -nh / 2); _ptnFunc(nw, nh, _rt); _rt.pop(); } return func;};/*Default pattern function. */PatternControler.prototype._flatFill = function(){ const c = this.patternColors(); return function(_w, _h, _rt) { _rt.rectMode(_rt.CORNER); _rt.fill(c[0]); _rt.noStroke(); _rt.rect(0, 0, _w, _h); }};// ---------------------------------------------------------------------------// Vertex Infomation Class// ---------------------------------------------------------------------------function PatternVertexInfo(){ this.verticies = []; this.isCurve = false; this.curveAreaMult = 1.25;}// ---------------------------------------------------------------------------PatternVertexInfo.prototype.reset = function(){ this.verticies = []; this.isCurve = false;};PatternVertexInfo.prototype.addVertex = function(x, y){ this.verticies.push([x, y]);};PatternVertexInfo.prototype.addCurveVertex = function(x, y){ this.addVertex(x, y); this.isCurve = true;};PatternVertexInfo.prototype.addBezierVertex = function(x2, y2, x3, y3, x4, y4){ this.addVertex(x2, y2); this.addVertex(x3, y3); this.addVertex(x4, y4);};PatternVertexInfo.prototype.addQuadraticVertex = function(cx, cy, x3, y3){ this.addVertex(cx, cy); this.addVertex(x3, y3);};PatternVertexInfo.prototype.culclateArea = function(){ let minx = this.verticies[0][0]; let maxx = minx; let miny = this.verticies[0][1]; let maxy = miny; for(let i = 0; i < this.verticies.length; i++) { let nx = this.verticies[i][0]; let ny = this.verticies[i][1]; minx = Math.min(minx, nx); maxx = Math.max(maxx, nx); miny = Math.min(miny, ny); maxy = Math.max(maxy, ny); } let w = maxx - minx; let h = maxy - miny; let cx = w / 2 + minx; let cy = h / 2 + miny; if(this.isCurve) { w *= this.curveAreaMult; h *= this.curveAreaMult; } let x = cx - w /2; let y = cy - h /2; const area = {x : x, y : y, w : w, h : h}; return area;};// ---------------------------------------------------------------------------// p5 extentions// ---------------------------------------------------------------------------p5.prototype._patternControler = new PatternControler(); p5.Graphics.prototype._patternControler = new PatternControler();p5.prototype._patternVertexInfo = new PatternVertexInfo();p5.Graphics.prototype._patternVertexInfo = new PatternVertexInfo();/** * Function to change the amount of pattern rotation. * Use patternAngle() to check current angle. * @param {Number} _angle the angle of rotation, * specified in radians or degrees, depending on current angleMode */p5.prototype.patternAngle = function(_angle){ return this._patternControler.patternAngle(_angle);};/** * Function to set the color palette of the pattern. * Use patternColors() to check current palette. * @param {Array} _colsArr */p5.prototype.patternColors = function(_colsArr){ return this._patternControler.patternColors(_colsArr);};/** * Function to set the pattern * @param {function} _func Pattern drawing function. */p5.prototype.pattern = function(_func){ return this._patternControler.setPatternFunction(_func);};// ---------------------------------------------------------------------------//Shape functions(function(){ /* Functions to adjust coordinate data */ const _modeAdjust = function(a, b, c, d, mode) { if (mode === p5.prototype.CORNER) { return { x: a, y: b, w: c, h: d }; } else if (mode === p5.prototype.CORNERS) { return { x: a, y: b, w: c - a, h: d - b }; } else if (mode === p5.prototype.RADIUS) { return { x: a - c, y: b - d, w: 2 * c, h: 2 * d }; } else if (mode === p5.prototype.CENTER) { return { x: a - c * 0.5, y: b - d * 0.5, w: c, h: d }; } }; /* Function to disable drawing of fills and stroke. */ const _disableColor = function(_renderTarget) { _renderTarget.noStroke(); _renderTarget.fill(255, 0); }; // --------------------------------------------------------------------------- //rect p5.prototype.rectPattern = function(args) { _disableColor(this); const r = this.rect(args); const val = _modeAdjust( arguments[0], arguments[1], arguments[2], arguments[3], this._renderer._rectMode ); this._patternControler.applyPattern(val.x, val.y, val.w, val.h, this); return r; }; //square p5.prototype.squarePattern = function(args) { _disableColor(this); const r = this.square(args); const val = _modeAdjust( arguments[0], arguments[1], arguments[2], arguments[2], this._renderer._rectMode ); this._patternControler.applyPattern(val.x, val.y, val.w, val.h, this); return r; }; //ellipse p5.prototype.ellipsePattern = function(args) { _disableColor(this); const r = this.ellipse(args); const val = _modeAdjust( arguments[0], arguments[1], arguments[2], arguments[3], this._renderer._ellipseMode ); this._patternControler.applyPattern(val.x, val.y, val.w, val.h, this); return r; }; //arc p5.prototype.arcPattern = function(args) { _disableColor(this); const r = this.arc(args); const val = _modeAdjust( arguments[0], arguments[1], arguments[2], arguments[3], this._renderer._ellipseMode ); this._patternControler.applyPattern(val.x, val.y, val.w, val.h, this); return r; }; //circle p5.prototype.circlePattern = function(args) { _disableColor(this); const r = this.circle(args); const val = _modeAdjust( arguments[0], arguments[1], arguments[2], arguments[2], this._renderer._ellipseMode ); this._patternControler.applyPattern(val.x, val.y, val.w, val.h, this); return r; }; //triangle p5.prototype.trianglePattern = function(args) { _disableColor(this); const r = this.triangle(args); //Calculates the drawing area of the pattern with the center of gravity. const cx = (arguments[0] + arguments[2] + arguments[4]) / 3; const cy = (arguments[1] + arguments[3] + arguments[5]) / 3; const w = this.max([Math.abs(cx - arguments[0]), Math.abs(cx - arguments[2]), Math.abs(cx - arguments[4])]) * 2; const h = this.max([Math.abs(cy - arguments[1]), Math.abs(cy - arguments[3]), Math.abs(cy - arguments[5])]) * 2; this._patternControler.applyPattern(cx - w /2, cy - h / 2, w, h, this); //Calculates center position.(Not used) /* const minX = min(min(arguments[0], arguments[2]), arguments[4]); const maxX = max(max(arguments[0], arguments[2]), arguments[4]); const minY = min(min(arguments[1], arguments[3]), arguments[5]); const maxY = max(max(arguments[1], arguments[3]), arguments[5]); */ return r; }; //quad p5.prototype.quadPattern = function(args) { _disableColor(this); const r = this.quad(args); const minX = this.min([arguments[0], arguments[2], arguments[4], arguments[6]]); const maxX = this.max([arguments[0], arguments[2], arguments[4], arguments[6]]); const minY = this.min([arguments[1], arguments[3], arguments[5], arguments[7]]); const maxY = this.max([arguments[1], arguments[3], arguments[5], arguments[7]]); this._patternControler.applyPattern(minX, minY, maxX - minX, maxY - minY, this); return r; }; //vertex p5.prototype.beginShapePattern = function(args) { const r = this.beginShape(args); this._patternVertexInfo.reset(); return r; }; p5.prototype.beginContourPattern = function(args) { return this.beginContour(args); }; p5.prototype.vertexPattern = function(args) { const r = this.vertex(args); this._patternVertexInfo.addVertex(arguments[0], arguments[1]); return r; }; p5.prototype.curveVertexPattern = function(args) { const r = this.curveVertex(args); this._patternVertexInfo.addCurveVertex(arguments[0], arguments[1]); return r; }; p5.prototype.bezierVertexPattern = function(args) { const r = this.bezierVertex(args); this._patternVertexInfo.addBezierVertex( arguments[0], arguments[1], arguments[2], arguments[3], arguments[4], arguments[5] ); return r; }; p5.prototype.quadraticVertexPattern = function(args) { const r = this.quadraticVertex(args); this._patternVertexInfo.addQuadraticVertex( arguments[0], arguments[1], arguments[2], arguments[3] ); return r; }; p5.prototype.endContourPattern = function(args) { return this.endContour(args); }; p5.prototype.endShapePattern = function(args) { _disableColor(this); const r = this.endShape(args); const area = this._patternVertexInfo.culclateArea(); this._patternControler.applyPattern(area.x, area.y, area.w, area.h, this); return r; };})();// ---------------------------------------------------------------------------// Pattern functions.// ---------------------------------------------------------------------------const PTN = { /** * Noise pattern * patternColors()[0] base color * patternColors()[1] dot color * @param {Number} _density Density of dots. default = 0.2 * Constrained between 0 and 1. */ noise : function(_density = 0.2) { const func = function(_w, _h, _rt = window) { const density = _rt.constrain(_density, 0, 1); const c = _rt.patternColors(); const num = _w * _h * density; const ns = 0.01; _rt.ellipseMode(_rt.CENTER); _rt.rectMode(_rt.CORNER); _rt.noStroke(); _rt.fill(c[0]); _rt.rect(0, 0, _w, _h); _rt.fill(c[1 % c.length]); for(let i = 0; i < num; i++){ const x = _rt.random(_w); const y = _rt.random(_h); const dia = _rt.noise(x * ns, y * ns) * 0.5 + 1; _rt.ellipse(x, y, dia, dia); } } return func; }, /** * Noise gradient pattern * patternColors()[0] base color * patternColors()[1] dot color * @param {Number} _density Density of dots. default = 0.2 */ noiseGrad : function(_density = 0.2) { const func = function(_w, _h, _rt = window) { const density = _rt.min(1, _density); const c = _rt.patternColors(); const num = _w * _h * density; const ns = 0.01; _rt.rectMode(_rt.CORNER); _rt.ellipseMode(_rt.CENTER); _rt.noStroke(); _rt.fill(c[0]); _rt.rect(0, 0, _w, _h); _rt.fill(c[1 % c.length]); for(let i = 0; i < num; i++){ const x = _rt.abs(_rt.randomGaussian()) / 5 * _w; const y = _rt.random(_h); const dia = _rt.noise(x * ns, y * ns) * 0.5 + 1; _rt.ellipse(x, y, dia, dia); } } return func; }, /** * Stripe pattern * Fill the colors of patternColors() in order. * @param {Number} _space Stripe space. default = 10 */ stripe : function(_space = 10) { const func = function(_w, _h, _rt = window) { _space = Math.abs(_space); if(_space == 0)_space = 10; const c = _rt.patternColors(); _rt.rectMode(_rt.CORNER); _rt.noStroke(); let count = 0; for(let x = 0; x <= _w + _space; x+= _space) { _rt.fill(c[count % c.length]); _rt.rect(x, 0, Math.ceil(_space), _h); count++; } } return func; }, /** * Concentric circle stripe pattern. * Fill the colors of patternColors() in order. * @param {Number} _space Stripe space. default = 10 * @param {Number} _minRadius Minimum radius. default = 0 */ stripeCircle : function(_space = 25, _minRadius = 0) { const func = function(_w, _h, _rt = window) { _space = _rt.abs(_space); if(_space == 0)_space = 25; const c = _rt.patternColors(); const maxRadius = _rt.sqrt(_w * _w + _h * _h); const num = _rt.ceil((maxRadius - _minRadius) / _space); _rt.ellipseMode(_rt.CENTER); _rt.noStroke(); for(let i = 0; i < num; i++) { _rt.fill(c[i % c.length]); const radius = _minRadius + (num - 1 - i) * _space; _rt.circle(_w / 2, _h / 2, radius * 2); } } return func; }, /** * Concentric polygon stripe pattern. * @param {Number} _vertNum Number of vertices in a polygon, * constrained between 3 and 20. default = 3 * @param {Number} _space Stripe space. default = 10 * @param {Number} _minRadius Minimum radius. default = 0 */ stripePolygon : function(_vertNum = 3, _space = 25, _minRadius = 0) { const func = function(_w, _h, _rt = window) { _space = _rt.abs(_space); if(_space == 0)_space = 25; const vNum = _rt.int(_rt.constrain(_vertNum, 3, 30)); const c = _rt.patternColors(); const maxRadius = _rt.sqrt(_w * _w + _h * _h); const num = _rt.ceil((maxRadius - _minRadius) / _space); _rt.noStroke(); for(let i = 0; i < num; i++) { _rt.fill(c[i % c.length]); const radius = _minRadius + (num - 1 - i) * _space; _rt.beginShape(); for(let i = 0; i < vNum; i++) { const rad = i * Math.PI * 2 / vNum; const x = _w / 2 + Math.cos(rad) * radius; const y = _h / 2 + Math.sin(rad) * radius; _rt.vertex(x, y); } _rt.endShape(_rt.CLOSE); } } return func; }, /** * Radial stripe pattern. * @param {Number} _angleSpan Stripe angle space. default = PI / 4, * specified in radians or degrees, depending on current angleMode */ stripeRadial : function(_angleSpan = 1) { const func = function(_w, _h, _rt = window) { _angleSpan = _rt.abs(_angleSpan); if(_angleSpan == 0)_angleSpan = 1; const c = _rt.patternColors(); const tau = _rt._angleMode == _rt.DEGREES ? 360 : _rt.TAU; _rt.ellipseMode(_rt.CENTER); _rt.noStroke(); let count = 0; const dia = _rt.sqrt(_w * _w + _h * _h); for(let r = 0; r < tau; r += _angleSpan) { //Error measures const endRad = r + _angleSpan > tau ? 0.00001 : r + _angleSpan; _rt.fill(c[count % c.length]); _rt.arc(_w / 2, _h /2, dia, dia, r, endRad + 0.0001); count++; } } return func; }, /** * Wave pattern * patternColors()[0] base color * patternColors()[1] wave color * @param {Number} _waveW Wave width. default = 100 * @param {Number} _waveH Wave height. default = 20 * @param {Number} _space Line spacing. default = 20 * @param {Number} _weight Line weight. default = 5 */ wave : function(_waveW = 100, _waveH = 10, _space = 20, _weight = 5) { const func = function(_w, _h, _rt = window) { _space = _rt.abs(_space); if(_space == 0)_space = 20; _waveW = _rt.abs(_waveW); if(_waveW == 0)_waveW = 100; const c = _rt.patternColors(); const vertSpan = 3; _rt.rectMode(_rt.CORNER); _rt.noStroke(); _rt.fill(c[0]); _rt.rect(0, 0, _w, _h); _rt.fill(c[1]); for(let y = -_waveH; y <= _h + _waveH; y+= _space) { _rt.beginShape(); for(let x = 0; x < _w; x += vertSpan) { const rad = x / _waveW * _rt.TAU; _rt.vertex(x, y + Math.sin(rad) * _waveH); } _rt.vertex(_w, y + Math.sin(_w / _waveW * Math.PI * 2) * _waveH); for(let x = _w; x > 0; x -= vertSpan) { const rad = x / _waveW * Math.PI * 2; _rt.vertex(x, y + _weight + Math.sin(rad) * _waveH); } _rt.vertex(0, y + _weight + Math.sin(0) * _waveH); _rt.endShape(_rt.CLOSE); } } return func; }, /* Private function. Generate tiling pattern functions. */ _customTiling : function(_spaceX, _spaceY, _tileFunc, _useOffset = false) { const func = function(_w, _h, _rt) { _spaceX = _rt.abs(_spaceX); if(_spaceX == 0)_spaceX = 50; _spaceY = _rt.abs(_spaceY); if(_spaceY == 0)_spaceY = 50; const c = _rt.patternColors(); _rt.rectMode(_rt.CORNER); _rt.noStroke(); _rt.fill(c[0]); _rt.rect(0, 0, _w, _h); let yi = 0; _rt.fill(c[1]); for(let y = 0; y <= _h + _spaceY /2; y += _spaceY) { let xi = 0; let offset = yi % 2 == 1 && _useOffset ? -_spaceX / 2 : 0; for(let x = offset; x <= _w + _spaceX /2; x += _spaceX) { _rt.push(); _rt.translate(x, y); _tileFunc(_rt, xi, yi); _rt.pop(); xi++; } yi++; } } return func; }, /** * Dot pattern * patternColors()[0] base color * patternColors()[1] Checked color * @param {Number} _space Dot spacing. default = 15 * @param {Number} _dia Dot diameter. default = 15 */ dot : function(_space = 15, _dia = 7) { const func = PTN._customTiling( _space, _space, function(_rt) { _rt.noStroke(); _rt.ellipseMode(_rt.CENTER); _rt.circle(0, 0, _dia); }, false ); return func; }, /** * Checked pattern * patternColors()[0] base color * patternColors()[1] Checked color * @param {Number} _checkW Width of checkered pattern. default = 10 * @param {Number} _checkH Height of checkered pattern (Optional) */ checked : function(args) { let w, h; if(arguments.length == 0){ w = 10; h = 10;} else if(arguments.length == 1){w = arguments[0]; h = w;} else{w = arguments[0]; h = arguments[1];} const func = PTN._customTiling( w * 2, h, function(_rt) { _rt.noStroke(); _rt.rectMode(_rt.CORNER); _rt.rect(0, 0, w, h); }, true ); return func; }, /** * Cross pattern * patternColors()[1] base color * patternColors()[0] line color * @param {Number} _space Line spacing. default = 20 * @param {Number} _weight Line weight. default = 5 */ cross : function(_space = 20, _weight = 5) { const func = function(_w, _h, _rt = window) { const c = _rt.patternColors(); _rt.rectMode(_rt.CORNER); _rt.fill(c[0]); _rt.rect(0, 0, _w, _h); _rt.fill(c[1 % c.length]); for(let y = 0; y < _h; y+= _space)_rt.rect(0, y + _space / 2 - _weight /2, _w, _weight); for(let x = 0; x < _w; x+= _space)_rt.rect(x + _space / 2 - _weight / 2, 0, _weight, _h); } return func; }, /** * Triangle pattern * patternColors()[0] base color * patternColors()[1] line color * @param {Number} _triW Triangle width. default = 20 * @param {Number} _triH Triangle height. default = 20 */ triangle : function(_triW = 20, _triH = 20) { const func = PTN._customTiling( _triW, _triH, function(_rt) { _rt.noStroke(); _rt.triangle(0, 0, _triW, 0, _triW /2, _triH); }, true ); return func; }};