|
console.clear(); |
|
console.log( 'SVG pattern doodler' ); |
|
|
|
//--- |
|
|
|
const DEBUG = false; |
|
|
|
const MATHPI_180 = Math.PI / 180; |
|
|
|
const SVG_NAMESPACE_URI = 'http://www.w3.org/2000/svg'; |
|
|
|
const SPEED = 1; |
|
const PAUSE = 3000; |
|
|
|
const LINE_WIDTH = 1; |
|
const LINE_COLOR = 'rgba(0, 0, 0, 1.00)'; |
|
const LINE_CAP = 'square';//square, butt or round |
|
|
|
const SHAPE_RENDERING = 'optimizeSpeed';//auto, optimizeSpeed, crispEdges, geometricPrecision |
|
|
|
const BG_COLOR = 'rgba(255, 250, 244, 1.00)'; |
|
|
|
let w = 500; |
|
let h = 500; |
|
|
|
let guiSetting = null; |
|
let gui = null; |
|
|
|
let interval = null; |
|
let timeout = null; |
|
|
|
let canvas = null; |
|
|
|
let bg = null; |
|
|
|
let grid = null; |
|
let gridCounter = 0; |
|
let gridPosition = null; |
|
|
|
let gridSize = 35; |
|
let gridCellWidth = w / gridSize; |
|
let gridCellHeight = h / gridSize; |
|
let gridCellSizeMax = 3; |
|
|
|
let history = []; |
|
let historyIndex = history.length - 1; |
|
|
|
const colors = [ |
|
|
|
[ |
|
|
|
{ r: 242, g: 99, b: 137 }, |
|
{ r: 97, g: 65, b: 166 }, |
|
{ r: 50, g: 139, b: 217 }, |
|
{ r: 242, g: 155, b: 48 }, |
|
{ r: 242, g: 71, b: 56 } |
|
|
|
], |
|
[ |
|
|
|
{ r: 46, g: 123, b: 140 }, |
|
{ r: 20, g: 38, b: 38 }, |
|
{ r: 191, g: 145, b: 105 }, |
|
{ r: 140, g: 74, b: 59 }, |
|
{ r: 191, g: 167, b: 164 } |
|
|
|
], |
|
[ |
|
|
|
{ r: 220, g: 220, b: 210 }, |
|
{ r: 35, g: 35, b: 30 } |
|
|
|
], |
|
[ |
|
|
|
{ r: 242, g: 242, b: 242 }, |
|
{ r: 209, g: 209, b: 209 }, |
|
{ r: 169, g: 169, b: 169 }, |
|
{ r: 89, g: 89, b: 89 }, |
|
{ r: 44, g: 44, b: 44 } |
|
|
|
], |
|
[ |
|
|
|
{ r: 72, g: 89, b: 34 }, |
|
{ r: 121, g: 140, b: 53 }, |
|
{ r: 180, g: 191, b: 94 }, |
|
{ r: 36, g: 38, b: 20 }, |
|
{ r: 242, g: 242, b: 242 } |
|
|
|
], |
|
[ |
|
|
|
{ r: 242, g: 242, b: 242 }, |
|
{ r: 166, g: 117, b: 27 }, |
|
{ r: 242, g: 174, b: 46 }, |
|
{ r: 242, g: 199, b: 119 }, |
|
{ r: 13, g: 13, b: 13 } |
|
|
|
], |
|
[ |
|
|
|
{ r: 88, g: 122, b: 166 }, |
|
{ r: 121, g: 190, b: 217 }, |
|
{ r: 187, g: 191, b: 69 }, |
|
{ r: 191, g: 169, b: 149 }, |
|
{ r: 95, g: 83, b: 77 } |
|
|
|
], |
|
[ |
|
|
|
{ r: 166, g: 41, b: 64 }, |
|
{ r: 242, g: 235, b: 220 }, |
|
{ r: 214, g: 187, b: 151 }, |
|
{ r: 234, g: 141, b: 19 }, |
|
{ r: 217, g: 82, b: 82 } |
|
|
|
] |
|
|
|
]; |
|
|
|
let color = null; |
|
|
|
//--- |
|
|
|
const randomInteger = function( min, max ) { |
|
|
|
return Math.floor( Math.random() * ( max - min + 1 ) ) + min; |
|
|
|
}; |
|
|
|
const clamp = function( value, min, max ) { |
|
|
|
return Math.min( Math.max( value, min ), max ); |
|
|
|
}; |
|
|
|
const randomBetween = function( min, max ) { |
|
|
|
return Math.floor( Math.random() * ( max - min + 1 ) + min ); |
|
|
|
} |
|
|
|
//--- |
|
|
|
function init() { |
|
|
|
canvas = createCanvas( w, h, 'container' ); |
|
|
|
//--- |
|
|
|
restart(); |
|
|
|
} |
|
|
|
function initGUI() { |
|
|
|
const controlRestart = () => { |
|
|
|
restart(); |
|
|
|
} |
|
|
|
const controlStop = () => { |
|
|
|
stop(); |
|
|
|
} |
|
|
|
const setCanvasWidth = () => { |
|
|
|
setCanvasSize( guiSetting[ 'Canvas width' ], guiSetting[ 'Canvas height' ] ); |
|
|
|
} |
|
|
|
const setCanvasHeight = () => { |
|
|
|
setCanvasSize( guiSetting[ 'Canvas width' ], guiSetting[ 'Canvas height' ] ); |
|
|
|
} |
|
|
|
const setCanvasSize = ( width, height ) => { |
|
|
|
stop(); |
|
clearHistory(); |
|
|
|
w = width; |
|
h = height; |
|
|
|
canvas.setAttribute( 'width', w ); |
|
canvas.setAttribute( 'height', h ); |
|
canvas.width = w; |
|
canvas.height = h; |
|
|
|
const container = document.getElementById( 'container' ); |
|
|
|
container.style.width = w + 'px'; |
|
container.style.height = h + 'px'; |
|
|
|
gridSize = guiSetting[ 'Grid size' ]; |
|
gridCellWidth = w / gridSize; |
|
gridCellHeight = h / gridSize; |
|
|
|
restart(); |
|
|
|
} |
|
|
|
const setGridSize = () => { |
|
|
|
stop(); |
|
clearHistory(); |
|
|
|
gridSize = guiSetting[ 'Grid size' ]; |
|
gridCellWidth = w / gridSize; |
|
gridCellHeight = h / gridSize; |
|
|
|
restart(); |
|
|
|
} |
|
|
|
const setCellSizeMax = () => { |
|
|
|
stop(); |
|
clearHistory(); |
|
|
|
gridCellSizeMax = guiSetting[ 'Cell size max' ]; |
|
|
|
restart(); |
|
|
|
} |
|
|
|
const controlHistoryPrevious = () => { |
|
|
|
stop(); |
|
|
|
historyIndex--; |
|
|
|
if ( historyIndex < 0 ) { |
|
|
|
historyIndex = 0; |
|
|
|
} |
|
|
|
canvas.innerHTML = ''; |
|
canvas.innerHTML = history[ historyIndex ]; |
|
|
|
guiSetting[ 'Current Image' ] = ( historyIndex + 1 ).toString(); |
|
|
|
} |
|
|
|
const controlHistoryNext = () => { |
|
|
|
stop(); |
|
|
|
historyIndex++; |
|
|
|
if ( historyIndex > history.length - 1 ) { |
|
|
|
historyIndex = history.length - 1; |
|
|
|
} |
|
|
|
canvas.innerHTML = ''; |
|
canvas.innerHTML = history[ historyIndex ]; |
|
|
|
guiSetting[ 'Current Image' ] = ( historyIndex + 1 ).toString(); |
|
|
|
} |
|
|
|
const controlDownloadSVG = () => { |
|
|
|
stop(); |
|
|
|
canvas.setAttribute( 'xmlns', SVG_NAMESPACE_URI ); |
|
|
|
const svgData = canvas.outerHTML; |
|
const preface = '<?xml version="1.0" standalone="no"?>\r\n'; |
|
const svgBlob = new Blob( [ preface, svgData ], { type: 'image/svg+xml;charset=utf-8' } ); |
|
const svgUrl = URL.createObjectURL( svgBlob ); |
|
const downloadLink = document.createElement( 'a' ); |
|
|
|
downloadLink.href = svgUrl; |
|
downloadLink.download = 'Doodle.svg'; |
|
|
|
document.body.appendChild( downloadLink ); |
|
downloadLink.click(); |
|
document.body.removeChild( downloadLink ); |
|
|
|
} |
|
|
|
const controlDownloadPNG = () => { |
|
|
|
stop(); |
|
|
|
const img = document.createElement( 'img' ); |
|
|
|
img.src = 'data:image/svg+xml;charset=utf-8,' + ( new XMLSerializer ).serializeToString( canvas ); |
|
img.onload = () => { |
|
|
|
const canvas = document.createElement( 'canvas' ); |
|
|
|
canvas.width = w; |
|
canvas.height = h; |
|
|
|
const context = canvas.getContext( '2d' ); |
|
|
|
context.drawImage( img, 0, 0 ); |
|
|
|
canvas.toBlob( pngBlob => { |
|
|
|
const pngUrl = URL.createObjectURL( pngBlob ); |
|
const downloadLink = document.createElement( 'a' ); |
|
|
|
downloadLink.href = pngUrl; |
|
downloadLink.download = 'Doodle.png'; |
|
|
|
document.body.appendChild( downloadLink ); |
|
downloadLink.click(); |
|
document.body.removeChild( downloadLink ); |
|
|
|
} ); |
|
|
|
} |
|
|
|
} |
|
|
|
const linkTo = () => { |
|
|
|
window.open( 'https://twitter.com/niklaswebdev', '_blank' ); |
|
|
|
} |
|
|
|
//--- |
|
|
|
guiSetting = { |
|
|
|
'Restart': controlRestart, |
|
'Stop': controlStop, |
|
'Canvas width': w, |
|
'Canvas height': h, |
|
'Grid size': gridSize, |
|
'Cell size max': gridCellSizeMax, |
|
'Current Image': 0, |
|
'Total Images': 0, |
|
'→ Previous image': controlHistoryPrevious, |
|
'← Next image': controlHistoryNext, |
|
'Download SVG': controlDownloadSVG, |
|
'Download PNG': controlDownloadPNG, |
|
'@niklaswebdev': linkTo |
|
|
|
} |
|
|
|
gui = new dat.GUI(); |
|
gui.close(); |
|
gui.add( guiSetting, 'Restart' ); |
|
gui.add( guiSetting, 'Stop' ); |
|
|
|
const dimensions = gui.addFolder( 'Dimensions' ); |
|
|
|
dimensions.add( guiSetting, 'Canvas width' ).min( 128 ).max( 2048 ).step( 1 ).onChange( setCanvasWidth ); |
|
dimensions.add( guiSetting, 'Canvas height' ).min( 128 ).max( 2048 ).step( 1 ).onChange( setCanvasHeight ); |
|
dimensions.add( guiSetting, 'Grid size' ).min( 4 ).max( 64 ).step( 1 ).onChange( setGridSize ); |
|
dimensions.add( guiSetting, 'Cell size max' ).min( 1 ).max( 10 ).step( 1 ).onChange( setCellSizeMax ); |
|
|
|
const imageStorage = gui.addFolder( 'Image storage' ); |
|
|
|
const currentImage = imageStorage.add( guiSetting, 'Current Image' ); |
|
currentImage.listen(); |
|
currentImage.domElement.style.pointerEvents = 'none'; |
|
|
|
const totalImages = imageStorage.add( guiSetting, 'Total Images' ); |
|
totalImages.listen(); |
|
totalImages.domElement.style.pointerEvents = 'none'; |
|
|
|
imageStorage.add( guiSetting, '→ Previous image' ); |
|
imageStorage.add( guiSetting, '← Next image' ); |
|
imageStorage.add( guiSetting, 'Download SVG' ); |
|
imageStorage.add( guiSetting, 'Download PNG' ); |
|
|
|
gui.add( guiSetting, '@niklaswebdev' ); |
|
|
|
} |
|
|
|
//--- |
|
|
|
function restart() { |
|
|
|
bg = createRect( 0, 0, w, h, BG_COLOR ); |
|
|
|
canvas.appendChild( bg ); |
|
|
|
//--- |
|
|
|
gridCounter = 0; |
|
grid = []; |
|
|
|
for ( let y = 0, yl = gridSize; y < yl; y++ ) { |
|
|
|
const yGrid = []; |
|
|
|
for ( let x = 0, xl = gridSize; x < xl; x++ ) { |
|
|
|
yGrid.push( 0 ); |
|
|
|
} |
|
|
|
grid.push( yGrid ); |
|
|
|
} |
|
|
|
//--- |
|
|
|
color = colors[ Math.floor( Math.random() * colors.length ) ]; |
|
|
|
//--- |
|
|
|
stop(); |
|
|
|
//--- |
|
|
|
interval = setInterval( () => { |
|
|
|
if ( gridCounter >= gridSize * gridSize - 1 ) { |
|
|
|
clearInterval( interval ); |
|
|
|
//--- |
|
|
|
timeout = setTimeout( () => { |
|
|
|
canvas.innerHTML = ''; |
|
|
|
restart(); |
|
|
|
}, PAUSE ); |
|
|
|
} |
|
|
|
//--- |
|
|
|
if ( gridCounter === 0 ) { |
|
|
|
gridPosition = getRandomGridPos(); |
|
|
|
} else { |
|
|
|
gridPosition = getGridPosNearBy( gridPosition ); |
|
|
|
} |
|
|
|
//--- |
|
|
|
let gridCellSize = getCellSize( gridPosition, gridCellSizeMax ); |
|
|
|
if ( gridCellSize > 1 ) { |
|
|
|
gridCellSize = randomBetween( 2, gridCellSize ); |
|
|
|
} |
|
|
|
//--- |
|
|
|
if ( gridCellSize === 1 ) { |
|
|
|
grid[ gridPosition.y ][ gridPosition.x ] = 1; |
|
|
|
gridCounter++; |
|
|
|
} else { |
|
|
|
const xs = gridPosition.x; |
|
const ys = gridPosition.y; |
|
const xe = gridPosition.x + gridCellSize; |
|
const ye = gridPosition.y + gridCellSize; |
|
|
|
for ( let y = ys; y < ye; y++ ) { |
|
|
|
for ( let x = xs; x < xe; x++ ) { |
|
|
|
if ( grid[ y ][ x ] === 0 ) { |
|
|
|
grid[ y ][ x ] = 1; |
|
|
|
gridCounter++; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
//--- |
|
|
|
addGridCell( gridCellSize, gridPosition ); |
|
|
|
//--- |
|
|
|
if ( gridCounter >= gridSize * gridSize ) { |
|
|
|
history.push( canvas.innerHTML ); |
|
historyIndex = history.length - 1; |
|
|
|
guiSetting[ 'Current Image' ] = ( historyIndex + 1 ).toString(); |
|
guiSetting[ 'Total Images' ] = history.length.toString(); |
|
|
|
} |
|
|
|
}, SPEED ); |
|
|
|
} |
|
|
|
function stop() { |
|
|
|
if ( timeout !== null ) { |
|
|
|
clearTimeout( timeout ); |
|
|
|
timeout = null; |
|
|
|
} |
|
|
|
if ( interval !== null ) { |
|
|
|
clearInterval( interval ); |
|
|
|
interval = null; |
|
|
|
} |
|
|
|
} |
|
|
|
//--- |
|
|
|
function clearHistory() { |
|
|
|
history = []; |
|
historyIndex = 0; |
|
|
|
guiSetting[ 'Current Image' ] = 0; |
|
guiSetting[ 'Total Images' ] = 0; |
|
|
|
} |
|
|
|
//--- |
|
|
|
function addGridCell( gridCellSize, gridPosition ) { |
|
|
|
const position = { x: gridCellWidth * gridPosition.x, y: gridCellHeight * gridPosition.y }; |
|
|
|
const patternIndex = Math.floor( Math.random() * patterns.length ); |
|
const pattern = patterns[ patternIndex ]; |
|
|
|
let randomIndex1 = Math.floor( Math.random() * color.length ); |
|
let randomIndex2 = Math.floor( Math.random() * color.length ); |
|
|
|
while ( randomIndex1 === randomIndex2 ) { |
|
|
|
randomIndex2 = Math.floor( Math.random() * color.length ); |
|
|
|
} |
|
|
|
const color1 = color[ randomIndex1 ]; |
|
const color2 = color[ randomIndex2 ]; |
|
|
|
const colorRandomDiff = 0;//25; |
|
|
|
const c1 = 'rgba(' + clamp( randomInteger( color1.r - colorRandomDiff, color1.r + colorRandomDiff ), 0, 255 ) + ', ' + clamp( randomInteger( color1.g - colorRandomDiff, color1.g + colorRandomDiff ), 0, 255 ) + ', ' + clamp( randomInteger( color1.b - colorRandomDiff, color1.b + colorRandomDiff ), 0, 255 ) + ', 1.00)'; |
|
const c2 = 'rgba(' + clamp( randomInteger( color2.r - colorRandomDiff, color2.r + colorRandomDiff ), 0, 255 ) + ', ' + clamp( randomInteger( color2.g - colorRandomDiff, color2.g + colorRandomDiff ), 0, 255 ) + ', ' + clamp( randomInteger( color2.b - colorRandomDiff, color2.b + colorRandomDiff ), 0, 255 ) + ', 1.00)'; |
|
|
|
pattern( position.x, position.y, gridCellSize * gridCellWidth, gridCellSize * gridCellHeight, [ c1, c2 ] ); |
|
|
|
//--- |
|
|
|
if ( DEBUG === true ) { |
|
|
|
const debugText = document.createElement( 'div' ); |
|
|
|
debugText.innerHTML = ( i + 1 ).toString(); |
|
debugText.style.position = 'absolute'; |
|
debugText.style.left = x + gridCellWidth / 2 - 10 + 'px'; |
|
debugText.style.top = y + gridCellHeight / 2 - 10 + 'px'; |
|
debugText.style.color = '#ffffff'; |
|
debugText.style.fontSize = 'small'; |
|
|
|
document.getElementById( 'container' ).appendChild( debugText ); |
|
|
|
} |
|
|
|
} |
|
|
|
function getRandomGridPos() { |
|
|
|
const x = Math.floor( Math.random() * grid[ 0 ].length ); |
|
const y = Math.floor( Math.random() * grid.length ); |
|
|
|
return { x: x, y: y }; |
|
|
|
} |
|
|
|
function getRandomFreeGridPos() { |
|
|
|
const newPositions = []; |
|
|
|
const xs = 0; |
|
const ys = 0; |
|
const xe = grid[ 0 ].length; |
|
const ye = grid.length; |
|
|
|
for ( let y = ys; y < ye; y++ ) { |
|
|
|
for ( let x = xs; x < xe; x++ ) { |
|
|
|
if ( grid[ y ][ x ] === 0 ) { |
|
|
|
newPositions.push( { x: x, y: y } ); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
if ( newPositions.length === 1 ) { |
|
|
|
return newPositions[ 0 ]; |
|
|
|
} else if ( newPositions.length > 1 ) { |
|
|
|
return newPositions[ Math.floor( Math.random() * newPositions.length ) ]; |
|
|
|
} else { |
|
|
|
return null; |
|
|
|
} |
|
|
|
} |
|
|
|
function getGridPosNearBy( position, maxRadius = 100 ) { |
|
|
|
for ( let radius = 1; radius < maxRadius; radius++ ) { |
|
|
|
const newPositions = []; |
|
|
|
const xs = position.x - radius; |
|
const ys = position.y - radius; |
|
const xe = position.x + radius; |
|
const ye = position.y + radius; |
|
|
|
for ( let y = ys; y < ye; y++ ) { |
|
|
|
for ( let x = xs; x < xe; x++ ) { |
|
|
|
if ( x > -1 && x < gridSize && y > -1 && y < gridSize && grid[ y ][ x ] === 0 ) { |
|
|
|
newPositions.push( { x: x, y: y } ); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
if ( newPositions.length === 1 ) { |
|
|
|
return newPositions[ 0 ]; |
|
|
|
} else if ( newPositions.length > 1 ) { |
|
|
|
return newPositions[ Math.floor( Math.random() * newPositions.length ) ]; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
function getCellSize( position, maxSize = 5 ) { |
|
|
|
if ( maxSize === 1 ) { |
|
|
|
return 1; |
|
|
|
} |
|
|
|
let size = 0; |
|
|
|
for ( let step = 1; step < maxSize + 1; step++ ) { |
|
|
|
const xs = position.x; |
|
const ys = position.y; |
|
const xe = position.x + step; |
|
const ye = position.y + step; |
|
|
|
let successCount = 0; |
|
let cellCount = 0; |
|
|
|
for ( let y = ys; y < ye; y++ ) { |
|
|
|
for ( let x = xs; x < xe; x++ ) { |
|
|
|
cellCount++; |
|
|
|
if ( x > -1 && x < gridSize && y > -1 && y < gridSize && grid[ y ][ x ] === 0 ) { |
|
|
|
successCount++; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
if ( successCount === cellCount ) { |
|
|
|
size = successCount / step; |
|
|
|
} |
|
|
|
} |
|
|
|
return size; |
|
|
|
} |
|
|
|
//--- |
|
|
|
Number.prototype.ts = Number.prototype.toString; |
|
|
|
function drawPattern001( x, y, w, h, colors ) { |
|
|
|
const points0 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points1 = ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createPolygon( points0, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern002( x, y, w, h, colors ) { |
|
|
|
const points0 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createPolygon( points0, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern003( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createEllipse( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern004( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern005( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts(); |
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points3 = ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern006( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts(); |
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points4 = ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
const pattern4 = createPolygon( points4, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern007( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts(); |
|
const points3 = ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
const points4 = ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
const pattern4 = createPolygon( points4, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern008( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points3 = ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
const points4 = ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
const pattern4 = createPolygon( points4, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern009( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w / 2, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x + w / 2, y, w / 2, h, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern010( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h / 2, colors[ 0 ] ); |
|
const pattern1 = createRect( x, y + h / 2, w, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern011( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w / 4 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w - w / 4 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 4 ).ts(); |
|
const points2 = ( x + w ).ts() + ',' + ( y + h / 4 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h - h / 4 ).ts() + ' ' + ( x + w - w / 4 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points3 = ( x + w / 4 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w - w / 4 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h - h / 4 ).ts(); |
|
const points4 = ( x ).ts() + ',' + ( y + h / 4 ).ts() + ' ' + ( x ).ts() + ',' + ( y + h - h / 4 ).ts() + ' ' + ( x + w / 4 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
const pattern4 = createPolygon( points4, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern012( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 360, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern013( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 270, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern014( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 90, colors[ 1 ] ); |
|
const pattern2 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 360, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern015( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 360, colors[ 1 ] ); |
|
const pattern2 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 180, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern016( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 90, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern017( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 180, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern018( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 270, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern019( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 360, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern020( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 90, colors[ 1 ] ); |
|
const pattern2 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 270, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern021( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 180, colors[ 1 ] ); |
|
const pattern2 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 360, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern022( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 180, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern023( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 270, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern024( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 360, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern025( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 90, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern026( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w, y + h, w / 2, 270, 360, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern027( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w, y, w / 2, 180, 270, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern028( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x, y, w / 2, 90, 180, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern029( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x, y + h, w / 2, 0, 90, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern030( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x, y + h, w / 2, 0, 90, colors[ 1 ] ); |
|
const pattern2 = createCircleAdvanced( x + w, y, w / 2, 180, 270, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern031( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x, y, w / 2, 90, 180, colors[ 1 ] ); |
|
const pattern2 = createCircleAdvanced( x + w, y + h, w / 2, 270, 360, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern032( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points2 = ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern033( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern034( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern035( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern036( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
|
|
} |
|
|
|
function drawPattern037( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern038( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 90, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x, y + h / 2, w, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern039( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 180, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x, y, w, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern040( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 270, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x, y, w, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern041( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 360, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x, y + w / 2, w, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern042( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 90, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern043( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 180, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern044( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 270, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern045( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 360, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern046( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 90, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern047( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 180, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern048( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 270, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern049( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 360, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern050( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 90, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern051( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 180, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern052( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 270, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern053( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 360, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x, y + w / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern054( x, y, w, h, colors ) { |
|
|
|
const points4 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 90, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern4 = createPolygon( points4, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern055( x, y, w, h, colors ) { |
|
|
|
const points4 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 180, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern4 = createPolygon( points4, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern056( x, y, w, h, colors ) { |
|
|
|
const points4 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 270, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern4 = createPolygon( points4, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern057( x, y, w, h, colors ) { |
|
|
|
const points4 = ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 360, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x, y + w / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern4 = createPolygon( points4, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern058( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern059( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern060( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern061( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern062( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern063( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern064( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w / 2, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x + w / 2, y, w / 2, h, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern065( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w / 2, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x + w / 2, y, w / 2, h, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern066( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w / 2, h, colors[ 1 ] ); |
|
const pattern1 = createRect( x + w / 2, y, w / 2, h, colors[ 0 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern067( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w / 2, h, colors[ 1 ] ); |
|
const pattern1 = createRect( x + w / 2, y, w / 2, h, colors[ 0 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern068( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h / 2, colors[ 0 ] ); |
|
const pattern1 = createRect( x, y + h / 2, w, h / 2, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern069( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h / 2, colors[ 0 ] ); |
|
const pattern1 = createRect( x, y + h / 2, w, h / 2, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern070( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h / 2, colors[ 1 ] ); |
|
const pattern1 = createRect( x, y + h / 2, w, h / 2, colors[ 0 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern071( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h / 2, colors[ 1 ] ); |
|
const pattern1 = createRect( x, y + h / 2, w, h / 2, colors[ 0 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern072( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern073( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern074( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern075( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern076( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern077( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern078( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern079( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern080( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern081( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern082( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern083( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern084( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern085( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern086( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern087( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points2 = ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern088( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 180, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern089( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 180, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern090( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 270, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern091( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 270, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern092( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 360, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern093( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 360, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern094( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 90, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern095( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 90, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern096( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 360, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern097( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 270, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern098( x, y, w, h, colors ) { |
|
|
|
const points3 = ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 90, colors[ 1 ] ); |
|
const pattern2 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 360, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern099( x, y, w, h, colors ) { |
|
|
|
const points3 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 360, colors[ 1 ] ); |
|
const pattern2 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 180, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern100( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 180, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y, w / 2, h, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern101( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 270, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y, w, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern102( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 360, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y, w / 2, h, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern103( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 90, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2, w, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern104( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 45, 315, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern105( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 225, colors[ 1 ] ); |
|
const pattern2 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 315, 360, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern106( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 135, colors[ 1 ] ); |
|
const pattern2 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 225, 360, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern107( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 45, colors[ 1 ] ); |
|
const pattern2 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 135, 360, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern108( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern109( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern110( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern111( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern112( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern113( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern114( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern115( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern116( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern117( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern118( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern119( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern120( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern121( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern122( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern123( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern124( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern125( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern126( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y + w / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern127( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern128( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern129( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern130( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern131( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern132( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern133( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern134( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern135( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 45, 135, colors[ 1 ] ); |
|
const pattern2 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 225, 315, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern136( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 135, 225, colors[ 1 ] ); |
|
const pattern2 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 315, 360, colors[ 1 ] ); |
|
const pattern3 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 45, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern137( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x + w / 4, y + h / 4, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern138( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern139( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern140( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x, y + h / 4, w, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern141( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x + w / 4, y, w / 2, h, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern142( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x + w / 4, y, w / 2, h, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 4, w, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern143( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x, y, w, h / 4, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2 + h / 4, w, h / 4, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern144( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x, y, w / 4, h, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2 + w / 4, y, w / 4, h, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern145( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x, y, w / 4, h, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2 + w / 4, y, w / 4, h, colors[ 1 ] ); |
|
const pattern3 = createRect( x, y, w, h / 4, colors[ 1 ] ); |
|
const pattern4 = createRect( x, y + h / 2 + h / 4, w, h / 4, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern146( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 180, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern147( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 180, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern148( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 270, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern149( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 270, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern150( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 360, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern151( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 360, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern152( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 90, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern153( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 90, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern154( x, y, w, h, colors ) { |
|
|
|
const points3 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 180, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern155( x, y, w, h, colors ) { |
|
|
|
const points3 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 180, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern156( x, y, w, h, colors ) { |
|
|
|
const points3 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 270, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern157( x, y, w, h, colors ) { |
|
|
|
const points3 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 270, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern158( x, y, w, h, colors ) { |
|
|
|
const points3 = ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 360, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern159( x, y, w, h, colors ) { |
|
|
|
const points3 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 360, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern160( x, y, w, h, colors ) { |
|
|
|
const points3 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 90, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern161( x, y, w, h, colors ) { |
|
|
|
const points3 = ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 90, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern162( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 180, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern163( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 270, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern164( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 360, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern165( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 90, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern166( x, y, w, h, colors ) { |
|
|
|
const points3 = ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
const points4 = ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
const pattern4 = createPolygon( points4, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern167( x, y, w, h, colors ) { |
|
|
|
const points4 = ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points5 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern4 = createPolygon( points4, colors[ 1 ] ); |
|
const pattern5 = createPolygon( points5, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern4 ); |
|
canvas.appendChild( pattern5 ); |
|
|
|
} |
|
|
|
function drawPattern168( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points5 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
const pattern5 = createPolygon( points5, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern5 ); |
|
|
|
} |
|
|
|
function drawPattern169( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points3 = ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern170( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points3 = ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
const points4 = ( x + w / 2 ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h / 2 ).ts(); |
|
const points5 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
const pattern3 = createPolygon( points3, colors[ 1 ] ); |
|
const pattern4 = createPolygon( points4, colors[ 1 ] ); |
|
const pattern5 = createPolygon( points5, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
canvas.appendChild( pattern5 ); |
|
|
|
} |
|
|
|
function drawPattern171( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 90, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern4 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 270, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern172( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 180, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern4 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 360, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern173( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 180, 270, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern4 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 0, 90, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern174( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 270, 360, colors[ 1 ] ); |
|
const pattern2 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern3 = createRect( x, y + w / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern4 = createCircleAdvanced( x + w / 2, y + w / 2, w / 2, 90, 180, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
canvas.appendChild( pattern4 ); |
|
|
|
} |
|
|
|
function drawPattern175( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern176( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern177( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern178( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern179( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x, y, w / 2, h, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern180( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x + w / 2, y, w / 2, h, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern181( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x, y, w, h / 2, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern182( x, y, w, h, colors ) { |
|
|
|
const points2 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createRect( x, y + h / 2, w, h / 2, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern183( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 0 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern184( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 0 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern185( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 0 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern186( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
const points2 = ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createPolygon( points2, colors[ 0 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern187( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern188( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern189( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern190( x, y, w, h, colors ) { |
|
|
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w / 2 ).ts() + ',' + ( y + h / 2 ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
|
|
} |
|
|
|
function drawPattern191( x, y, w, h, colors ) { |
|
|
|
const points0 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points1 = ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createPolygon( points0, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern192( x, y, w, h, colors ) { |
|
|
|
const points0 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points1 = ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createPolygon( points0, colors[ 1 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 0 ] ); |
|
const pattern2 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern193( x, y, w, h, colors ) { |
|
|
|
const points0 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createPolygon( points0, colors[ 0 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 1 ] ); |
|
const pattern2 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern194( x, y, w, h, colors ) { |
|
|
|
const points0 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts() + ' ' + ( x ).ts() + ',' + ( y + h ).ts(); |
|
const points1 = ( x ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y ).ts() + ' ' + ( x + w ).ts() + ',' + ( y + h ).ts(); |
|
|
|
const pattern0 = createPolygon( points0, colors[ 1 ] ); |
|
const pattern1 = createPolygon( points1, colors[ 0 ] ); |
|
const pattern2 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 1 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern195( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createEllipse( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern2 = createEllipse( x + w / 2, y + h / 2, w / 4, h / 4, colors[ 0 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
|
|
} |
|
|
|
function drawPattern196( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createEllipse( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern2 = createEllipse( x + w / 2, y + h / 2, w / 4, h / 4, colors[ 0 ] ); |
|
const pattern3 = createRect( x, y + h / 2, w / 2, h / 2, colors[ 0 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern197( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createEllipse( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern2 = createEllipse( x + w / 2, y + h / 2, w / 4, h / 4, colors[ 0 ] ); |
|
const pattern3 = createRect( x, y, w / 2, h / 2, colors[ 0 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern198( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createEllipse( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern2 = createEllipse( x + w / 2, y + h / 2, w / 4, h / 4, colors[ 0 ] ); |
|
const pattern3 = createRect( x + w / 2, y, w / 2, h / 2, colors[ 0 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern199( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createEllipse( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern2 = createEllipse( x + w / 2, y + h / 2, w / 4, h / 4, colors[ 0 ] ); |
|
const pattern3 = createRect( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 0 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern200( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createEllipse( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern2 = createEllipse( x + w / 2, y + h / 2, w / 4, h / 4, colors[ 0 ] ); |
|
const pattern3 = createRect( x, y + h / 4, w / 2, h / 2, colors[ 0 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern201( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createEllipse( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern2 = createEllipse( x + w / 2, y + h / 2, w / 4, h / 4, colors[ 0 ] ); |
|
const pattern3 = createRect( x + w / 4, y, w / 2, h / 2, colors[ 0 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern202( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createEllipse( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern2 = createEllipse( x + w / 2, y + h / 2, w / 4, h / 4, colors[ 0 ] ); |
|
const pattern3 = createRect( x + w / 2, y + h / 4, w / 2, h / 2, colors[ 0 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
function drawPattern203( x, y, w, h, colors ) { |
|
|
|
const pattern0 = createRect( x, y, w, h, colors[ 0 ] ); |
|
const pattern1 = createEllipse( x + w / 2, y + h / 2, w / 2, h / 2, colors[ 1 ] ); |
|
const pattern2 = createEllipse( x + w / 2, y + h / 2, w / 4, h / 4, colors[ 0 ] ); |
|
const pattern3 = createRect( x + w / 4, y + h / 2, w / 2, h / 2, colors[ 0 ] ); |
|
|
|
canvas.appendChild( pattern0 ); |
|
canvas.appendChild( pattern1 ); |
|
canvas.appendChild( pattern2 ); |
|
canvas.appendChild( pattern3 ); |
|
|
|
} |
|
|
|
const patterns = [ |
|
|
|
drawPattern001, drawPattern002, drawPattern003, drawPattern004, drawPattern005, drawPattern006, drawPattern007, drawPattern008, drawPattern009, drawPattern010, |
|
drawPattern011, drawPattern012, drawPattern013, drawPattern014, drawPattern015, drawPattern016, drawPattern017, drawPattern018, drawPattern019, drawPattern020, |
|
drawPattern021, drawPattern022, drawPattern023, drawPattern024, drawPattern025, drawPattern026, drawPattern027, drawPattern028, drawPattern029, drawPattern030, |
|
drawPattern031, drawPattern032, drawPattern033, drawPattern034, drawPattern035, drawPattern036, drawPattern037, drawPattern038, drawPattern039, drawPattern040, |
|
drawPattern041, drawPattern042, drawPattern043, drawPattern044, drawPattern045, drawPattern046, drawPattern047, drawPattern048, drawPattern049, drawPattern050, |
|
drawPattern051, drawPattern052, drawPattern053, drawPattern054, drawPattern055, drawPattern056, drawPattern057, drawPattern058, drawPattern059, drawPattern060, |
|
drawPattern061, drawPattern062, drawPattern063, drawPattern064, drawPattern065, drawPattern066, drawPattern067, drawPattern068, drawPattern069, drawPattern070, |
|
drawPattern071, drawPattern072, drawPattern073, drawPattern074, drawPattern075, drawPattern076, drawPattern077, drawPattern078, drawPattern079, drawPattern080, |
|
drawPattern081, drawPattern082, drawPattern083, drawPattern084, drawPattern085, drawPattern086, drawPattern087, drawPattern088, drawPattern089, drawPattern090, |
|
drawPattern091, drawPattern092, drawPattern093, drawPattern094, drawPattern095, drawPattern096, drawPattern097, drawPattern098, drawPattern099, drawPattern100, |
|
drawPattern101, drawPattern102, drawPattern103, drawPattern104, drawPattern105, drawPattern106, drawPattern107, drawPattern108, drawPattern109, drawPattern110, |
|
drawPattern111, drawPattern112, drawPattern113, drawPattern114, drawPattern115, drawPattern116, drawPattern117, drawPattern118, drawPattern119, drawPattern120, |
|
drawPattern121, drawPattern122, drawPattern123, drawPattern124, drawPattern125, drawPattern126, drawPattern127, drawPattern128, drawPattern129, drawPattern130, |
|
drawPattern131, drawPattern132, drawPattern133, drawPattern134, drawPattern135, drawPattern136, drawPattern137, drawPattern138, drawPattern139, drawPattern140, |
|
drawPattern141, drawPattern142, drawPattern143, drawPattern144, drawPattern145, drawPattern146, drawPattern147, drawPattern148, drawPattern149, drawPattern150, |
|
drawPattern151, drawPattern152, drawPattern153, drawPattern154, drawPattern155, drawPattern156, drawPattern157, drawPattern158, drawPattern159, drawPattern160, |
|
drawPattern161, drawPattern162, drawPattern163, drawPattern164, drawPattern165, drawPattern166, drawPattern167, drawPattern168, drawPattern169, drawPattern170, |
|
drawPattern171, drawPattern172, drawPattern173, drawPattern174, drawPattern175, drawPattern176, drawPattern177, drawPattern178, drawPattern179, drawPattern180, |
|
drawPattern181, drawPattern182, drawPattern183, drawPattern184, drawPattern185, drawPattern186, drawPattern187, drawPattern188, drawPattern189, drawPattern190, |
|
drawPattern191, drawPattern192, drawPattern193, drawPattern194, drawPattern195, drawPattern196, drawPattern197, drawPattern198, drawPattern199, drawPattern200, |
|
drawPattern201, drawPattern202, drawPattern203 |
|
|
|
]; |
|
|
|
//--- |
|
|
|
function polarToCartesian( cx, cy, radius, angleInDegrees ) { |
|
|
|
const angleInRadians = ( angleInDegrees - 90 ) * MATHPI_180; |
|
|
|
return { |
|
|
|
x: cx + ( radius * Math.cos( angleInRadians ) ), |
|
y: cy + ( radius * Math.sin( angleInRadians ) ) |
|
|
|
}; |
|
|
|
} |
|
|
|
//--- |
|
|
|
function createCanvas( width, height, containerId ) { |
|
|
|
const canvas = document.createElementNS( SVG_NAMESPACE_URI, 'svg' ); |
|
|
|
canvas.setAttribute( 'width', width ); |
|
canvas.setAttribute( 'height', height ); |
|
canvas.setAttribute( 'shape-rendering', SHAPE_RENDERING ); |
|
|
|
document.getElementById( containerId ).appendChild( canvas ); |
|
|
|
return canvas; |
|
|
|
} |
|
|
|
function createRect( x, y, width, height, color, rx = 0, ry = 0, stroke = false, strokeColor = LINE_COLOR, strokeWidth = LINE_WIDTH, strokeLinecap = LINE_CAP ) { |
|
|
|
const rect = document.createElementNS( SVG_NAMESPACE_URI, 'rect' ); |
|
|
|
rect.setAttributeNS( null, 'x', x ); |
|
rect.setAttributeNS( null, 'y', y ); |
|
rect.setAttributeNS( null, 'rx', rx ); |
|
rect.setAttributeNS( null, 'ry', ry ); |
|
rect.setAttributeNS( null, 'width', width ); |
|
rect.setAttributeNS( null, 'height', height ); |
|
rect.setAttributeNS( null, 'fill', color ); |
|
|
|
if ( stroke === true ) { |
|
|
|
rect.setAttributeNS( null, 'stroke', strokeColor ); |
|
rect.setAttributeNS( null, 'stroke-width', strokeWidth ); |
|
rect.setAttributeNS( null, 'stroke-linecap', strokeLinecap ); |
|
|
|
} |
|
|
|
return rect; |
|
|
|
} |
|
|
|
function createCircle( cx, cy, radius, color, stroke = false, strokeColor = LINE_COLOR, strokeWidth = LINE_WIDTH, strokeLinecap = LINE_CAP ) { |
|
|
|
const circle = document.createElementNS( SVG_NAMESPACE_URI, 'circle' ); |
|
|
|
circle.setAttributeNS( null, 'cx', cx ); |
|
circle.setAttributeNS( null, 'cy', cy ); |
|
circle.setAttributeNS( null, 'r', radius ); |
|
circle.setAttributeNS( null, 'fill', color ); |
|
|
|
if ( stroke === true ) { |
|
|
|
circle.setAttributeNS( null, 'stroke', strokeColor ); |
|
circle.setAttributeNS( null, 'stroke-width', strokeWidth ); |
|
circle.setAttributeNS( null, 'stroke-linecap', strokeLinecap ); |
|
|
|
} |
|
|
|
return circle; |
|
|
|
} |
|
|
|
//https://jsbin.com/quhujowota/1/edit?html,js,output |
|
function createCircleAdvanced( cx, cy, radius, startAngle, endAngle, color, stroke = false, strokeColor = LINE_COLOR, strokeWidth = LINE_WIDTH, strokeLinecap = LINE_CAP ) { |
|
|
|
const path = createPath( color, stroke, strokeColor, strokeWidth, strokeLinecap ); |
|
|
|
const start = polarToCartesian( cx, cy, radius, endAngle ); |
|
const end = polarToCartesian( cx, cy, radius, startAngle ); |
|
|
|
const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'; |
|
|
|
const d = [ |
|
'M', cx, cy, |
|
'L', start.x, start.y, |
|
'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y, |
|
'L', cx, cy |
|
].join( ' ' ); |
|
|
|
path.setAttributeNS( null, 'd', d ); |
|
|
|
return path; |
|
|
|
} |
|
|
|
function createEllipse ( cx, cy, radiusX, radiusY, color, stroke = false, strokeColor = LINE_COLOR, strokeWidth = LINE_WIDTH, strokeLinecap = LINE_CAP ) { |
|
|
|
const ellipse = document.createElementNS( SVG_NAMESPACE_URI, 'ellipse' ); |
|
|
|
ellipse.setAttributeNS( null, 'cx', cx ); |
|
ellipse.setAttributeNS( null, 'cy', cy ); |
|
ellipse.setAttributeNS( null, 'rx', radiusX ); |
|
ellipse.setAttributeNS( null, 'ry', radiusY ); |
|
ellipse.setAttributeNS( null, 'fill', color ); |
|
|
|
if ( stroke === true ) { |
|
|
|
ellipse.setAttributeNS( null, 'stroke', strokeColor ); |
|
ellipse.setAttributeNS( null, 'stroke-width', strokeWidth ); |
|
ellipse.setAttributeNS( null, 'stroke-linecap', strokeLinecap ); |
|
|
|
} |
|
|
|
return ellipse; |
|
|
|
} |
|
|
|
function createPolygon( points, color, stroke = false, strokeColor = LINE_COLOR, strokeWidth = LINE_WIDTH, strokeLinecap = LINE_CAP ) { |
|
|
|
const polygon = document.createElementNS( SVG_NAMESPACE_URI, 'polygon' ); |
|
|
|
polygon.setAttributeNS( null, 'points', points ); |
|
polygon.setAttributeNS( null, 'fill', color ); |
|
|
|
if ( stroke === true ) { |
|
|
|
polygon.setAttributeNS( null, 'stroke', strokeColor ); |
|
polygon.setAttributeNS( null, 'stroke-width', strokeWidth ); |
|
polygon.setAttributeNS( null, 'stroke-linecap', strokeLinecap ); |
|
|
|
} |
|
|
|
return polygon; |
|
|
|
} |
|
|
|
function createPath( color = 'transparent', stroke = false, strokeColor = LINE_COLOR, strokeWidth = LINE_WIDTH, strokeLinecap = LINE_CAP ) { |
|
|
|
const path = document.createElementNS( SVG_NAMESPACE_URI, 'path' ); |
|
|
|
path.setAttributeNS( null, 'd', '' ); |
|
path.setAttributeNS( null, 'fill', color ); |
|
|
|
if ( stroke === true ) { |
|
|
|
path.setAttributeNS( null, 'stroke', strokeColor ); |
|
path.setAttributeNS( null, 'stroke-width', strokeWidth ); |
|
path.setAttributeNS( null, 'stroke-linecap', strokeLinecap ); |
|
|
|
} |
|
|
|
return path; |
|
|
|
} |
|
|
|
//--- |
|
|
|
function setPathAttribute( path, pathAttributes, command, position ) { |
|
|
|
pathAttributes += command + ' ' + position.x + ' ' + position.y + ' '; |
|
path.setAttribute( 'd', pathAttributes ); |
|
|
|
return pathAttributes; |
|
|
|
} |
|
|
|
function closePath( path, pathAttributes ) { |
|
|
|
pathAttributes += 'Z'; |
|
path.setAttribute( 'd', pathAttributes ); |
|
|
|
return pathAttributes; |
|
|
|
} |
|
|
|
//--- |
|
|
|
init(); |
|
initGUI(); |
|
|
|
//--- |
