{"id":19323091,"url":"https://github.com/ojack/hydra-workshop","last_synced_at":"2025-02-24T05:42:34.347Z","repository":{"id":70843060,"uuid":"312541750","full_name":"ojack/hydra-workshop","owner":"ojack","description":null,"archived":false,"fork":false,"pushed_at":"2020-11-13T14:29:01.000Z","size":6,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-06T06:12:05.982Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/ojack.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":"2020-11-13T10:17:05.000Z","updated_at":"2020-11-19T14:38:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"cf7813ef-00ab-40d8-b2a6-800e7454cef6","html_url":"https://github.com/ojack/hydra-workshop","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/ojack%2Fhydra-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ojack%2Fhydra-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ojack%2Fhydra-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ojack%2Fhydra-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ojack","download_url":"https://codeload.github.com/ojack/hydra-workshop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240427141,"owners_count":19799466,"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":[],"created_at":"2024-11-10T01:45:03.667Z","updated_at":"2025-02-24T05:42:34.291Z","avatar_url":"https://github.com/ojack.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Workshop: Code and Democratic Tools\nIntersections, Feminism, Technology \u0026 Digital Humanities network (IFTe http://ifte.network/)\n\n13.11.2020\n\nled by [Olivia Jack](https://ojack.xyz)\n\n## Intro to hydra\nHydra is a browser-based platform for live coding visuals, in which each connected browser window can be used as a node of a modular and distributed video synthesizer.\n\nBuilt using WebRTC (peer-to-peer web streaming) and WegGL, hydra allows each connected browser/device/person to output a video signal or stream, and receive and modify streams from other browsers/devices/people. The API is inspired by analog modular synthesis, in which multiple visual sources (oscillators, cameras, application windows, other connected windows) can be transformed, modulated, and composited via combining sequences of functions.\n\n## Getting started\n\nGo to [https://hydra.ojack.xyz](https://hydra.ojack.xyz) (works best using Chrome or Chromium) and follow the instructions on screen.\n\nOther editor commands:\n* CTRL-Enter: run a line of code\n* CTRL-Shift-Enter: run all code on screen (saves code to the URL)\n* ALT-Enter: run a block\n* CTRL-Shift-H: hide or show code\n* CTRL-Shift-F: format code using [Prettier](https://prettier.io/)\n* CTRL-Shift-S: Save screenshot and download as local file\n* CTRL-Shift-G: Share to the user gallery (if available). Shares to [@hydra_patterns](https://twitter.com/hydra_patterns)\n\n\n### Basic functions\nrender an oscillator with parameters frequency, sync, and rgb offset. Type the following into the editor and then press 'CTRL-shift-Enter'\n```\nosc(2, 0.1, 0.8).out()\n```\nosc() renders the oscillator, and .out() tells the computer to send the output to the screen.\n\nrotate the oscillator 0.8 radians:\n```\nosc(20, 0.1, 0.8).rotate(0.8).out()\n```\npixelate the output of the above function:\n```\nosc(20, 0.1, 0.8).rotate(0.8).pixelate(20, 30).out()\n```\n\nTry experimenting with any of the functions under the 'source', 'geometry' or 'color' categories [here](https://ojack.xyz/hydra-functions/).\nEach chain of functions must always start with a 'source' function, and then can be followed by any number of 'geometry' and 'color' functions.\n```\ngradient().rotate(0, 2.6).repeat(3, 3, 0.5).out()\n```\n\n#### Using external sources\nIn addition to internal sources for , such as osc(), shape(), gradient(),\nhydra can use external sources such as a webcam, window of another application, video,\n\nThere are four source buffers that can be used to connect to outside visuals, named s0, s1, s2, s3.\n\ninit webcam in source buffer 's0':\n```\ns0.initCam() // initialize a webcam in source buffer s0\n```\n\nrender the output of s0 to the screen\n```\nsrc(s0).out()\n```\n\nwebcam kaleidoscope:\n```\ns0.initCam() // initialize a webcam in source buffer s0\nsrc(s0).kaleid(4).out() // render the webcam to a kaleidoscope\n```\nnote that 's0.initCam()' only needs to be called once in order to initialize the camera\n\nYou can also use a browser tab or application window as an input texture (chrome only):\n```\ns1.initScreen()\nsrc(s1).out()\n```\n\nrender screen tab:\n```\ns0.initScreen()\nsrc(s0).out()\n```\n\n\n### Blending sources together\n\nBy default, the environment contains four separate output buffers that can each render different graphics.  The outputs are accessed by the variables o0, o1, o2, and o3.\n\nrender to output buffer o1:\n```\nosc(8, 0.1, 0.3).out(o1)\nrender(o1) // render the contents of o1\n```\nIf no output is specified in out(), the graphics are rendered to buffer o0.\nto show all render buffers at once:\n```\nrender()\n```\n\nRender the camera to output buffer o0, and an oscillator to output buffer o1:\n```\ns0.initCam() // initialize a webcam in source buffer s0\nsrc(s0).out(o0) // render the webcam in buffer o0\n\nosc(8, 0.1, 0.3).out(o1)\n\nrender() // show all four outputs\n```\n\nThe output buffers can then be mixed and composited to produce what is shown on the screen.\nStart with buffer o0, blend with o1, and show the result at o2:\n```\nsrc(o0).blend(o1).out(o2)\n```\n\nThe composite functions blend(), diff(), mult(), and add() perform arithmetic operations to combine the input texture color with the base texture color, similar to photoshop blend modes. See 'blend' functions at: https://ojack.xyz/hydra-functions/\n\nYou can also composite multiple sources together within the same output (no need to render to a separate buffer):\n```\nosc(10)\n  .rotate(0.5)\n  .diff(osc(200))\n  .out()\n```\n\n### Modulation\n\nWhile blending functions combine the colors of two sources, modulation functions use the colors of one texture to affect the coordinates of the other texture.\nThis creates a sort of displacement or warping effect.\n\nmodulate(texture, amount) uses the red and green channels of the input texture to modify the x and y coordinates of the base texture. More about modulation at: https://lumen-app.com/guide/modulation/\n```\nosc(21, 0).modulate(o1).out(o0)\nosc(40).rotate(1.57).out(o1)\n```\n\nYou can also composite multiple sources together:\n```\nosc(10)\n  .rotate(0.5)\n  .diff(osc(200))\n  .out()\n```\n\n## Connecting to remote streams\nAny hydra instance can use other instances/windows containing hydra as input sources, as long as they are connected to the internet and not blocked by a firewall. Hydra uses webrtc (real time webstreaming) under the hood to share video streams between open windows. The included module rtc-patch-bay manages connections between connected windows, and can also be used as a standalone module to convert any website into a source within hydra.\n\nTo begin, open hydra simultaneously in two separate windows.\nIn one of the windows, set a name for the given patch-bay source:\n```\npb.setName(\"myGraphics\")\n```\nThe title of the window should change to the name entered in setName().\n\nFrom the other window, initiate \"myGraphics\" as a source stream.\n```\ns0.initStream(\"myGraphics\")\n```\nrender to screen:\n```\ns0.initStream(\"myGraphics\")\nsrc(s0).out()\n```\nThe connections sometimes take a few seconds to be established; open the browser console to see progress.\nTo list available sources, type the following in the console:\n```\npb.list()\n```\n\n## Links and resources\n\n#### Hydra resources:\n* [list of hydra functions](https://ojack.xyz/hydra-functions/)\n* [documentation on github](https://github.com/ojack/hydra)\n* [tutorials and examples](https://github.com/ojack/hydra/tree/master/examples)\n* [gallery of user-generated sketches](https://twitter.com/hydra_patterns?lang=es)\n* [Hydra Book](https://hydra-book.naotohieda.com/#/)\n* [a talk about the motivations for creating hydra](https://www.youtube.com/watch?v=cw7tPDrFIQg).\n\n #### Libraries and tools used:\n * [Regl: functional webgl](http://regl.party/)\n * glitch.io: hosting for sandbox signalling server\n * codemirror: browser-based text editor\n * simple-peer\n\n ### Inspiration:\n * Space-Time Dynamics in Video Feedback (1984). [video](https://www.youtube.com/watch?v=B4Kn3djJMCE) and [paper](http://csc.ucdavis.edu/~cmg/papers/Crutchfield.PhysicaD1984.pdf) by Jim Crutchfield about using analog video feedback to model complex systems.\n * [Satellite Arts Project (1977) - Kit Galloway and Sherrie Rabinowitz](http://www.ecafe.com/getty/SA/)\n * [Sandin Image Processor](http://www.audiovisualizers.com/toolshak/vidsynth/sandin/sandin.htm)\n * [kynd - reactive buffers experiment](https://kynd.github.io/reactive_buffers_experiment/)\n\n #### Related projects:\n * [Lumen app (osx application)](https://lumen-app.com/)\n * [Vsynth (package for MaxMSP)](https://cycling74.com/forums/vsynth-package)\n * [VEDA (VJ system within atom)](https://veda.gl/)\n * [The Force](https://videodromm.com/The_Force/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fojack%2Fhydra-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fojack%2Fhydra-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fojack%2Fhydra-workshop/lists"}