Liine Forum

Liine: Redefining the way people interact with sound.
http://forum.liine.net/

Canvas Resizeable Lemur Logo

http://forum.liine.net/viewtopic.php?f=40&t=4765

Page 1 of 2

Canvas Resizeable Lemur Logo

Posted: 26 Jan 2015 13:15
by Softcore
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/

Re: Canvas Resizeable Lemur Logo

Posted: 26 Jan 2015 17:33
by Phil999
congratulations Sir!

Re: Canvas Resizeable Lemur Logo

Posted: 27 Jan 2015 07:44
by Softcore
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:

Code: Select all

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:

Code: Select all

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

Code: Select all

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.

Code: Select all

canvas_bezierCurveTo(w*0.673,w*0.514,w*0.626,w*0.497,w*0.598,w*0.511);
10. Enjoy!

;)

Re: Canvas Resizeable Lemur Logo

Posted: 27 Jan 2015 07:52
by Softcore
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.

Re: Canvas Resizeable Lemur Logo

Posted: 27 Jan 2015 10:18
by Phil999
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.

Re: Canvas Resizeable Lemur Logo

Posted: 27 Jan 2015 10:25
by Softcore
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! :)

Re: Canvas Resizeable Lemur Logo

Posted: 29 Jan 2015 11:10
by Macciza
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

Re: Canvas Resizeable Lemur Logo

Posted: 29 Jan 2015 23:03
by ndivuyo
What an artist, cool project!

Re: Canvas Resizeable Lemur Logo

Posted: 14 Apr 2015 17:42
by Suloo
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.
Image

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

this is its html5 original code:

Code: Select all

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()

Code: Select all

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 :D

Image

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

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

cheers
Mark

Re: Canvas Resizeable Lemur Logo

Posted: 14 Apr 2015 17:51
by ndivuyo
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
All times are UTC
Page 1 of 2
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/