{"id":13575301,"url":"https://github.com/mrmcsoftware/ShaderSearch","last_synced_at":"2025-04-04T22:30:46.811Z","repository":{"id":163812063,"uuid":"595031792","full_name":"mrmcsoftware/ShaderSearch","owner":"mrmcsoftware","description":"An HTML file to search for and play Shadertoy shaders by using shadertoy.com's API.","archived":false,"fork":false,"pushed_at":"2023-06-07T06:14:43.000Z","size":1167,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-05T11:41:59.504Z","etag":null,"topics":["api","css","html","javascript","jquery","search","search-interface","shadertoy","shadertoy-api"],"latest_commit_sha":null,"homepage":"https://www.youtube.com/MrMcSoftware/videos","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mrmcsoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-01-30T08:53:00.000Z","updated_at":"2023-11-24T08:13:58.000Z","dependencies_parsed_at":"2024-01-16T20:25:30.118Z","dependency_job_id":"5e73f374-acf4-4367-812d-a6d8e634dd04","html_url":"https://github.com/mrmcsoftware/ShaderSearch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmcsoftware%2FShaderSearch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmcsoftware%2FShaderSearch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmcsoftware%2FShaderSearch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmcsoftware%2FShaderSearch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrmcsoftware","download_url":"https://codeload.github.com/mrmcsoftware/ShaderSearch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247260330,"owners_count":20909990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","css","html","javascript","jquery","search","search-interface","shadertoy","shadertoy-api"],"created_at":"2024-08-01T15:00:59.806Z","updated_at":"2025-04-04T22:30:45.654Z","avatar_url":"https://github.com/mrmcsoftware.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"Shadertoy Search Tool\n=====================\n\nThis is an HTML file for searching shadertoy for shaders and playing them.\nIt will only find shaders with the \"**Public + API**\" privacy setting (Refer\nto the [Limitations](#limitations) section).\n\n\u003cimg src=\"screenshot.png\"\u003e\u003cbr\u003e\n\u003cimg src=\"screenshot2.png\"\u003e\u003cbr\u003e\n\u003cimg src=\"screenshot3.png\"\u003e\n\n(I purposely used an older browser for the screenshots because I prefer the 3d\nlook over the flat button look of some modern browsers.)\n\n## Setup and Running\n\n\u003e**OPTIONAL:**  If you want a gradual transition between Dark and Light modes,\n\u003euncomment the line containing **transition: color 300ms, background-color 300ms;**\n\nThere are various ways of starting up this webpage.  If your browser is in your\nsearch path you could simply do the following, for example, at a command prompt:\n\n    firefox stoysearch.html\n\nOr you could start your browser and use your browser's \"Open File\" (or\nequivalent) menu option.  Or you could use the **`file:///`** URI/protocol and\nspecify the whole path.\n\nFor a live demo, go to **https://mrmcsoftware.github.io/ShaderSearch** but do\ntry to use your own copy instead.\n\n\u003eNote: Ignore **`index.html`** and **`jquery.min.js`** .  They are only there\n\u003eto make Github Pages work.\n\n## User Interface\n\nWhile using this tool, you can press the **?** (Help) button to get the\nfollowing information.\n\n### Mouse Button Actions\n\nClick **left mouse button** on a shader thumbnail to run the shader in place.\nTip: when you do this, move the pointer out of the thumbnail area to allow the\ncontrol panel to go away.  If you desire the control panel to always be shown,\nhold down the **Ctrl** key on keyboard while doing the above mouse click.  If\nyou want any possible sound muted, hold down both **Ctrl** and **Shift** while\ndoing the above mouse click.  If you want to see a larger version of the\nthumbnail (and not run the shader), hold down the **Shift** key while doing the\nabove mouse click.  Note: once you run a shader, these options are no longer\navailable for that shader unless you reload the page via either the\n\"**Reload page**\" option of the \"**Results Per Page**\" button or any other\nfeature that refreshes the page.  Larger versions are also shown if\n\"**1 per page**\" is selected with the **Results Per Page** button.  Note:\nthumbnails may all be different sizes, due to the fact that the thumbnail is\ncreated at the point of their shader's run (and characteristics (i.e. window\nsize) of that run) in which their shader is saved.  By the way, be aware that\nsome shaders don't have thumbnails, so sometimes you might see the standard\nbrowser's no image icon.\n\nClick the **middle mouse button** (unless you specified \"**nomiddle=true**\" in\nthis page's URL, in which case it's the **right mouse button**) on a shader\nthumbnail to show a message box containing information about that shader.  If\nyou want to see the shader tabs (code) associated with that shader, hold down\nthe **Ctrl** key while doing the above mouse click.  Note: you may have to tell\nyour browser to allow popups for this page.\n\n### URL Parameters\n\nUse these like this, for example (If specifying this on a terminal commandline,\nyou probably will need to escape the special characters, depending on your OS\n(for example: **`stoysearch.html?dark=false\\\u0026sthumb=true`** if using Linux,\n**`\"stoysearch.html?dark=false\u0026sthumb=true\"`** if using Windows)):\n\n    stoysearch.html?dark=false\u0026sthumb=true\u0026sort=3\u0026search=sdf\n\n  - **dark=false** - Turn off dark mode\n  - **slinks=false** - Turn off showing shadertoy.com links\n  - **sthumb=true** - Use smaller thumbnails\n  - **nomiddle=true** - Use right mouse button instead of middle\n  - **help=false** - Don't display the help button\n  - **rangeselect=off** - Don't show range page buttons\n  - **showfilters=true** - Show the search filter checkboxes\n  - **sort=`{number}`** - Select the search sort ({number} is dropdown item number (1-5))\n  - **npp=`{number}`** - Select number of shaders per page ({number} is dropdown item number (1-8))\n  - **cols=`{number}`** - Select number of columns (search results)\n  - **filters=`{string}`** - Specify list of search filters to apply ({string} is a comma separated list with same names as the checkboxes)\n  - **search=`{string}`** - Search using the specified {string} text\n\n### Text Boxes, Some Buttons, and Some Checkboxes\n\nTo search for shaders using a text string, type it into the top-left text box.\nYou can either press \"**Enter**\" on keyboard after you type the string or click\nthe Search button.  If you leave the box blank, all shaders with the API\nenabled will be returned.\n\nOnce you have some shader results, shader result number (of the first shader on\nthe page) and page number text boxes will be shown.  If you would like to jump\nto a specific shader result number or page number, type it into the appropriate\nbox and press **Enter**.  Note: you can also click the range page buttons (if\n**rangeselect=off** isn't specified) to jump to a new page.  And, of course,\nthe **Next Page** and **Previous Page** buttons can be clicked to navigate the\npages.\n\nNarrow down the search results by selecting various filters.  If the filter\ncheckboxes aren't already visible, click \"**Show Filters**\".  Select any\ncombination (can select more than 1) of filters.  Then run the search.\n\u003eNote: soundinput is the same as shadertoy.com's Microphone, soundoutput is GPU\n\u003eSound, and musicstream is Soundcloud.\n\n### Shadertoy.com Links\n\nIf \"**Show links**\" is checked, each shader search result will have an \"**L**\"\nnext to it.  Click on the **L** to open up a new browser tab to it's\nshadertoy.com page.\n\n## Limitations and Why You Would Want to Use This Tool\u003ca name=\"limitations\"\u003e\u003c/a\u003e\n\nThis search tool will ONLY find/show shaders that have the API permission set.\nThis isn't due to this search tool, it is due to shadertoy.com's API and the\nobvious desire to allow the shader's author to decide how/if their shader can\nbe accessed.  Because of this, this search tool isn't a replacement for\nshadertoy.com by any means - just a useful tool.  For example, because it\ndoesn't automatically run any shader, it can be faster, and perhaps more\nimportantly safer (ever have your computer or graphics card crash due to a\nshader?  I have), to go through the search results.\n\n## Possible Improvements\n\nThere are some things that could be improved (either by me or by someone else\ninclined to do so).  ~~One improvement would be to remove the reliance on\n**jQuery**.  The hardest part would be to replace **getJSON** with the\nequivalent **AJAX** (XMLHttpRequest) code or even the fetch function.  The rest\nwould be easy.~~  I've made two versions that don't use jQuery.\n**`stoysearch-no-jquery.html`** uses fetch instead of .getJSON and\n**`stoysearch-no-jquery-no-fetch.html`** uses XMLHttpRequest instead of .getJSON\nor fetch (some browsers don't have fetch).\n\nYou might notice that my javascript code isn't always consistent in how it does\ncertain things.  This is partly because I believe in reusing code I've already\nwritten and partly because I wanted to show that there are many different ways\nof doing the same thing.  Much of github is meant for teaching/learning after\nall.  My only requirement is that the different ways must not require the most\nup-to-date browsers.  But you might want consistency, so feel free to make it\nconsistent.\n\n**`stoysearch.html`** currently gets **jquery.min.js** from Google (ajax.googleapis.com).\nYou may want to change that to wherever you choose to get jQuery from (or you\nmay want to change which version of jQuery is used).  You can even download\njquery.min.js to the same directory as stoysearch.html and avoid getting it\nfrom the internet every time.  Or use **`stoysearch-no-jquery.html`** or\n**`stoysearch-no-jquery-no-fetch.html`** to avoid jQuery altogether.\n\n## Author\n\nMark Craig\n[https://www.youtube.com/MrMcSoftware](https://www.youtube.com/MrMcSoftware)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrmcsoftware%2FShaderSearch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrmcsoftware%2FShaderSearch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrmcsoftware%2FShaderSearch/lists"}