draw() function of Processing in Javascript - javascript

Is possible to translate in Javascript the auto-recall function draw() in Processing? How to simulate that behavior in JS?

There isn't a way Javascript on its own but if you download jQuery (https://jquery.com/) you are able to do something that works very similarly to the draw function in processing.
By using a piece of code similar to this you should be able to get a pretty good result:
setInterval(function() {
draw();
}, 1); //So it waits one millisecond untill calling the draw function
function draw() {
//Your code goes in here
}
I hope this works for you!

Related

How to animate js turtle fractals?

I need to draw fractal using js turtle library so, the fractal is animated until it is drawn totally like the python turtle example here
I've tried in the command here. There's a function called animate in the docs but I'm not able to use it, it only waits for some time then draw the fractal without any animation.
I type in the command input animate(demo, 1000)
Is there any suggestion?
if I can't use animation in js turtle Is there another fast easy library that can do the job of drawing fractals?!
You're not using animate() correctly. You can't just apply it to a finished program and expect its behavior to change. Instead, you need to incorporate it into the program. There should be a function that draws a portion of the animation each time it's called. Then have it called over and over by animate(). Rewritting your example:
function square(side) {
repeat(4, function () {
forward(side);
right(90);
});
}
var s = 100
function draw() {
square(s);
right(36)
s -= 10
if (s < 0) {
s = 100
clear()
}
}
function demo() {
hideTurtle();
colour(0, 0, 255, 1);
animate(draw, 500);
}
Invoke it via demo(), don't call animate() on it. It's basic animation unit is the square. If you want to see the squares being drawn, then you need to redesign the code to make the basic animation unit the side of a square (i.e. line.)

Javascript update functions

I'm getting into game developing online. I am trying to make an online FPS game, and I've only gotten to the point where I need to update my character. I am trying to keep my code simple, using only a draw and update function. When the html loads, I execute both: (Is this necessary?)
<body onload='DRAW(); UPDATE();'>
The draw function draws the player to the screen, and the update is supposed to check for a keypress to move the character. I am trying to make the script update using this:
function UPDATE()
{
update = setInterval(UPDATE, 60);
}
and to my knowledge, it is working fine because when I try and edit code in my online IDE (c9.io) which I use to test the site, it freezes when the site is running. I am also calling eventListeners in the draw function. (Is this proper if I want to test for a key down every frame?)
function DRAW()
{
window.addEventListener('keydown', function (e) {
keys.keys = (keys.keys || []);
keys.keys[e.keyCode] = true;
});
window.addEventListener('keyup', function (e){
keys.keys[e.keyCode] = false;
});
}
My questions are:
Is there an easier way to make a script update every frame?
Is there a JavaScript addon (like Three.js) I can use to make
developing this easier on myself?
Any knowledge is greatly appreciated.
This makes everything crash:
function UPDATE()
{
update = setInterval(UPDATE, 60);
}
You are recursively creating a new interval every 60ms; the first time you call UPDATE, you create an interval that creates a new interval every 60ms. All newly create intervals do the same. Don't really know what you actually want to do here.
I am also calling eventListeners in the draw function. (Is this proper
if I want to test for a key down every frame?)
It's fine to create eventlisteners in the draw function, provided you only call this function once. Which I guess you don't. Each time you call DRAW() a new set of eventlisteners will be added, and you really don't want that.
What you need is a form of game loop. Explaining how to create an FPS game is a bit more than I can do, but you can start by looking at this article Anatomy of a video game

loading a new page after a short pause/delay using javascript

Am very new to javascript and am trying to simulate a simple animation where I want to load a html page which has the canvas that has some figures and then wait for 3 seconds and load another set of figures on top of the existing ones for it to look like a simuation. I have tried using the setTimeout but that just doesn't kick in after all the iterations are over. Was wondering if there is anything special that needs to be taken into account with canvas?
Thanks!
You can use the following function of javascript
setTimeout(
function()
{
//do something special
}, 3000);
In this 3000 is 3000 milliseconds , so can increase or decrease it.
You can make a variable displayRects and do in draw function if (displayRects) {
//draw rects
}
And before on document load do
setTimeout(function(){displayRects = true},3000);

ProcessingJS as a js graphics library

I encountered a problem when I was reading the page
http://processingjs.org/articles/PomaxGuide.html
Please note the section "Processing.js as javascript graphics library":
the setup method is rewrote as following:
pjs.setup = function() {
pjs.size(200,200);
// we want to turn off animation, because this is a demo page and it
// would use cpu while not being looked at. Only draw on mousemoves
pjs.noLoop();
}
and Finally, we can call setup() to kickstart the sketch.
pjs.setup();
The question is that the setup() is already override, how can the processing run the loop? there's no such code to invoke draw() loop in setup().
The draw() method gets called automatically according to the value of a field called doLoop inside the Processing class (source code: https://s3.amazonaws.com/github/downloads/processing-js/processing-js/processing-1.4.1.js).
When you call noLoop() you are setting this value to false, disabling in fact the loop. If don't do this, then Processing.js behaves in its default way executing the loop: there's no need to state it explicitly in the setup() method.

JavaScript's version of ActionScript's Event.ENTER_FRAME event?

I am trying to learn JavaScript and I am wondering whether JavaScript has a event listener just like ActionScript's ENTER_FRAME. Basically, I want this event listener to listen "all the time" not just wait for any particular instance (mouse click, keyboard event) of event.
This would probably be worth a look too :
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
You're looking for setInterval(func, time). In the case of making it work like ENTER_FRAME, then you would make time very small. So, if you wanted to imitate a frame rate of say, 30 times a second:
// you will need to make sure you have good scoping around the function param.
setInterval(function(){console.log('enterframe')}, 33)
// 33 is about 1000 milliseconds / 30.
Actually, setInterval is in Flash too -- flash.utils.setInterval.
As a side note -- unfortunately, setInterval (in both Flash and JS) can work against the native refresh rate. In Flash ENTER_FRAME avoids this -- you render when the swf re-renders. In the browser, well, setInterval simply can't do that.
HTML5 provides access to the requestAnimationFrame()
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
var counter = 0;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
console.log(counter++);
// animation code goes here
}());
};
</script>
Credit goes to Keith Peters for helping sort this out. Highly recommend his book 'HTML5 animation with Javascript' by FriendsOfEd:
http://www.apress.com/9781430236658
I am still learning how to convert AS3 to JavaScript, but would it not be this function:
createjs.Ticker.addEventListener("tick", gameLoop);
gameLoop is the custom function that will be called on every 'tick'.
Check out this helpful example of writing a game in Adobe Animate CC using JavaScript instead of AS3: https://software.intel.com/en-us/html5/hub/blogs/flash-cc-to-html5
Nope. Not really. A good substitute would be setInterval or setTimeout:
function doAllTheTime() { }
function wrapper() {
doAllTheTime();
setTimeout(wrapper, 40);
}
wrapper();
But even then, you're pretty limited, because you don't have access to any of the event object properties.

Categories

Resources