├── README.md ├── LICENSE ├── style.css ├── index.html └── main.js /README.md: -------------------------------------------------------------------------------- 1 | # Scintillating Grid Drawer 2 | A webpage that generates variants of scintillating grid illusion to analyze the existence of scintillating effect on different variations. 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Mustafa İlhan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Web site */ 2 | 3 | body { 4 | font-family: 'Roboto Mono', 'Courier New', Courier, monospace; 5 | font-size: 12; 6 | color: #a73b8f; 7 | background: #fff; 8 | overflow: hidden; 9 | margin: 10px; 10 | } 11 | 12 | ::selection { 13 | background: #a93790; 14 | color: #fff; 15 | } 16 | 17 | h1 { 18 | color: #3c1357; 19 | margin-top: 0; 20 | } 21 | 22 | .lead { 23 | color: #61208d; 24 | } 25 | 26 | p { 27 | color: #a73b8f; 28 | } 29 | 30 | .btn-default { 31 | color: #e8638b; 32 | background-color: #fff; 33 | border-color: #e8638b; 34 | } 35 | 36 | .btn-default:hover, 37 | .btn-default:focus, 38 | .btn-default.focus, 39 | .btn-default:active, 40 | .btn-default.active, 41 | .btn-default:active:hover, 42 | .btn-default.active:hover, 43 | .btn-default:active:focus, 44 | .btn-default.active:focus, 45 | .btn-default:active.focus, 46 | .btn-default.active.focus { 47 | color: #fff; 48 | background-color: #e8638b; 49 | border-color: #e8638b; 50 | } 51 | 52 | a, 53 | .btn-link { 54 | color: #f4aea3; 55 | } 56 | 57 | a:hover, 58 | a:focus, 59 | a:active, 60 | .btn-link:hover, 61 | .btn-link:focus, 62 | .btn-link:active { 63 | color: #a73b8f; 64 | text-decoration: underline; 65 | } 66 | 67 | .grid-canvas { 68 | background: #888; 69 | float: left; 70 | } 71 | 72 | .options-area { 73 | margin-left: 10px; 74 | float: left; 75 | width: 475px; 76 | } 77 | 78 | footer { 79 | position: absolute; 80 | bottom: 10px; 81 | color: #f4aea3; 82 | } 83 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Scintillating Grid Illusion Analysis 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 |

Scintillating Grid Illusion Analysis alpha

24 |

This project draws versions of scintillating grid.

25 |

Change values and click 'draw' to update grid.

26 | 27 |
28 | Draw / View on GitHub / Mustafa İlhan 29 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | window.onload = function() { 2 | 3 | /************************************************** 4 | * Global Variables * 5 | **************************************************/ 6 | 7 | var width = $(document).width(), 8 | height = $(document).height(), 9 | canvasMaxWidth = (width - 30) / 2, 10 | canvasMaxHeight = height - 20; 11 | 12 | var debugEnabled = true; 13 | 14 | var svg, 15 | rectGroup, 16 | circleGroup; 17 | 18 | var options = { 19 | backgroundColor: '#888', 20 | rectColor: '#000', 21 | circleColor: '#fff', 22 | rectWidth: 40, 23 | rectHeight: 40, 24 | spaceWidth: 10, 25 | spaceHeight: 10 26 | }; 27 | 28 | function printLog(msg) { 29 | if (debugEnabled) { 30 | console.log(msg); 31 | } 32 | } 33 | 34 | /************************************************** 35 | * Draw Area * 36 | **************************************************/ 37 | 38 | function init() { 39 | $('#optionsData').val(JSON.stringify(options, null, 2)); 40 | 41 | svg = d3.select('#gridCanvas').append('svg').attr('width', canvasMaxWidth).attr('height', canvasMaxHeight); 42 | rectGroup = svg.append('g').attr('id', 'rectGroup'); 43 | circleGroup = svg.append('g').attr('id', 'circleGroup'); 44 | 45 | draw(); 46 | } 47 | 48 | function reset() { 49 | rectGroup.remove(); 50 | circleGroup.remove(); 51 | rectGroup = svg.append('g').attr('id', 'rectGroup'); 52 | circleGroup = svg.append('g').attr('id', 'circleGroup'); 53 | } 54 | 55 | function draw() { 56 | 57 | var posX = 0, 58 | posY = 0, 59 | canvasXMax, 60 | canvasYMax; 61 | 62 | // First draw rects 63 | while (nextColumn(posX)) { 64 | while (nextRow(posY)) { 65 | drawRectangle({ 66 | group: rectGroup, 67 | x: posX, 68 | y: posY, 69 | width: options.rectWidth, 70 | height: options.rectHeight, 71 | color: options.rectColor 72 | }); 73 | posY = calculateNextY(posY); 74 | } 75 | canvasYMax = posY - options.spaceHeight; 76 | posY = 0; 77 | posX = calculateNextX(posX); 78 | } 79 | canvasXMax = posX - options.spaceWidth; 80 | 81 | // Then draw circles 82 | posX = options.rectWidth + (options.spaceWidth / 2); 83 | posY = options.rectHeight + (options.spaceHeight / 2); 84 | while (nextColumn(posX)) { 85 | while (nextRow(posY)) { 86 | drawCircle({ 87 | group: circleGroup, 88 | x: posX, 89 | y: posY, 90 | r: options.spaceHeight / 2 + (options.spaceHeight / 5), 91 | color: options.circleColor 92 | }); 93 | posY = calculateNextY(posY); 94 | } 95 | posY = options.rectHeight + (options.spaceHeight / 2); 96 | posX = calculateNextX(posX); 97 | } 98 | 99 | // Resize canvas 100 | svg.attr("width", canvasXMax).attr("height", canvasYMax); 101 | $("#gridCanvas").css({ 102 | "width": canvasXMax, 103 | "height": canvasYMax, 104 | "background-color": options.backgroundColor 105 | }); 106 | } 107 | 108 | function calculateNextX(posX) { 109 | return posX + options.rectWidth + options.spaceWidth; 110 | } 111 | 112 | function calculateNextY(posY) { 113 | return posY + options.rectHeight + options.spaceHeight; 114 | } 115 | 116 | function nextColumn(posX) { 117 | return calculateNextX(posX) <= canvasMaxWidth; 118 | } 119 | 120 | function nextRow(posY) { 121 | return calculateNextY(posY) <= canvasMaxHeight; 122 | } 123 | 124 | function drawCircle(obj) { 125 | return obj.group.append('circle') 126 | .attr('cx', obj.x) 127 | .attr('cy', obj.y) 128 | .attr('r', obj.r) 129 | .attr('fill', obj.color); 130 | } 131 | 132 | function drawRectangle(obj) { 133 | return obj.group.append('rect') 134 | .attr('x', obj.x) 135 | .attr('y', obj.y) 136 | .attr('width', obj.width) 137 | .attr('height', obj.height) 138 | .attr('fill', obj.color); 139 | } 140 | 141 | /************************************************** 142 | * UI Bindings * 143 | **************************************************/ 144 | 145 | // Init tooltip 146 | $(function() { 147 | $('[data-toggle="tooltip"]').tooltip() 148 | }) 149 | 150 | $('#draw').click(function() { 151 | options = JSON.parse($('#optionsData').val()) || {}; 152 | reset(); 153 | draw(); 154 | }); 155 | 156 | // Draw immediately grid with default values. 157 | init(); 158 | 159 | } 160 | --------------------------------------------------------------------------------