I'm trying to understand the tone/sound generation component of the Plink Chrome Experiment.
This is the de-minified version of what I think controls this.
I was hoping someone could shed some light on this. How are the sound effects achieved?
NB: I am almost certain it's some sort of MIDI-on-the-fly-instrument generation, but I'm not entirely sure.
Related
I've made a website that displays certain posts from Instagram, Facebook and Twitter. The website shows these posts in card form with certain animations and transitions. It works fine on the desktop but the goal is to run it on raspberry PIs and, when run from one of those, the animations and videos stutter. I want to reduce or eliminate the stutter and I'm considering several approaches:
web workers to offload some of the animation calculations to a separate CPU core
dynamic video compression on the server depending on what device will be playing the video
different animation methods
To figure out if any of these would help I'd want to first figure out what is actually causing the stutter but I don't know how to do this. I need a way to figure out what portion of the slowdown is due to what issue. Like, what's the impact of loading the images/videos, the impact of playing the video, of animating the elements etc. What is the best way of doing this?
Here is the working version of the site if that will help with the suggestions. Note that I'm not highly experienced with JS or programing in general and I was just starting out when I created this so it's far from optimal but now I need to figure out the best way to improve it.
This is probably a performance issue, but it could be something else. If you're using VNC Viewer or some other form of remote desktop, it could be because of that. If it's just wired to a monitor, though, it's most likely the fact that the CPU can't handle it. You could try to install a more lightweight browser, because Chromium can really take a toll on the CPU. Go to Chrome DevTools, and go to the performance tab. This should show you basically everything you need to know. I'm not sure if you're using CSS transitions or something else, so I can't really help you there. You could try NetSurf or Dillo as more lightweight browsers, though.
I was wondering if anyone could offer any advice. I'm an expert HTML / CSS coder...but I have little experience with HTML 5. I have read about the great things it can do and I want to learn it, but im not 100% sure of what I can do with it. I have read a lot of articles regarding HTML 5 but none of them go into enough detail about it to answer my questions.
Aside from making layout easier, can it do things like create a rotating banner? I need to take the banner on the main page of this site
www.newmarklearning.com
and make it ipad / iphone compatible. I know I could use Javascript and a host of other coding options, but i fugued this is a great place I could start messing with HTML 5.
Problem is in not really sure if thats the right technology to use. Can HTML 5 / CSS 3 handle such things or am i limited to Javascript / Ajax etc???
Any help pointing me in the right direction would be great.
Thanks
Craig
Regarding animations, CSS3 offers you a lot of options. See e.g. here for more information on 2D Transforms. There exist 3D Transformations, too. However, only Webkit-based browsers support it right now. This site also offers a list of CSS3's new features.
In your case, to have the banner animated, you would have to combine a transform with a transition property (the transition let's it animate, the transform only describes the targeted rotation/scale/skew). If you want a constant animation (not just once), there might be some Javascript necessary.
Well, apart from that, HTML5 offers you a lot more new features, like offline storage or other things. The only problem is that the user has to have a relatively new browser in order to support everything, which sadly isn't the case right now (I know several companies that still run Windows XP with some IE6 or 7 or something like that - any updates disabled :-/)
Edit: Oh, OK, I just took a look at your site. For such a "slideshow", at least a little bit of Javascript will be necessary, to store the current slide etc.. But every smartphone browser should support it without a problem
do you mean the banner on the right? That changes on a timer, or when a number or arrow is clicked?
It would be easiest to recreate that with JavaScript.
Check out:
http://www.dhteumeuleu.com/
If you want some cool ideas
I'm implementing the Soundcloud custom player ( https://github.com/soundcloud/soundcloud-custom-player ) on my site.
I would like to create a spectrum analyzer which moves based on the sound.
I really don't have any idea as to where to start or if it even is possible at all.
Please check out my site to see what I mean: http://dev.upcoming-djs.com
At the right side you see the player and when you click on play it starts playing and the equalizer starts moving.
This is currently a fake effect, but I want it to move with the sound.
All suggestions and/or help is of course much appreciated.
Added my comment as an answer:
You might want to look into the HTML5 Audio Data API. Other than that, you're going to need Flash if you want a legit spectrum analyzer (which, by the way, is what you're asking for. not an equalizer).
Edit:
For anyone interested, I have a quick and dirty demo here: http://kevincennis.com/audio/ (Chrome only)
Source is un-minified, but not particularly well commented. Feel free to steal whatever you want.
The simple answer is this can not be done just using javascript.
Your options are to use to a plugin like flash which has a extensive audio API and is installed on a large percentage of web users browsers as a plugin or to look into the experimental HTML5 audio API.
hope this helps
Sound manager 2
Take a look at
http://www.schillmania.com/projects/soundmanager2/demo/360-player/canvas-visualization.html#hifi=1
I wrote a article about this, if you are interested. http://www.flobii-cc.com/2011/04/simple-fft-web-visualization.html
I used the SoundManager2- API ( need flash) to get the spectrum data and HTML5 Canvas to visualize them.
(The HTML5 Audio API is limited to only a few browsers)
http://chrome.angrybirds.com/
The browser based app is said to be done using Canvas 2D or Web GL.
I tried to view source using chrome by using "Inspect Element" button, but my chrome crashes each time.
I am just trying to find out how one can begin to develop such awesome games. Looking for pointers to online resources,books, and specific tips for beginners.
If you want a book, Foundation HTML5 Canvas: For Games and Entertainment just came out. It is fairly basic but will be useful to you if you are completely new to JavaScript and Canvas.
A faster-paced introduction would be the Mozilla Canvas tutorial, which is very clear.
To get a grasp on going from drawing things to being able to interact with them, I'd suggest my own tutorials on the matter, here.
For a general book on Javascript (regardless of your prior experience), it is probably worth reading Javascript: The Good Parts
As for general advice, I give you the words of Ira Glass:
Nobody tells this to people who are
beginners, I wish someone told me. All
of us who do creative work, we get
into it because we have good taste.
But there is this gap. For the first
couple years you make stuff, it’s just
not that good. It’s trying to be good,
it has potential, but it’s not. But
your taste, the thing that got you
into the game, is still killer. And
your taste is why your work
disappoints you. A lot of people never
get past this phase, they quit. Most
people I know who do interesting,
creative work went through years of
this. We know our work doesn’t have
this special thing that we want it to
have. We all go through this. And if
you are just starting out or you are
still in this phase, you gotta know
its normal and the most important
thing you can do is do a lot of work.
Put yourself on a deadline so that
every week you will finish one story.
It is only by going through a volume
of work that you will close that gap,
and your work will be as good as your
ambitions. And I took longer to figure
out how to do this than anyone I’ve
ever met. It’s gonna take awhile. It’s
normal to take awhile. You’ve just
gotta fight your way through.
When you "view source" (as opposed to using "Inspect Element"), the first meta tag says
name="gwt:property" content="html.renderer=webgl"
So I would conclude that WebGL is indeed being used. (WebGL in fact uses the canvas element, so the answer is technically "Canvas and Web GL" rather than "Canvas or Web GL". But I'm guessing it doesn't use the javascript canvas 2D API.)
When I use Ctrl+Shift+I and click 'Elements', the DOM tree shows that the <div> whose id is "forplay-root" has a child <canvas> element. But I don't know how to verify if it is being used for WebGL or more conventional canvas 2D calls.
A very nice site for learning WebGL is Learning WebGL. In particular, take a look at The Lessons.
I don't know why the page crashes your Chrome page. Are you using a brand-new version of Chrome? The release version didn't support WebGL till fairly recently. (But that wouldn't explain the crash... you just wouldn't see the action.) You may need to submit a bug report for Chrome.
The Angry Birds port was done using the GWT ForPlay library http://code.google.com/p/forplay/
The fancy thing about it is that you can write your game in Java and compile it for Android, WebGL and Flash from the same source. Which is pretty awesome. Check out the Google I/O 2011 presentation on ForPlay for more details http://www.youtube.com/watch?v=F_sbusEUz5w
For a game like that, I would start looking at how to have the same physics, so Box2D is the best starting point.
http://box2d.org/
There are various javascript ports to look at.
The port might be done using the popular libgdx cross-platform library. Its coded in java, but allows you to debug and play the game in your desktop. You basically write the code once in a core-project and it gets linked to four other projects-dektop, Html5, android and iOS. The Html5 version is done with the help of gwt, while the iOS one is done with robovm. You can have a look at it here: libgdx.badlogicgames.com.
I am thinking as a challenge i should write a javascript based game. I want sound, images and input. A background to simulate a screen (like 640x480 with all my images in it) would be useful to separate the rest of the page from the 'game'. What should i look at?
Some things i would need
Framecontrol. A way to get the current time (or delta).
Image, displaying it and moving it. How do i display full image. Knowing pixel access may be cool.
Input A way to lock it in a box (like flash does) is cool.
Sound play simple sounds on demand (like when i get a hit). Several sounds at once would be great
Bottlenecks. What are things that will kill the CPU?
Restrictions. What cant i do? I hear i cant 'sleep' to wait. I must set a callback
Good or best pratice. What are good things i can do to either keep speed up or to lower glitch or compatibility problems.
I'm going to answer this looking at things from a mootools javascript perspective:
Framecontrol. A way to get the current time (or delta).
periodical()
Image, displaying it and moving it. How do i display full image.
setStyles()
Input A way to lock it in a box (like
flash does) is cool.
Plain old CSS
Sound play simple sounds on demand
(like when i get a hit).
Swiff, remote();
Bottlenecks. What are things that will
kill the CPU?
Internet Explorer.
Restrictions.
3D ... ?
What are good things i can do ... to
lower glitch or compatibility
problems.
Use a framework.
As a starting point, you may want to write it for Opera, as Opera provides a game canvas that will help you out.
For some examples of games in javascript:
http://dev.opera.com/articles/view/3d-games-with-canvas-and-raycasting-part/
http://my.opera.com/WebApplications/blog/show.dml/200788
This one is interesting, it is demos of games using the canvas element.
http://www.canvasdemos.com/tag/games/
The best way to see where the problems are is to start writing the game, and then you will see what may be a problem. By looking at demos you can get an idea what performance issues they encountered. For example, a full 3D Doom game will have problems, but, as the first article above explains, there are some ways to optimize for javascript.
Once you get it working with Opera, then you can look at Firefox 3.5+ and Safari, as well as Chrome, and see if you can make some changes to have it work on those. How many platforms it works on depends on how much work you want to do for it. For a proof-of-concept pick the easiest browser for your task.
The best place to start would be to get very familiar with the <canvas> tag (it allows you to draw anything on screen)
This may help a lot:
http://benfirshman.com/projects/jsnes/
its an online NES emulator that renders everything on screen - the source is also available
Hope that helps =)