Canvas Resizeable Lemur Logo

A RESIZEABLE Lemur Logo created with the canvas object. It is set to be transparent to "touch" (no touch) and be redrawn on demand, therefore it needs minimal resources just at the time of start up.

Handy if you want some sort of logo appearance at the initial loading of your template. To resize the logo to your desired size, simply change the width of the Canvas object.


Available at user library:
https://liine.net/en/community/user-library/view/558/

congratulations Sir!

Thanks Phill. It wasnt that hard actually - here's the procedure.

1. Download Lemur logo as a .png image from Lemur facebook page

2. Resize .png image to exactly 1000 x 1000 pixels

3. make it a black and white image - black being the Lemur head.

4. GOOGLE - image to svg convertor
http://image.online-convert.com/convert-to-svg
Use the B&W image and download - save the resulting SVG file to your computer

5. Open the .svg file with a text editor

6. GOOGLE - svg to html5 canvas
http://www.professorcloud.com/svg-to-canvas/

7. Copy paste the .svg text into it, and you get the resulting html5 canvas code.

it looks a bit like this:

var draw = function(ctx) {
ctx.save();
ctx.translate(0,0);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(1000,0);
ctx.lineTo(1000,1000);
ctx.lineTo(0,1000);
ctx.closePath();
ctx.clip();
ctx.translate(0,0);
ctx.translate(0,0);
ctx.scale(1,1);
ctx.translate(0,0);
ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
ctx.save();
ctx.save();
ctx.beginPath();
ctx.moveTo(832,224);
ctx.bezierCurveTo(841.085,257.863,837.415,292.995,831,323);
ctx.bezierCurveTo(824.345,354.13,813.744,377.845,799,401);
ctx.bezierCurveTo(769.68,447.046,764.749,509.211,740,562);
ctx.bezierCurveTo(716.444,612.244,679.766,643.449,641,683);
ctx.bezierCurveTo(623.948,700.397,605.931,721.25,589,741);
ctx.bezierCurveTo(571.437,761.488,553.675,783.36,532,793);
ctx.bezierCurveTo(515.016,800.553,486.612,801.199,468,793);
ctx.bezierCurveTo(433.751,777.912,410.04200000000003,738.344,387,712);
ctx.bezierCurveTo(334.577,652.065,274.065,612.599,246,529);
ctx.bezierCurveTo(232.074,487.519,226.695,446.219,206,408);
ctx.bezierCurveTo(199.625,396.227,190.32,385.605,184,372);
ctx.bezierCurveTo(167.518,336.517,157.412,275.951,168,224);
ctx.bezierCurveTo(193.859,231.245,217.799,237.299,243,238);
ctx.bezierCurveTo(269.466,238.736,294.904,233.747,321,228);
ctx.bezierCurveTo(371.355,216.91,422.437,203.484,475,201);
ctx.bezierCurveTo(541.148,197.874,599.821,209.427,657,223);
ctx.bezierCurveTo(711.842,236.019,775.651,247.178,832,224);
ctx.closePath();
ctx.moveTo(297,506);
ctx.bezierCurveTo(305.62,558.211,329.255,607.729,371,627);
ctx.bezierCurveTo(418.094,648.74,461.943,610.765,447,563);
ctx.bezierCurveTo(440.819,543.242,418.985,516.853,399,509);
ctx.bezierCurveTo(370.194,497.682,328.15,514.303,298,503);
ctx.bezierCurveTo(297.39,503.057,296.816,503.149,297,504);
ctx.bezierCurveTo(295.991,504.012,295.742,505.753,297,506);
ctx.closePath();
ctx.moveTo(598,511);
ctx.bezierCurveTo(561.047,528.89,531.648,592.255,568,623);
ctx.bezierCurveTo(580.859,633.876,607.759,635.979,627,628);
ctx.bezierCurveTo(671.641,609.489,694.1610000000001,559.625,704,504);
ctx.bezierCurveTo(703.943,503.39,703.851,502.816,703,503);
ctx.bezierCurveTo(672.872,513.749,626.063,497.415,598,511);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
ctx.restore();
};

8. USE the coordinates of the bezier curves as noted in the above code in a canvas object in Lemur. Here's the trick though:
Since the "coordinates" originated from a 1000 x 1000 pixels image, then to find "percentage" of width all you have to do is divide them by 1000.

So for example the html5 canvas syntax:

ctx.bezierCurveTo(672.872,513.749,626.063,497.415,598,511);

Becomes:

canvas_bezierCurveTo(w*0.672872,w*.513749,w*0.626063,w*0.497415,w*0.598,w*0.511);

9. Apply some rounding as there is really NO practical need for so many decimal digits.

canvas_bezierCurveTo(w*0.673,w*0.514,w*0.626,w*0.497,w*0.598,w*0.511);

10. Enjoy!

NOTE: for the very observative of you, I HAD to "break" the "head" into two paths, because for some strange reason when all the head was done in one path, trying to fill it with color was crashing the windows editor (stroke didnt crash it though).

So I "broke" the "head into two paths:

One starting from its right ear down to the left side of the "chin"

And then the second, starting from the left side of the "chin" up to the right ear.

hey, that's something I did not expect. There was a question in the forum not too long ago if there is some kind of translator for the Lemur Canvas, and I thought no, this is not possible.

My approach would have been to draw the shape in Illustrator to get the coordinates of the bezier points, but that would have been a pain I guess.

Thanks for the description of your procedure. Clever thinking.

Still no need to draw if you got illustrator - just open the .png image in it, select "trace" - then "expand" and then save as svg file!

This essentially replaces my step 4 above!

I'll dig mine out and post it at some point...
I just did the rough maths in my head to get the general points and then tweaked it from there...
Did mine as one shape and added overlays to account for the errors so when that gets fixed it's all good

What an artist, cool project!

Hey Softcore,

i would really like to understand this nice method somehow better.
I tried it with an icon i made but couldn't get it reproduced perfectly.

this is the icon source:
i made it smaller just to not flude the thread with big picture, the original file is below. I really like the rounded edges on this one.
[img]http://abload.de/img/play_icon-kopiemube8.jpg[/img]

here the original file 1000*1000 px:
https://dl.dropboxusercontent.com/u/85191333/play_icon.png

this is its html5 original code:

var draw = function(ctx) {
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(1250,0);
ctx.lineTo(1250,1250);
ctx.lineTo(0,1250);
ctx.closePath();
ctx.clip();
ctx.translate(0,0);
ctx.translate(0,0);
ctx.scale(1.25,1.25);
ctx.translate(0,0);
ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
ctx.save();
ctx.restore();
ctx.save();
ctx.fillStyle = "#000000";
ctx.strokeStyle = "rgba(0, 0, 0, 0)";
ctx.translate(0,1000);
ctx.scale(0.1,-0.1);
ctx.save();
ctx.beginPath();
ctx.moveTo(510,9641);
ctx.bezierCurveTo(502,9636,478,9624,457,9614);
ctx.bezierCurveTo(408,9590,374,9551,341,9480);
ctx.lineTo(315,9425);
ctx.lineTo(315,5025);
ctx.lineTo(315,625);
ctx.lineTo(341,570);
ctx.bezierCurveTo(374,499,408,460,457,436);
ctx.bezierCurveTo(478,426,503,414,512,409);
ctx.bezierCurveTo(541,394,642,399,700,419);
ctx.bezierCurveTo(730,429,2724,1422,5130,2626);
ctx.bezierCurveTo(9088,4605,9510,4819,9558,4864);
ctx.bezierCurveTo(9679,4978,9679,5072,9557,5187);
ctx.bezierCurveTo(9507,5234,9132,5424,5129,7426);
ctx.bezierCurveTo(2723,8628,730,9621,700,9631);
ctx.bezierCurveTo(644,9650,537,9655,510,9641);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
ctx.restore();
};

and this is the lemur code i made of in draw()

decl c = getobject();
decl rect = getobjectrect(c); 
decl w = rect[2];
canvas_clear(c);

canvas_setFillStyle(c, {0,0,0});
canvas_beginPath(c);
canvas_moveTo(c,w*.510,w*.9641);

canvas_bezierCurveTo(c,w*0.502,w*0.964,w*0.478,w*0.962,w*0.457,w*0.961);
canvas_bezierCurveTo(c,w*0.408,w*0.959,w*0.374,w*0.955,w*0.341,w*0.948);
canvas_lineTo(c,w*.315,w*.9425);
canvas_lineTo(c,w*.315,w*.5025);
canvas_lineTo(c,w*.315,w*.625);
canvas_lineTo(c,w*.341,w*.570);
canvas_bezierCurveTo(c,w*0.374,w*0.499,w*0.041,w*0.460,w*0.457,w*0.436);
canvas_bezierCurveTo(c,w*0.478,w*0.426,w*0.503,w*0.414,w*0.512,w*0.409);
canvas_bezierCurveTo(c,w*0.541,w*0.394,w*0.642,w*0.399,w*0.700,w*0.419);
canvas_bezierCurveTo(c,w*0.730,w*0.429,w*0.272,w*0.142,w*0.513,w*0.263);
canvas_bezierCurveTo(c,w*0.909,w*0.461,w*0.951,w*0.482,w*0.956,w*0.486);
canvas_bezierCurveTo(c,w*0.968,w*0.498,w*0.968,w*0.507,w*0.956,w*0.519);
canvas_bezierCurveTo(c,w*0.951,w*0.523,w*0.913,w*0.542,w*0.513,w*0.743);
canvas_bezierCurveTo(c,w*0.272,w*0.863,w*0.730,w*0.962,w*0.700,w*0.963);
canvas_bezierCurveTo(c,w*0.644,w*0.965,w*0.537,w*0.966,w*0.510,w*0.964);

canvas_closePath(c);
canvas_fill(c);

it looks like this

[img]http://dl.dropboxusercontent.com/u/85191333/play_icon_broke.jpg[/img]

also here is the .jzlib file of it:
https://dl.dropboxusercontent.com/u/85191333/play_icon.jzlib

Its almost there i think, would be great if you could help me out.

cheers
Mark

close but no cigar haha! Maybe you need to make multiple paths? (you can declare variables as createPath() and then add points to them with lineTo(path,x,y) and then draw them with fillPath(c,path), though you still may have to add another begin and maybe close Path in there..)

I've only use bezierCurve a couple times, so I am a complete novice and cannot tell by looking at it

yea, i just commented out a few curves from the bigger block below, to figure out wich ones do what. Might put some new paths in there to align them well.
Then i probably need to find out the new line to values.

Will try..thx