import { interpolateBuPu , interpolatePurples , interpolateRdPu } from 'd3-scale-chromatic' ; import { DripsyProvider } from 'dripsy' ; import React from 'react' ; import { Dot , dripsyTheme } from '../drispy' ; import { TestRunner } from '../TestRunner' ; const targetSize = 10 ; export function SierpinskiTriangle ( { testIndex , x = 0 , y = 0 , depth = 0 , s : _s = 200 } ) { let s = _s ; if ( Dot ) { if ( s <= targetSize ) { let fn ; switch ( depth ) { case 1 : fn = interpolatePurples ; break ; case 2 : fn = interpolateBuPu ; break ; case 3 : default : fn = interpolateRdPu ; } const color = fn ( ( testIndex * Math . random ( ) ) / 20 ) ; return ( < Dot sx = { { borderBottomColor : color , borderRightWidth : targetSize / 2 , borderBottomWidth : targetSize / 2 , borderLeftWidth : targetSize / 2 , marginLeft : - targetSize / 2 , marginTop : - targetSize / 2 , transform : [ { translateX : x , translateY : y } ] , } } />); } s /= 2 ; return ( < React . Fragment > < SierpinskiTriangle depth = { 1 } testIndex = { testIndex } s = { s } x = { x } y = { y - s / 2 } /> < SierpinskiTriangle depth = { 2 } testIndex = { testIndex } s = { s } x = { x - s } y = { y + s / 2 } /> < SierpinskiTriangle depth = { 3 } testIndex = { testIndex } s = { s } x = { x + s } y = { y + s / 2 } /> < /React.Fragment>); } else { return < span style = { { color : 'white' } } > No implementation available < /span>; } } const StitchesTest = ( ) => { return ( < DripsyProvider theme = { dripsyTheme } > < TestRunner numberOfRuns = { 1 } iterationN = { 2 } TestComponent = { SierpinskiTriangle as any } / > < /DripsyProvider>); } ; export default StitchesTest ;