How do you run a processingJS script on an html page? Could someone send me a test .html and any auxiliary code files for me to get an idea?
Let's say I wanted to run this rectangle:
rect(50,50,50,50);
To add to Kevin's answer, if you want to use the Processing.js library with javascript rather than pde (java) code this may make it a little easier to dive in.
*Note that some javascript folks may cringe at the use of with(obj){code}, but I give this as an example to unclutter the code and make it less verbose. Use your own judgement depending on the circumstances.
Also make sure that the processing library is in the same folder as your file with the below code and the name of the file is correct in the below code.
Enjoy! :)
<html>
<head>
</head>
<body>
<canvas id="output-canvas"></canvas>
<script src="processing.1.4.8.js"></script>
<script> ( function () {
new Processing ( document.getElementById ( "output-canvas"), sketch );
function sketch ( pjs ) {
// some initilization if you prefer
// set the canvas size
pjs.size ( 800, 600 );
// ( 0, 0, 0, 0 ) - if you want a transparent sketch over some backdrop
pjs.background ( 255, 255, 255, 255 );
// make the ugly pjs go away
with ( pjs ) {
// red stroke
stroke ( 255, 0, 0 );
// thick border
strokeWeight ( 5 );
// yellow fill
fill ( 255, 240, 0 );
// draw a rectangle
rect ( 50, 50, 300, 200 );
}
}
} ) (); </script>
</body>
</html>
Everything you want to know is on this page: JavaScript Quick Start | Processing.js
But basically, you need to do create an html file that loads the Processing.js library, then write Processing.js code and load the .pde file into a canvas tag on that page. It looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Hello Web - Processing.js Test</title>
<script src="processing-1.3.6.min.js"></script>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based sketch:</p>
<canvas data-processing-sources="hello-web.pde"></canvas>
</body>
</html>
The easiest way to do that is to use JavaScript mode from the Processing editor (you might have to use version 2.2.1), then click run. You can then view the files created by the editor (go to view > sketch folder) to get a better idea of what's going on under the hood.
Related
I have been trying to use the library to make material for my students.
https://glorious.codes/demo
I want to make animations, but I cannot understand how to use or where to use the library. I think it is necessary to use it from an html file. install the library but when opening the page it only creates the text that I place as a test.
I am using WebStorm as IDE, creating a node.js project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/#glorious/demo/dist/gdemo.min.css">
<script src="node_modules/#glorious/demo/dist/gdemo.min.js"></script>
</head>
<body>
</body>
</html>
Can someone guide me on what program or how to work with the library. It is the first time that I try to perform animation with JavaScript.
If you are new to web technologies, there is a pretty steep curve here. Personally, I'd take a step back and familiarize myself with the tools. If you have a minute, check out W3school's site. There is plenty of information to get you moving quickly with HTML/CSS/JS. Specifically focus on CSS selectors and Javascript and this will make a lot more sense.
Now for the question you asked:
First, NodeJS isn't necessarily required to achieve your goal. You can create a simple HTML file and reference the Glorious libraries directly from the web. See what I did in the <script> and <link> elements below.
Once you have the libraries loaded, you need to:
Instantiate the library and assign it to a variable to use in the future (see const demo = new GDemo(...))
Tell the library where in your HTML you want it to render the animation. In this case it is a <div/> with id='container'.
Tell the library what to render. This is the gDemo.openApp(...) section. I pulled this example directly from this library's GitHub page.
const gdemo = new GDemo('#container');
const code = 'console.log("Hello World!");'
gdemo
.openApp('editor', {
minHeight: '400px',
windowTitle: 'demo.js'
})
.write(code, {
onCompleteDelay: 2000
})
.openApp('terminal', {
minHeight: '400px',
promptString: '$'
})
.command('node ./demo')
.respond('Hello World!')
.command('')
.end();
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/#glorious/demo/dist/gdemo.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/#glorious/demo/dist/gdemo.min.css" rel="stylesheet" />
</head>
<body>
<div id="container"></div>
</body>
</html>
Could you please detail a bit more the problem. From your example you just created an empty page. What are you trying to put in your page ? Tables ?
Also I would suggest the use of framework like Materials (https://material.io/components) within React if you are starting a Js project from scratch except if you have something specific in this lib you really want to display.
Hy
I'm very new to canvas, I'm trying to learn how to use fabricjs but I can't get even the very basic example to work and it's quite frustrating.
I downloaded the fabricjs-1.4.8.zip file and the only file I'm using is dist/fabric.min.js,
here is my html code
<html>
<head>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="fabric.js-1.4.8/dist/fabric.js"></script>
<script tye="text/javascript" src="test.js"></script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
</body>
</html>
In first place I didn't include jquery, but after seeing many examples looked like that could do the trick, but it didn't for me, maybe I'm including a wrong version?
and this is my test.js file
var canvas = new fabric.Canvas('myCanvas');
// create a rectangle with angle=45
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);
I can se the border of my canvas element, but no rectangle inside.
Can someone see what I'm doing wrong? thanks
It looks like your canvas is 200 x 100. But you're trying to draw a rectangle 100 pixels from the top. Your code probably works, but the rectangle doesn't show up because it's drawn at the bottom of the canvas. Try changing this line
top: 100
to this:
top: 0
UPDATE
If this doesn't work at first, it could be because the DOM hasn't loaded before your script runs. You can put your code in a jQuery document ready listener like so:
$(document).ready(function(){
//Your code here...
});
This will ensure that the canvas element is actually ready to be used by the time your script fires. Best of luck!
I'm trying to get familiar with tracking.js, but when I try to run the very same example given on the project's page (http://trackingjs.com/docs.html#introduction), nothing happens.
Google-chrome doesn't even shows the prompt asking if I want to allow the page to access to my webcam. The same thing happens for Firefox.
I have already ran the other examples from the tracking.js-master/ package, and the only one that fails is the one described on the tutorial, which I've added.
Below is the code which I copied and pasted from the tracking.js intro page to my first_tracking.html file.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tracking.js - first tracking</title>
<script src="../build/tracking-min.js"></script>
</head>
<body>
<p>This shows in the browser</p>
<video id="myVideo" width="400" height="300" preload autoplay loop muted></video>
<script>
var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
colors.on('track', function(event) {
if (event.data.length === 0) {
// No colors were detected in this frame.
} else {
event.data.forEach(function(rect) {
console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
});
}
});
tracking.track('#myVideo', colors);
</script>
</body>
</html>
Has anyone tried and succeeded in running the introduction examples listed on the tracking.js page and have any pointers?
Research: Most of the stuff found on a google search relate to Google Analytics, Node.js and other JS frameworks. I also found some people suggesting setting the preload option to auto, resulting in preload="auto", but it didn't work.
I was able to get the example working with the webcam. Here's how.
First, Go into to root tracking.js directory and start a simple server. If you have python installed, try running python -m SimpleHTTPServer, then visit http://localhost:8000/examples/first_tracking.html to see your example, assuming your file is located in the examples directory of the unzipped file. This is important. If you just open the file in your browser, you will get an error: Canvas tainted by cross-origin data
Save the following code to first_tracking.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tracking.js - first tracking</title>
<script src="../build/tracking-min.js"></script>
</head>
<body>
<video id="myVideo" width="400" height="300" preload autoplay loop muted></video>
<script>
var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);
colors.on('track', function(event) {
if (event.data.length === 0) {
// No colors were detected in this frame.
} else {
event.data.forEach(function(rect) {
console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
});
}
});
window.onload = function() {
// note here that 'camera' is set to true, I believe this tells tracking.js to use
// the webcam.
tracking.track('#myVideo', colors, {camera: true});
}
</script>
</body>
</html>
Make sure your server is still running, then visit http://localhost:8000/examples/first_tracking.html and inspect the console. You should see output like the following
260 47 37 47 "cyan" first_tracking.html:18
I recently ran into this problem myself and the issue for me was a missing parameter to the tracking.track() call...
The example online shows this:
tracking.track('#myVideo', colors);
When it should be this:
tracking.track('#myVideo', colors, { camera: true });
Technically Julia's post includes this param so I'm ok with that as the accepted answer, but just in case someone else runs into this problem, this is what fixed it for me. With the camera flag, I was able to run the example without waiting for dom load as well, if that matters for anyone else.
{ camera: true } is missing from the example code. As previous answers mention, include tracking.track('#myVideo', colors, { camera: true });
With the advent of the new HTML5 Canvas, I was wondering if it's possible to draw a HTML section onto the canvas?
The idea is to take a piece of existing HTML code (from the same page, or defined elsewhere) and turn it into graphics.
Something like:
htContext.drawElement(document.getObjectByID("someObj"),0,0);
Firefox has proprietary method drawWindow. With it you can draw the whole document on the canvas. But only in Firefox unfortunately. And also due to security issues you need permissions from the user to do it. So it's suitable only for some kind of internal project.
Here is the sample test page:
<!DOCTYPE html>
<html>
<head>
<title>drawWindow</title>
<script>
window.onload = function(){
netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
document.getElementById('canvas').getContext('2d').drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
}
</script>
</head>
<body>
<h1>Test</h1>
<canvas id="canvas"></canvas>
</body>
</html>
Here's the situation:
Client wants a looping SWF file to pause for two seconds before it begins playing all over again (it's a nice build animation on a logo, but the logo doesn't stay on the screen for very long because the movie repeats so users can't see the logo for long. This is irrelevant, but good back story.)
They provided me with a SWF file, but not FLA. When I asked for the FLA I was told the hard drive that contained the FLA crashed and it cannot be retrieved. So, that is pretty much a dead-end.
Before I go and try to de-compile the SWF and all that fun stuff, I wanted to know if there was any way that this could be done with HTML and Javascript. That is:
Have the SWF loop
Pause the movie for two seconds before it restarts
What do you think?
This isn't easily possible with javascript, but it is very easy if you load the swf into another swf. You then have access to the main timeline of the original swf and you'd be able to control it. If you want to control a movie called targetMovie.swf you can do something like this:
var loader:Loader = new Loader();
loader.load(new URLRequest("targetMovie.swf"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
addChild(loader);
var logoMovie:MovieClip;
function onComplete(evt:Event):void{
logoMovie = MovieClip(loader.content);
// call pauseMovie at end of timeline
logoMovie.addFrameScript(logoMovie.totalFrames-1, pauseMovie);
}
function pauseMovie():void{
logoMovie.stop();
// delay for two seconds;
setTimeout(function(){
logoMovie.play();
}, 2000);
}
You could simulate this entirely in javascript with swfObject. You would need to time how long the animation is, add two seconds, and make that the time before the script restarts. heres a working example with the homestarrunner intro:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn-history/r409/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function(){
startSwf()
})
var restartTime = 24500 //in milliseconds
function stopSwf(){
swfobject.removeSWF("swfLoop");
startSwf();
}
function startSwf() {
$("body").append("<div id='swfLoop'></div>");
swfobject.createSWF({data:"http://homestarrunner.com/newintro.swf", width:400, height:300}, null, "swfLoop");
setTimeout('stopSwf()', restartTime);
}
</script>
</head>
<body></body>
</html>
plug that in here: http://htmledit.squarefree.com/
Try this http://www.permadi.com/tutorial/flashjscommand/