mirror of
https://github.com/hydra-synth/hydra.git
synced 2025-12-19 13:19:58 +01:00
web-editor added choo
This commit is contained in:
ojack
102
frontend/web-editor/_index.js
Executable file
102
frontend/web-editor/_index.js
Executable file
@@ -0,0 +1,102 @@
|
||||
const PatchBay = require('./src/patch-bay/pb-live.js')
|
||||
const HydraSynth = require('hydra-synth')
|
||||
const Editor = require('./src/editor/editor.js')
|
||||
const loop = require('raf-loop')
|
||||
const P5 = require('./src/p5-wrapper.js')
|
||||
const Gallery = require('./src/gallery.js')
|
||||
const Menu = require('./src/menu.js')
|
||||
const attachEvents = require('./src/attachEvents.js')
|
||||
const log = require('./src/editor/log.js')
|
||||
const repl = require('./src/repl.js')
|
||||
|
||||
function init () {
|
||||
window.pb = pb
|
||||
window.P5 = P5
|
||||
|
||||
var canvas = document.getElementById('hydra-canvas')
|
||||
// canvas.width = window.innerWidth * window.devicePixelRatio
|
||||
// canvas.height = window.innerHeight * window.devicePixelRatio
|
||||
canvas.width = window.innerWidth
|
||||
canvas.height = window.innerHeight
|
||||
canvas.style.width = '100%'
|
||||
canvas.style.height = '100%'
|
||||
canvas.style.imageRendering = 'pixelated'
|
||||
|
||||
let isIOS =
|
||||
(/iPad|iPhone|iPod/.test(navigator.platform) ||
|
||||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
|
||||
!window.MSStream;
|
||||
|
||||
let precisionValue = isIOS ? 'highp' : 'mediump'
|
||||
|
||||
var pb = new PatchBay()
|
||||
var hydra = new HydraSynth({ pb: pb, canvas: canvas, autoLoop: false, precision: precisionValue})
|
||||
var editor = new Editor()
|
||||
var menu = new Menu({ editor: editor, hydra: hydra})
|
||||
log.init()
|
||||
|
||||
// get initial code to fill gallery
|
||||
var sketches = new Gallery(function(code, sketchFromURL) {
|
||||
editor.setValue(code)
|
||||
repl.eval(code)
|
||||
|
||||
// if a sketch was found based on the URL parameters, dont show intro window
|
||||
if(sketchFromURL) {
|
||||
menu.closeModal()
|
||||
} else {
|
||||
menu.openModal()
|
||||
}
|
||||
})
|
||||
menu.sketches = sketches
|
||||
|
||||
attachEvents ({
|
||||
editor: editor,
|
||||
gallery: sketches,
|
||||
menu: menu,
|
||||
repl: repl,
|
||||
log: log
|
||||
})
|
||||
|
||||
// define extra functions (eventually should be added to hydra-synth?)
|
||||
|
||||
|
||||
|
||||
pb.init(hydra.captureStream, {
|
||||
server: window.location.origin,
|
||||
room: 'iclc'
|
||||
})
|
||||
|
||||
var engine = loop(function(dt) {
|
||||
hydra.tick(dt)
|
||||
}).start()
|
||||
|
||||
}
|
||||
|
||||
window.onload = init
|
||||
|
||||
// add extra functions to the web editor
|
||||
// hush clears what you see on the screen
|
||||
// window.hush = () => {
|
||||
// solid().out()
|
||||
// solid().out(o1)
|
||||
// solid().out(o2)
|
||||
// solid().out(o3)
|
||||
// render(o0)
|
||||
// }
|
||||
|
||||
// window.loadScript = (url = "") => {
|
||||
// const p = new Promise((res, rej) => {
|
||||
// var script = document.createElement("script");
|
||||
// script.onload = function () {
|
||||
// log.log(`loaded script ${url}`);
|
||||
// res();
|
||||
// };
|
||||
// script.onerror = (err) => {
|
||||
// log.log(`error loading script ${url}`, "log-error");
|
||||
// res()
|
||||
// };
|
||||
// script.src = url;
|
||||
// document.head.appendChild(script);
|
||||
// });
|
||||
// return p;
|
||||
// };
|
||||
107
frontend/web-editor/index.js
Executable file → Normal file
107
frontend/web-editor/index.js
Executable file → Normal file
@@ -1,102 +1,13 @@
|
||||
const PatchBay = require('./src/patch-bay/pb-live.js')
|
||||
const HydraSynth = require('hydra-synth')
|
||||
const Editor = require('./src/editor/editor.js')
|
||||
const loop = require('raf-loop')
|
||||
const P5 = require('./src/p5-wrapper.js')
|
||||
const Gallery = require('./src/gallery.js')
|
||||
const Menu = require('./src/menu.js')
|
||||
const attachEvents = require('./src/attachEvents.js')
|
||||
const log = require('./src/editor/log.js')
|
||||
const repl = require('./src/repl.js')
|
||||
const devtools = require('choo-devtools')
|
||||
const choo = require('choo')
|
||||
const store = require('./src/store.js')
|
||||
const mainView = require('./src/views/main.js')
|
||||
|
||||
function init () {
|
||||
window.pb = pb
|
||||
window.P5 = P5
|
||||
|
||||
var canvas = document.getElementById('hydra-canvas')
|
||||
// canvas.width = window.innerWidth * window.devicePixelRatio
|
||||
// canvas.height = window.innerHeight * window.devicePixelRatio
|
||||
canvas.width = window.innerWidth
|
||||
canvas.height = window.innerHeight
|
||||
canvas.style.width = '100%'
|
||||
canvas.style.height = '100%'
|
||||
canvas.style.imageRendering = 'pixelated'
|
||||
|
||||
let isIOS =
|
||||
(/iPad|iPhone|iPod/.test(navigator.platform) ||
|
||||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
|
||||
!window.MSStream;
|
||||
|
||||
let precisionValue = isIOS ? 'highp' : 'mediump'
|
||||
|
||||
var pb = new PatchBay()
|
||||
var hydra = new HydraSynth({ pb: pb, canvas: canvas, autoLoop: false, precision: precisionValue})
|
||||
var editor = new Editor()
|
||||
var menu = new Menu({ editor: editor, hydra: hydra})
|
||||
log.init()
|
||||
|
||||
// get initial code to fill gallery
|
||||
var sketches = new Gallery(function(code, sketchFromURL) {
|
||||
editor.setValue(code)
|
||||
repl.eval(code)
|
||||
|
||||
// if a sketch was found based on the URL parameters, dont show intro window
|
||||
if(sketchFromURL) {
|
||||
menu.closeModal()
|
||||
} else {
|
||||
menu.openModal()
|
||||
}
|
||||
})
|
||||
menu.sketches = sketches
|
||||
|
||||
attachEvents ({
|
||||
editor: editor,
|
||||
gallery: sketches,
|
||||
menu: menu,
|
||||
repl: repl,
|
||||
log: log
|
||||
})
|
||||
|
||||
// define extra functions (eventually should be added to hydra-synth?)
|
||||
const app = choo()
|
||||
app.use(devtools())
|
||||
app.use(store)
|
||||
app.route('/', mainView)
|
||||
app.mount('body')
|
||||
|
||||
|
||||
|
||||
pb.init(hydra.captureStream, {
|
||||
server: window.location.origin,
|
||||
room: 'iclc'
|
||||
})
|
||||
|
||||
var engine = loop(function(dt) {
|
||||
hydra.tick(dt)
|
||||
}).start()
|
||||
|
||||
}
|
||||
|
||||
window.onload = init
|
||||
|
||||
// add extra functions to the web editor
|
||||
// hush clears what you see on the screen
|
||||
// window.hush = () => {
|
||||
// solid().out()
|
||||
// solid().out(o1)
|
||||
// solid().out(o2)
|
||||
// solid().out(o3)
|
||||
// render(o0)
|
||||
// }
|
||||
|
||||
// window.loadScript = (url = "") => {
|
||||
// const p = new Promise((res, rej) => {
|
||||
// var script = document.createElement("script");
|
||||
// script.onload = function () {
|
||||
// log.log(`loaded script ${url}`);
|
||||
// res();
|
||||
// };
|
||||
// script.onerror = (err) => {
|
||||
// log.log(`error loading script ${url}`, "log-error");
|
||||
// res()
|
||||
// };
|
||||
// script.src = url;
|
||||
// document.head.appendChild(script);
|
||||
// });
|
||||
// return p;
|
||||
// };
|
||||
File diff suppressed because it is too large
Load Diff
7
frontend/web-editor/src/store.js
Normal file
7
frontend/web-editor/src/store.js
Normal file
@@ -0,0 +1,7 @@
|
||||
module.exports = function countStore (state, emitter) {
|
||||
state.count = 0
|
||||
emitter.on('increment', function (count) {
|
||||
state.count += count
|
||||
emitter.emit('render')
|
||||
})
|
||||
}
|
||||
72
frontend/web-editor/src/views/main.js
Normal file
72
frontend/web-editor/src/views/main.js
Normal file
@@ -0,0 +1,72 @@
|
||||
const html = require('choo/html')
|
||||
|
||||
module.exports = function mainView (state, emit) {
|
||||
return html`
|
||||
<body>
|
||||
<div id="hydra-ui">
|
||||
|
||||
<canvas id="hydra-canvas">
|
||||
</canvas>
|
||||
<canvas id="audio-canvas">
|
||||
</canvas>
|
||||
</div>
|
||||
<div id="info-container" class="">
|
||||
<div id="modal">
|
||||
<div id="modal-header">
|
||||
<div><!--<i class="fas fa-bars icon"></i>--></div>
|
||||
<div>
|
||||
<i id ="run-icon" class="fas fa-play-circle icon" title="Run all code (ctrl+shift+enter)" aria-hidden="true"></i>
|
||||
<i id="share-icon" title="upload to gallery" class="fas fa-upload icon" aria-hidden="true"></i>
|
||||
<i id="clear-icon" title="clear all" class="fa fa-trash icon" aria-hidden="true"></i>
|
||||
<i id="shuffle-icon" title="show random sketch" class="fas fa-random icon" aria-hidden="true"></i>
|
||||
<i id="mutator-icon" title="make random change" class="fas fa-dice icon" aria-hidden="true"></i>
|
||||
<i id="close-icon" class="fas fa-question-circle icon" aria-hidden="true"></i>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="modal-body">
|
||||
<div id="modal-content">
|
||||
<h1> hydra</h1>
|
||||
<h3> live coding networked visuals </h3>
|
||||
<br> ///////////////////////////////////////////////////////////<br>
|
||||
<h4> 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.</h4>
|
||||
<h4> To get started: <ol>
|
||||
<li>Close this window </li>
|
||||
<li>Change some numbers </li>
|
||||
<li>Type Ctrl + Shift + Enter </li>
|
||||
</ol>
|
||||
</h4>
|
||||
|
||||
<p> ///////////////////////////////////////////////////////////<br><br><br>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. </p>
|
||||
<p>Features: <ul>
|
||||
<li>Written in javascript and compatible with other javascript libraries</li>
|
||||
<li>Available as a platform as well as a set of standalone modules </li>
|
||||
<li>Cross-platform and requires no installation (runs in the browser)</li>
|
||||
<li>Also available as a package for live coding from within atom text editor</li>
|
||||
<li>Experimental and forever evolving !! </li>
|
||||
</ul>
|
||||
|
||||
<p class="align-right"> Created by <a class="olivia" href="https://twitter.com/_ojack_" target="_blank">olivia.</a> </p>
|
||||
<p> For more information and instructions, see:
|
||||
<a href="https://github.com/ojack/hydra#Getting-Started" target="_blank">the documentation on github</a>,
|
||||
<a href="https://ojack.xyz/hydra-functions/" target="_blank">a list of hydra functions</a>,
|
||||
<!-- <a href="https://github.com/ojack/hydra/blob/master/docs/funcs.md" target="_blank">documentation</a>, -->
|
||||
<a href="https://twitter.com/hydra_patterns" target="_blank">a gallery of user-generated sketches</a>,
|
||||
<a href="http://pixeljam.glitch.me/" target="_blank">PIXELJAM collaborative editor</a>,
|
||||
<a href="https://hydra-book.naotohieda.com/#/" target="_blank">Hydra Book</a>, and more <a href="https://github.com/ojack/hydra/blob/master/examples/README.md">tutorials and examples.</a></p>
|
||||
<p>There is also an active <a href="https://discord.gg/ZQjfHkNHXC" target="_blank">Discord server</a> and <a href="https://www.facebook.com/groups/1084288351771117/" target="_blank">facebook group</a> for hydra users+contributors.</p>
|
||||
|
||||
|
||||
|
||||
<p> If you enjoy using Hydra, please consider <a href="https://opencollective.com/hydra-synth" target="_blank">supporting continued development ${'<3 <3'} </a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
`
|
||||
|
||||
function onclick () {
|
||||
emit('increment', 1)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user