Creating circles at the mouse cursor This code takes the position of your mouse cursor, and it creates circles where the cursor is.

 strokeWeight(3);
 stroke(24, 0, 0);
 fill(245, 0, 0);
 background(255, 255, 255);
    draw = function() {
        ellipse(mouseX, mouseY, 30, 30)
    };


I would like to know:


If there is a way to shorten this code, but still keep it readable.
Or any suggestions to make it better.


You can see a live demo here.
There's basically nothing to shorten here. Processing.js is already doing the heavy-lifting of setting up a canvas so you can draw, hooking up to the DOM, etc. etc., leaving you do focus on the task. And that task is:


draw a circle where the cursor is
make it red
with a dark border
that's 3px thick
on a white background


which is what your code does. Almost line for line (just backwards, kinda). So there's nothing to shorten.

Well, I guess you can reduce background(255, 255, 255); to background(255); since Processing will automatically assume you mean that 255 should be used for all three. But that's just a minor shortcut built into Processing.

But really, why shorten it? Short code is not a goal in itself*. Efficient code is a goal, but code length and efficiency are not the same thing. Sure, code can be inefficient and long - typically, that's how it works out (e.g. the code takes an overly complicated route to accomplish its task). But it can also be inefficient and short. Or long but very efficient.

Point is, you have to know what metric you're interested in. Maybe it's memory usage, maybe it's speed, maybe it's safety, or extensibility. Hopefully, it's also readability. Short code, in and of itself, doesn't automatically impact these.



Sidenote: Since JavaScript is almost always part of a web page, and thus sent over the internet, it is actually worth making it short, since it'll take less space, and thus download faster. But even that's only really interesting if you have thousands of lines of code. Those few lines above probably take less time to transmit than it takes to even establish the connection they're sent through.

But even if you have a ton of code, you'd use a minifier to make your JavaScript more compact after you've written it. You'd still work on the regular, readable code, and then let the minifier compress it into highly compact but humanly-unreadable gibberish.

For an example, go to google.com and view source - a lot of that nonsense is heavily optimized and minified javascript. But nobody wrote it like that. For another example, look at Processing.js itself: Here is the code pretty much as it was written (though there was probably a lot of tooling involved in piecing it together), and here's the minified version that a computer spat out.



Anyway, there's nothing in you code to shorten, but there is something that can be made more efficient. And in this case, that means more code:

strokeWeight(3);
stroke(24, 0, 0);
fill(245, 0, 0);
background(255, 255, 255);
noLoop();

mouseMoved = function() {
    ellipse(mouseX, mouseY, 30, 30);
};


You were drawing the circle in the draw function. That function runs many times a second. But if the mouse hasn't moved, why bother drawing another circle in the same place? Using draw is great for animation and stuff like that, where things are always changing. But here, nothing changes if the mouse doesn't move.

Also, if you run your code, but the mouse isn't anywhere near the canvas, it'll just endless draw circles at 0,0 - i.e. top left. It doesn't know where the mouse is, so it just defaults to zero, zero.

Hence, the code above calls noLoop() - which means that draw isn't being called constantly and pointlessly - and instead does its drawing in mouseMoved. So if you don't move the mouse, nothing happens. It only springs into action if the mouse coordinates change - that's when it has to draw a new circle.

Here it is in action.



*) Unless you're playing code golf for fun