Coordinated issues for jiku apps, site, etc.
jiku / again-src Goto Github PK
View Code? Open in Web Editor NEWA music presentation and delivery system
Home Page: http://github.com/jiku/again
A music presentation and delivery system
Home Page: http://github.com/jiku/again
Coordinated issues for jiku apps, site, etc.
Something like the pointer here http://zslabs.com/articles/svg-background-fill/... except I think that's interfering... :D
As part of #19.
Performance impact?
(a * b) + (-c) = ((e * d) * b) + (-c) - Wolfram|Alpha
This was partly done with moving Pane to a (wrapped) pure JS lib (around #100). See tests, etc.
Sets same history many times... Tied to new scrollTo and history handling?
As part of #19.
I.e. so panes aren't visible at top or bottom, meaning panes aren't the only types of sections...
Replacing #contact with #footer, etc.
As part of #19.
I.e. through a fadein/-out, or some other type of transition...
Not sure this is desirable though...
Maybe having a massive, sectioned pane would be nicer?
As part of #19.
Still a problem in Chrome, iOS
luis-almeida/unveil#90
https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
https://dzone.com/articles/why-scroll-event-change-ios-8
To menu, etc.
Avoid conflicts with SoundCloud player?
I.e. panY to position X. Sort of like 'Sections' in AS3, so can work from that. Landing positions and relative movement of everything are crucial. Also triggering animations, etc, at points. Set up listener when you know it's going past a point, then remove that listener when it's reached that point. Don't have a continuous listener...
Make it native?
See scrollsound (which uses), skrollr, fullPage, scrollIt, etc.
https://ihatetomatoes.net/skrollr-vs-scrollmagic/
If there's a way to get the total height of the window, i.e. not just what's visible but overflow, etc, maybe this could be emitted to PixiJS to recalculate positioning of containers/sprites... or if they should be created/destroyed, etc.
Have PixiJS cover entire viewport, but not respond to any mouse or touch events...
Instead make a (custom) scrollbar/position listener, that gets scrollbar(/position)... i.e. viewport in relation to content. Maybe just a percentage or ratio value calculated once near the emitter, instead of every time in the listener.
Maybe skrollr or something could then be used for the actual scrolling and placement of content.
So have that PixiJS container transition in/out and freeze/hold in the background while the position/scrollbar is within a given region in terms of Y position.
http://greensock.com/forums/topic/11761-can-i-tie-a-tween-to-a-changing-y-position/
Chrome, OS X
Chrome, iOS
Safari, iOS
Safari, OS X
As part of #19.
https://github.com/janpaepke/ScrollMagic/wiki/Tutorial-:-Anchor-Navigation
As part of #19.
I.e. there's some weird overlap, jumbled trigger points, etc.
Seems connected to section templates being dynamically rendered to body?
Switch from MDG's markdown package to chuangbo:marked.
As part of #19.
At the moment, they won't resize because the event.target is window? Not sure... Maybe PixiContainer has some way of calling a function on allChildren?
Basic interface, track info, etc.
Integrate with Meteor through NPM (webpack:webpack)
Almost deployable... Just have to fix routing, before refactoring.
Use Meteor kit
packages.
Works for the most part. A few conflicts with footer/social
.
lib/router.coffee
Im-/export React component... I.e. make available to Blaze template through reactComponent with
require
and helpers in client/sections.coffee
require
in lib/router.coffee
and helpers in client/sections.coffee
require
(ES5) because of?
CoffeeScript?
CS compiler wouldn't load on starting Meteor...
=> Started proxy.
Killed: 9g plugin `compileCoffeescript` ... \
- [ ] Not exported as an ES5 module or something? Maybe I can export/-pose it in
- `entry/...` somewhere.
- `entry/client/webpack.conf.js`'s (ES5) `module.export`
entry/client/router.jsx
import
in entry/client/router.jsx
.
entry/client/router.jsx
Make plug-in for using WebAudio with or instead of SoundCloud.
Integrate that plug-in with Wavesurfer, SoundCloud, etc API's for (timed) comments, likes, etc.
As part of #22.
Seems it's only an issue with Chrome... Safari works (iOS 9.x, late Oct).
Not sure how to fix this, but...
http://matt-harrison.com/perfect-web-audio-on-ios-devices-with-the-web-audio-api/
https://github.com/maxogden/webaudio-playlist/blob/master/index.js
Stream seems to work (i.e. shows notifications, shows in control center, etc), but there's no sound. Most likely CORS? #69. Outputs to zeroes.
No sound from WebAudio on Chrome iOS (works in Safari iOS, both on OSX)
I can't hear audio on a site I'm making in Chrome (46.0.2490.73) on iOS (9.0.2), both locally and deployed. What's weird is that if I drag up the iOS control center, Chrome is shown as playing the correct URL (with the correct credentials), with a working progress bar that shows the correct time and duration. I can press play/pause, which seems to work correctly too (i.e. pause hides the URL and progress bar).
I'm sure it's not my devices (iPad Air and iPhone 4S). The volume is up and the mute button isn't engaged. I can switch over to Safari iOS and hear the audio, both locally and deployed. (It also works on the desktop.) I can also go to some other sites and have audio work in Chrome.
Pertinent parts of my code,
@audio = document.createElement('audio')
@audio.crossOrigin = 'anonymous'
constructor = window.AudioContext or window.webkitAudioContext
@audioContext = new constructor()
@gainNode = @audioContext.createGain()
@gainNode.connect @audioContext.destination
@source = @audioContext.createMediaElementSource @audio
@source.connect @gainNode
@gainNode.gain.value = 0.8
I also connect an analyzer, etc. I have tried disabling parts, adding browser-policy, etc.
Maybe related to #69? Since it SEEMS to play, but is quiet. I.e. maybe outputs zeroes? Doesn't seem like it, after adding browser-policy, etc.
http://stackoverflow.com/questions/29708513/web-audio-api-no-sound-playing
http://stackoverflow.com/questions/29705874/web-audio-api-not-working-in-chrome-localy?lq=1
Need to debug Chrome iOS 46 (UIWebView) on iOS 9, which is very problematic. Xcode 6 for iOS 7 simulator. Remote debug Safari which used UIWebView then.
See #57, #65, #71 for more on UIWebView.
iOS 9 issues (Possibly fixed in WK)
Use touchend to unlock... See jiku: CS package.
http://www.holovaty.com/writing/ios9-web-audio/
phaserjs/phaser#2095
http://qiita.com/uupaa/items/e5856e3cb2a9fc8c5507
SO demo
Chromium bug filing (Android and createMediaElement)
Visualizer demo: AnalyserNode works on mobile if source of AudioContext is createBufferSource(). Not viable because of streaming!
As part of #19.
C/D: Chrome 46 on OSX 10.10.5 on a Mac Mini 2012 (WebGL supported).
S/D: Safari ? on OSX 10.10.5 on a Mac Mini 2012 (WebGL supported).
FF/D: Firefox 41.0.2 on OSX 10.11 on a Macbook Pro 2009 (WebGL supported).
C/M: Chrome 46 on iOS 9.1 on an iPad Air.
S/M: Safari on iOS 9.1 on an iPhone 6S+ (Xcode simulator).
In Chrome on iPad (and maybe other configs) after converting to kadira:flow-router.
COULD also be that it works, but PIXI background ([Julia, Piano, Leaves], maybe [Cosmic]) isn't rendering on mobile anymore for some reason.
onActivate: (event) =>
# ...
@tweenTo @stage,
type: 'fadeIn'
time: 5
# ...
tweenTo: (target, data) ->
if data.type == 'fadeIn'
target.alpha = 0
target.visible = true
properties = alpha: 1
easingType = TWEEN.Easing.Quadratic.Out
cb = @enableInteractivity
new TWEEN.Tween target
.to properties, data.time * 1000
.easing easingType
.onComplete cb
.start()
Disabling makes it not work in C/D.
Tried making it visible initially, while disabling tween (that would make it visible). This solved the issue again for C/D, but nowhere else.
Seems to be the issue... I.e. resizing from 2400x4800 to 2048x4096, it appeared in all target browsers, not just C/D and S/D. Funnily, it still worked in those. Has to do with PIXI and WebGL preferring textures that are max 4096x4096. See here and here. Experiment: Try resizing to 2049x4097.
For more (on how stuff was debugged, etc), see video project diary, 010.
To avoid messy init. Deprioritized. See #102, which partly covers why.
As part of #19.
As opposed to single-touch scroll? Or 3+ multi-touch scroll?
Maybe some parallax on movement, but not main photo.
Make them more interesting... trails, paths, animated, 4D (transforming shape), whatever...
I.e. so she's perfectly in view and lined up with icons, etc.
Sort of solved... but could be better.
Google and/or other analytics. Not just the usual, but load times, tracks, etc.
[.WebGLRenderingContext-0x7ff0f37eb9b0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering
As part of #19.
Seems to work fine. Tested with
Chrome 46 (iScroll because of UIWebView)
Safari
Chrome 46
Safari 9.0.1
Firefox 41.0.2
As part of #19.
Just something basic... I.e. trigger fadeIn/-Out of boxes...
When refreshing, going to /sectionX, going back from an external link, ..., logo's, panes, background, ... are missing.
With (all of?) the above, you still have to click 'Again' logo to go to /sectionX.
PIXI doesn't render at all.
THREE renders, but interactivity seems missing. Doesn't react to mouse, etc.
PIXI doesn't have time to init. I.e. uses a CB to add onActivate event listener, etc.
has disable-scroll until 'Again' logo is clicked. router.coffee seems fine? I.e. goes to init, emits activate. Neither container or pane onActive work, so might not be a timing issue... If it is, add event listeners quicker or stop using listeners for activation? `Meteor.setTimeout init, 1000` fixes interactivity, etc. Missing text, panes, PIXI, etc.As part of #19.
Seems caused by controller = new ScrollMagic.Controller();
having a globalSceneOptions argument, i.e. { globalSceneOptions: { duration: x }]
. Where x = "100%" || 100
As part of #22.
audio-param
http://stackoverflow.com/questions/28541405/web-audio-soundcloud-crossfade
Intercept history?
http://stackoverflow.com/questions/20325423/use-of-history-back-button-dettection
$(window).on "navigate", (event, data) ->
direction = data.state.direction
if direction is 'back'
# do something
localStorage.back = 1
in body.coffee with other scroll stuff doesn't seem to work. Maybe only on online?
Working on this on https://github.com/jiku/Again/tree/issue-49
I.e. use THREE.js to manipulate woff(2). Convert to JS, etc.
Filters, glitching, etc.
REFS
acko.net, etc.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.