Canvas Resizeable Lemur Logo

Canvas specific discussion
Softcore
Regular
Posts:1639
Joined:04 Nov 2012 08:34
Canvas Resizeable Lemur Logo

Post by Softcore » 26 Jan 2015 13:15

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/

Phil999
Regular
Posts:932
Joined:11 Jan 2012 01:53

Re: Canvas Resizeable Lemur Logo

Post by Phil999 » 26 Jan 2015 17:33

congratulations Sir!
Formant+Eurorack, PPG wave 2.2, Korg MS-20, etc., EWI 4000s, QuNeo, etc., Mixbus32c, u-he, MadronaLabs, Samplemodeling, NI, etc., iPad2/4/Pro

Softcore
Regular
Posts:1639
Joined:04 Nov 2012 08:34

Re: Canvas Resizeable Lemur Logo

Post by Softcore » 27 Jan 2015 07:44

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!

;)

Softcore
Regular
Posts:1639
Joined:04 Nov 2012 08:34

Re: Canvas Resizeable Lemur Logo

Post by Softcore » 27 Jan 2015 07:52

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.

Phil999
Regular
Posts:932
Joined:11 Jan 2012 01:53

Re: Canvas Resizeable Lemur Logo

Post by Phil999 » 27 Jan 2015 10:18

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.
Formant+Eurorack, PPG wave 2.2, Korg MS-20, etc., EWI 4000s, QuNeo, etc., Mixbus32c, u-he, MadronaLabs, Samplemodeling, NI, etc., iPad2/4/Pro

Softcore
Regular
Posts:1639
Joined:04 Nov 2012 08:34

Re: Canvas Resizeable Lemur Logo

Post by Softcore » 27 Jan 2015 10:25

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! :)

Macciza
Regular
Posts:1325
Joined:07 Dec 2011 04:57
Location:Sydney, Australia.

Re: Canvas Resizeable Lemur Logo

Post by Macciza » 29 Jan 2015 11:10

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
iMac 2.8G i7 12G 10.6.8/10.7.2, Legacy Dexter/Lemur, Liine Lemur/iPad2, KMI SoftStep, 12Step & QuNeo , B-Controls, Mackie C4 etc
MaxMSP, Live Suite, Native Instrument stuff, etc Modified Virtual Guitar System etc All Projects/Modules © CC-BY-NC-SA[*][/b]


Suloo
Newbie
Posts:17
Joined:06 Jul 2012 22:39

Re: Canvas Resizeable Lemur Logo

Post by Suloo » 14 Apr 2015 17:42

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

ndivuyo
Regular
Posts:279
Joined:23 May 2014 00:24

Re: Canvas Resizeable Lemur Logo

Post by ndivuyo » 14 Apr 2015 17:51

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

Post Reply