Canvas Resizeable Lemur Logo
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/
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
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
Re: Canvas Resizeable Lemur Logo
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:
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:
Becomes:
9. Apply some rounding as there is really NO practical need for so many decimal digits.
10. Enjoy!
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();
};
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);
Code: Select all
canvas_bezierCurveTo(w*0.672872,w*.513749,w*0.626063,w*0.497415,w*0.598,w*0.511);
Code: Select all
canvas_bezierCurveTo(w*0.673,w*0.514,w*0.626,w*0.497,w*0.598,w*0.511);
Re: Canvas Resizeable Lemur Logo
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.
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
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.
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
Re: Canvas Resizeable Lemur Logo
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!
This essentially replaces my step 4 above!
Re: Canvas Resizeable Lemur Logo
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
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]
MaxMSP, Live Suite, Native Instrument stuff, etc Modified Virtual Guitar System etc All Projects/Modules © CC-BY-NC-SA[*][/b]
Re: Canvas Resizeable Lemur Logo
What an artist, cool project!
Re: Canvas Resizeable Lemur Logo
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.
here the original file 1000*1000 px:
https://dl.dropboxusercontent.com/u/851 ... y_icon.png
this is its html5 original code:
and this is the lemur code i made of in draw()
it looks like this
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
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.
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);
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
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
I've only use bezierCurve a couple times, so I am a complete novice and cannot tell by looking at it