updated intro text

frontend/web-editor/src/stores/text-elements.js

@@ -13,25 +13,27 @@ module.exports = {
             },
             info: {
                 title: 'hydra',
-                subtitle: 'live coding networked visuals',
+                subtitle: 'live coding video synth',
-                description: 'Hydra is a platform for live coding visuals, in which each connected browser window can be used as a node of a modular and distributed video synthesizer.',
+                description: 'Hydra is live code-able video synth and coding environment that runs directly in the browser. It is free and open-source and made for beginners and experts alike.',
                 'get-started-title': 'To get started:',
                 'get-started-list': [
                     'Close this window',
                     'Change some numbers',
                     'Type Ctrl + Shift + Enter'
                 ],
-                'description-detailed': 'Built using WebRTC (peer-to-peer web streaming) and WebGL, 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.',
+                'description-detailed': 'Hydra is written in JavaScript and compiles to WebGL under the hood. The syntax is inspired by analog modular synthesis, in which chaining or patching a set of transformations together generates a visual result.',
-                'features': 'Features:',
+                'uses': 'Hydra can be used:',
-                'features-list': [
+                'uses-list': [
-                    'Written in javascript and compatible with other javascript libraries',
+                    'to mix and add effects to camera feeds, screenshares, live streams, and videos',
-                    'Available as a platform as well as a set of standalone modules',
+                    'to create generative and audio-reactive visuals, and share them online with others',
-                    'Cross-platform and requires no installation (runs in the browser)',
+                    'in combination with other javascript libraries such as P5.js, Tone.js, THREE.js, or gibber',
-                    'Also available as a package for live coding from within atom text editor',
+                    'to add interactive video effects to a website',
-                    'Experimental and forever evolving !!'
+                    'to experiment with and learn about video feedback, fractals, and pixel operations',
+                    'to stream video between browsers and to live-jam with others online'
                 ],
                 'author': 'Created by <a {{author}}>olivia.</a>',
-                'more-info': 'For more information and instructions, see: <a {{docs}}>the online documentation</a>, <a {{functions}}>a list of hydra functions</a>, <a {{repo}}>the source code on github</a>, <a {{gallery}}>a gallery of user-generated sketches</a>, <a {{pixeljam}}>PIXELJAM collaborative editor</a>, <a {{hydra-book}}>Hydra Book</a>, and more <a {{tutorials}}>tutorials and examples.</a>',
+                'more-info': 'For more information and instructions, see: <a {{docs}}>the interactive documentation</a>, <a {{functions}}>a list of hydra functions</a>, <a {{garden}}>the community database of projects and tutorials</a>, <a {{gallery}}>a gallery of user-generated sketches</a>, and <a {{repo}}>the source code on github</a>,',
+
                 'more-info-forums': 'There is also an active <a {{discord}}>Discord server</a> and <a {{facebook}}>facebook group</a> for hydra users+contributors.',
                 'support': 'If you enjoy using Hydra, please consider  <a {{open-collective}} >supporting continued development <3 </a>.'
             }

frontend/web-editor/src/views/info.js

@@ -31,9 +31,10 @@ module.exports = function mainView(state, emit) {
         <p> ///////////////////////////////////////////////////////////<br><br><br>
           ${t('info.description-detailed')}
         </p>
-        <p>${t('info.features')}<ul>
+        <p>${t('info.uses')}<ul>
-        ${t('info.features-list', { returnObjects: true }).map((text) => html`<li>${text}</li>`)}
+        ${t('info.uses-list', { returnObjects: true }).map((text) => html`<li>${text}</li>`)}
-        </ul>
+        </ul></p>
+       
            <p class="align-right">${raw(t('info.author', { author: `href=https://ojack.xyz class=olivia target=_blank`}))}</p>
            <p>${raw(t('info.more-info', {
              docs: link("https://hydra.ojack.xyz/docs"),
@@ -41,6 +42,7 @@ module.exports = function mainView(state, emit) {
              gallery: link("https://twitter.com/hydra_patterns"),
              repo: link("https://github.com/hydra-synth/hydra"),
              pixeljam: link("http://pixeljam.glitch.me/"),
+             garden: link("https://hydra.ojack.xyz/garden"),
              'hydra-book': link("https://hydra-book.glitch.me/"),
              "tutorials": link("https://github.com/ojack/hydra/blob/master/examples/README.md")
            }))}</p>
@@ -60,6 +62,9 @@ module.exports = function mainView(state, emit) {
 }
 
 
+// <!---<p>${t('info.features')}<ul>
+// ${t('info.features-list', { returnObjects: true }).map((text) => html`<li>${text}</li>`)}
+// </ul></p>--->
 // module.exports = function mainView(state, emit) {
 //     return html`
 //   <div id="info-container" class="${state.showInfo ? "" : "hidden"}">