Integrating JavaScript into a Processing program using Processing.js
in
Processing with Other Languages
•
1 years ago
First of all I just want to say that I'm very new to this with almost
none-existent JavaScript knowledge and limited processing skills.
Anyway.
So basically what I want to do is to pull information from a jQuery
plug-in called LiveTwitter ( http://elektronaut.github.com/jquery.livetwitter/) into a processing.js sketch displayed in a web browser.
LiveTwitter is simple, all you need is a div that contains the stream
of tweets and to populate it you use the following line:
$("#tweets").liveTwitter('
tweets containing this word i.e bacon');
Now, if I have a .html document containing something like this:
<canvas id="canvas1" width="1000" height="800"></canvas>
<div id="twitterSearch" class="tweets"></div>
<script id="script1" type="text/javascript">
function sketch(processing) {
processing.setup = function() {
processing.size(800, 600);
processing.fill(0);
};
processing.draw = function() {
processing.strokeWeight(2);
processing.stroke(0, 255, 0);
processing.rect(50, 50, 700, 500);
};
}
var canvas = document.getElementById("
canvas1");
// attaching the sketch to the canvas
var p = new Processing(canvas, sketch);
</script>
Where do I put the $("#tweets").liveTwitter('
word'); line to display
the information in the rectangle i made?
none-existent JavaScript knowledge and limited processing skills.
Anyway.
So basically what I want to do is to pull information from a jQuery
plug-in called LiveTwitter ( http://elektronaut.github.com/jquery.livetwitter/) into a processing.js sketch displayed in a web browser.
LiveTwitter is simple, all you need is a div that contains the stream
of tweets and to populate it you use the following line:
$("#tweets").liveTwitter('
Now, if I have a .html document containing something like this:
<canvas id="canvas1" width="1000" height="800"></canvas>
<div id="twitterSearch" class="tweets"></div>
<script id="script1" type="text/javascript">
function sketch(processing) {
processing.setup = function() {
processing.size(800, 600);
processing.fill(0);
};
processing.draw = function() {
processing.strokeWeight(2);
processing.stroke(0, 255, 0);
processing.rect(50, 50, 700, 500);
};
}
var canvas = document.getElementById("
// attaching the sketch to the canvas
var p = new Processing(canvas, sketch);
</script>
Where do I put the $("#tweets").liveTwitter('
the information in the rectangle i made?
1