-
Notifications
You must be signed in to change notification settings - Fork 354
Tutorial
The first step to use Seriously.js is to load up the necessary scripts. You'll need both the Seriously.js core code as well as any effects you'll need.
<!DOCTYPE html>
<html>
<head><title>Seriously.js Tutorial</title></head>
<body>
<!-- page content goes here -->
<script src="seriously.js"></script>
<script src="effects/seriously.vignette.js"></script>
<script src="effects/seriously.hue-saturation.js"></script>
<script src="effects/seriously.split.js"></script>
<script>
//main code goes here
</script>
</body>
</html>
You can load your scripts inside the head element, but it's often
a good idea to load them at the end of the page so the browser can render
some of your content before waiting for the scripts to load. It makes the
page feel faster to the user.
Seriously.js is smart enough that you don't need to load seriously.js before loading the script code, but you are responsible for making sure that all these scripts are loaded before any of your custom code creates any Seriously objects.
When you finally deploy your work, you may want to put all these scripts in a single file and minify it so that it loads up really fast. If you're going to use video, you'll already have plenty of data to load, and every millisecond counts on the web.
Now you're going to need some video or images for Seriously.js to process.
In this example, we'll use an <img> element, though you can just as easily
use a <video> or a <canvas>. And we'll add an id attribute to make
it easier to reference our image.
<img src="images/colorbars.png" id="colorbars"/>
We also need a <canvas> element on which to draw the results. Again, we'll
set an id attribute, and we also need to add height and width.
<canvas id="canvas" width="640" height="480"></canvas>
You'll usually want to hide your inputs using CSS, usually by setting
display: none. Or you can create the element in Javascript code and
just avoid attaching it to the DOM. But for now, we'll leave it visible
so you can see what's going on behind the scenes.
Now it's time to write the Javascript code that will create and render our composition. The simplest composition we can create is to connect a source directly to a target.
// declare our variables
var seriously, // the main object that holds the entire composition
colorbars, // a wrapper object for our source image
target; // a wrapper object for our target canvas
seriously = new Seriously();
// Create a source object by passing a CSS query string.
colorbars = seriously.source('#colorbars');
// now do the same for the target canvas
target = seriously.target('#canvas');
Now that we have all our objects created, let's connect them and start rendering.
// connect any node as the source of the target. we only have one.
target.source = colorbars;
seriously.go();
When we first create the composition network and connect everything,
Seriously doesn't start rendering. By calling seriously.go(), we tell
Seriously to keep rendering everything in our network whenever any videos
are playing or effect parameters change.
You should now see two copies of the color bars. The second copy is our output canvas. Seriously.js will scale the output to whatever dimensions you give it. So try changing the height and width of the canvas and see what happens.
So far, our example is looking pretty boring, so let's add some effects. We'll start with a vignette effect. We've already loaded up the script for the vignette plugin, so now all we need is a simple script to create the effect node and connect it to our composition in the right place.
Creating effect nodes is similar to creating source and target nodes, but even easier, since all we need is the name of the effect we want.
var vignette = seriously.effect('vignette');
Now we need to connect everything in the right order. A Seriously composition is a network of sources, targets and effects. All of them are nodes, and images pass from one node to the next, with each effect node modifying the image and passing it along until it reaches a target node, which displays the result. Effect nodes have one or more image sources and output a single image. Source nodes have no inputs, and target nodes have no output.
In our example, we want to pass our image from the source node to the vignette node, and from the vignette node to the target. So the whole script should look like this:
// declare our variables
var seriously, // the main object that holds the entire composition
colorbars, // a wrapper object for our source image
vignette, // a vignette effect
target; // a wrapper object for our target canvas
seriously = new Seriously();
colorbars = seriously.source('#colorbars');
target = seriously.target('#canvas');
vignette = seriously.effect('vignette');
// connect all our nodes in the right order
vignette.source = colorbars;
target.source = vignette;
seriously.go();
Reload the page, and you should see the color bars with the vignetting, a darkening around the edges.