├── .github └── FUNDING.yml ├── index.html ├── index.js └── readme.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [tholman] 2 | ko_fi: tholman 3 | custom: ['https://www.buymeacoffee.com/tholman'] 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mondrian And Me 7 | 11 | 96 | 97 | 98 | 99 |
100 |
101 | watch me making this: 102 | youtube 108 |
109 | 🍅 110 | 115 |
116 |
117 |
118 | A Useless Web Project | More Paint Toys 119 |
120 |
121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | ;(() => { 2 | const canvas = document.querySelector("#canvas") 3 | const context = canvas.getContext("2d") 4 | 5 | canvas.width = window.innerWidth 6 | canvas.height = window.innerHeight 7 | 8 | context.lineWidth = 10 9 | const rectangles = [] 10 | let splitDirectionVertical = true 11 | 12 | canvas.addEventListener("click", onRectangleClick) 13 | 14 | function drawRectangles() { 15 | rectangles.forEach((rectangle) => { 16 | context.fillStyle = rectangle.color 17 | context.beginPath() 18 | context.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height) 19 | context.closePath() 20 | context.fill() 21 | context.stroke() 22 | }) 23 | } 24 | 25 | function onRectangleClick(e) { 26 | const clickedIndex = rectangles.findIndex((rectangle) => { 27 | if ( 28 | e.x > rectangle.x && 29 | e.x < rectangle.x + rectangle.width && 30 | e.y > rectangle.y && 31 | e.y < rectangle.y + rectangle.height 32 | ) { 33 | return true 34 | } 35 | }) 36 | 37 | if (clickedIndex === -1) { 38 | splitDirectionVertical = !splitDirectionVertical 39 | return 40 | } 41 | 42 | const clickedRectangle = rectangles[clickedIndex] 43 | 44 | rectangles.splice(clickedIndex, 1) 45 | 46 | splitRectangleAt(clickedRectangle, { 47 | x: e.x - clickedRectangle.x, 48 | y: e.y - clickedRectangle.y, 49 | }) 50 | } 51 | 52 | function splitRectangleAt(rectangle, position) { 53 | if (splitDirectionVertical) { 54 | rectangles.push({ 55 | x: rectangle.x, 56 | y: rectangle.y, 57 | width: position.x, 58 | height: rectangle.height, 59 | color: getColor(), 60 | }) 61 | rectangles.push({ 62 | x: rectangle.x + position.x, 63 | y: rectangle.y, 64 | width: rectangle.width - position.x, 65 | height: rectangle.height, 66 | color: getColor(), 67 | }) 68 | } else { 69 | rectangles.push({ 70 | x: rectangle.x, 71 | y: rectangle.y, 72 | width: rectangle.width, 73 | height: position.y, 74 | color: getColor(), 75 | }) 76 | rectangles.push({ 77 | x: rectangle.x, 78 | y: rectangle.y + position.y, 79 | width: rectangle.width, 80 | height: rectangle.height - position.y, 81 | color: getColor(), 82 | }) 83 | } 84 | 85 | splitDirectionVertical = !splitDirectionVertical 86 | drawRectangles() 87 | } 88 | 89 | function getColor() { 90 | const colors = [ 91 | "#EBEBED", 92 | "#EBEBED", 93 | "#EBEBED", 94 | "#EBEBED", 95 | "#EBEBED", 96 | "#EBEBED", 97 | "#EBEBED", 98 | "#EBEBED", 99 | "#EBEBED", 100 | "#EBEBED", 101 | "#EBEBED", 102 | "#EBEBED", 103 | "#EBEBED", 104 | "#C53632", 105 | "#3E4984", 106 | "#F8DD67", 107 | ] 108 | return colors[Math.floor(Math.random() * colors.length)] 109 | } 110 | 111 | rectangles.push({ 112 | x: 0, 113 | y: 0, 114 | width: window.innerWidth, 115 | height: window.innerHeight, 116 | color: "#EBEBED", 117 | }) 118 | drawRectangles() 119 | })() 120 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Mondrian And Me 2 | A "Useless Website" honoring Piet Mondrian's fantastic art. 3 | 4 | - Originally live coded on twitch https://www.twitch.tv/timbuildsuselesswebsites 5 | - Hosted @ https://mondrianandme.com/ 6 | - Support me /w a coffee https://www.buymeacoffee.com/tholman 7 | - Support me on GitHub https://github.com/sponsors/tholman/ 8 | --------------------------------------------------------------------------------