Comments for Almeros' Coding Blog http://code.almeros.com Words about code… code.almeros.com Mon, 30 Jan 2012 15:04:05 +0000 hourly 1 Comment on Water ripple FX with Canvas and Javascript by Almeros http://code.almeros.com/water-ripple-canvas-and-javascript/comment-page-1#comment-6908 Almeros Mon, 30 Jan 2012 15:04:05 +0000 http://code.almeros.com/?p=257#comment-6908 Hi Luke, First of all, thanks for your interest. I think you're right that the story above is a bit nerdy ;). There isn't really a simpler step by step unfortunately. What I <em>can</em> give you is the <a href="http://code.almeros.com/wp-content/uploads/2012/02/watercanvas-simplest.zip" rel="nofollow">code for the simplest working html with a water canvas</a>. Put it all on a webserver (unzipped ofcourse) and check it out via your webserver's URL... <blockquote>By checking the index.html in a browser from your desktop (via file:// instead of http://) the background.jpg image won't be read into the canvas due to the Same Origin Policy (security) the canvas element uses (HTML5 spec). There are ways to disable this in your browser though. Google for it.</blockquote> You can fiddle with the settings in index.html now and/or change the background image, until you like it! Also, please understand that this effect is taking quite a lot of browser resources. Don't expect it to perform full screen (or even half) on your webpage or something! Putting it on a site's logo should however work fine on modern browsers. Hi Luke,

First of all, thanks for your interest. I think you’re right that the story above is a bit nerdy ;) . There isn’t really a simpler step by step unfortunately. What I can give you is the code for the simplest working html with a water canvas.

Put it all on a webserver (unzipped ofcourse) and check it out via your webserver’s URL…

By checking the index.html in a browser from your desktop (via file:// instead of http://) the background.jpg image won’t be read into the canvas due to the Same Origin Policy (security) the canvas element uses (HTML5 spec). There are ways to disable this in your browser though. Google for it.

You can fiddle with the settings in index.html now and/or change the background image, until you like it!

Also, please understand that this effect is taking quite a lot of browser resources. Don’t expect it to perform full screen (or even half) on your webpage or something! Putting it on a site’s logo should however work fine on modern browsers.

]]> Comment on Water ripple FX with Canvas and Javascript by Luke http://code.almeros.com/water-ripple-canvas-and-javascript/comment-page-1#comment-6884 Luke Sun, 29 Jan 2012 17:59:49 +0000 http://code.almeros.com/?p=257#comment-6884 I want to use this effect on my website but I am only an artist and the instructions overwhelm me. Is there a simpler step by step available? A lot of the terms make no sense to me. I don't code my sites but use a program that generates the code (OK stop hissing and booing :) and I can insert code and don't know where I would insert this stuff. Thanks I want to use this effect on my website but I am only an artist and the instructions overwhelm me. Is there a simpler step by step available? A lot of the terms make no sense to me. I don’t code my sites but use a program that generates the code (OK stop hissing and booing :) and I can insert code and don’t know where I would insert this stuff.

Thanks

]]> Comment on How to create a CSS3 tag cloud like on this blog by Tag cloud good or bad? http://code.almeros.com/how-to-create-a-css3-enabled-tag-cloud/comment-page-1#comment-6207 Tag cloud good or bad? Fri, 06 Jan 2012 08:08:49 +0000 http://code.almeros.com/?p=76#comment-6207 [...] of the keywords you want to reinforce. These ideas make the tags work for you and not against you. Well in a recent discussion about just this we debated the tag cloud feature and if its good or bad ...sts, these pages are non-specific in their intent, keyword goal and topic. But single post pages on [...] [...] of the keywords you want to reinforce. These ideas make the tags work for you and not against you. Well in a recent discussion about just this we debated the tag cloud feature and if its good or bad …sts, these pages are non-specific in their intent, keyword goal and topic. But single post pages on [...]

]]> Comment on Water ripple FX with Canvas and Javascript by Almeros http://code.almeros.com/water-ripple-canvas-and-javascript/comment-page-1#comment-3571 Almeros Mon, 19 Sep 2011 11:24:22 +0000 http://code.almeros.com/?p=257#comment-3571 Hi Tim, thanks, Sure, actually, when you setup a WaterModel and a WaterCanvas just DON'T add a mouse event listener and DON'T add the rain generator. Only create a 'finger' in a 2D array like the code above and perform a touchWater on the WaterModel object on the location where you want the ripple to start. Change the settings to let the ripple fade out in about 2 seconds and you're done (you can use my example's sliders to figure out what are the best settings for you). Nice to know; when your single ripple is done rippling, the WaterModel and Canvas will stop taking resources on your website, keeping the performance for other javascripts optimal. Let me know when you have something online! Have fun! Hi Tim, thanks,

Sure, actually, when you setup a WaterModel and a WaterCanvas just DON’T add a mouse event listener and DON’T add the rain generator. Only create a ‘finger’ in a 2D array like the code above and perform a touchWater on the WaterModel object on the location where you want the ripple to start. Change the settings to let the ripple fade out in about 2 seconds and you’re done (you can use my example’s sliders to figure out what are the best settings for you).

Nice to know; when your single ripple is done rippling, the WaterModel and Canvas will stop taking resources on your website, keeping the performance for other javascripts optimal.

Let me know when you have something online! Have fun!

]]> Comment on Water ripple FX with Canvas and Javascript by tim http://code.almeros.com/water-ripple-canvas-and-javascript/comment-page-1#comment-3520 tim Thu, 15 Sep 2011 23:48:40 +0000 http://code.almeros.com/?p=257#comment-3520 Hello, this is a very great program:) I have a little question. Is it possible to make the rain drop effect for only a second or two? With a smooth fade out. Thank you! Best regards, tim Hello, this is a very great program:)

I have a little question. Is it possible to make the rain drop effect for only a second or two? With a smooth fade out.

Thank you!

Best regards,
tim

]]> Comment on 404′s on WordPress Permalinks (IIS with ISAPI Rewrite) by jaydeep patel http://code.almeros.com/404-wordpress-permalinks-iis-with-isapi-rewrite/comment-page-1#comment-3332 jaydeep patel Sat, 03 Sep 2011 12:28:34 +0000 http://code.almeros.com/?p=11#comment-3332 Thanks! I have solved my problem with the help of your blog Thanks!
I have solved my problem with the help of your blog

]]> Comment on How to create a CSS3 tag cloud like on this blog by Almeros http://code.almeros.com/how-to-create-a-css3-enabled-tag-cloud/comment-page-1#comment-2571 Almeros Mon, 04 Jul 2011 09:03:05 +0000 http://code.almeros.com/?p=76#comment-2571 Hi Janos, I guess what you want could be achieved by setting the display mode of the element to block and then explicitly setting width (and height): <code> display:block; width:300px; height:200px; </code> Hi Janos, I guess what you want could be achieved by setting the display mode of the element to block and then explicitly setting width (and height):

display:block;
width:300px;
height:200px;

]]> Comment on Water ripple FX with Canvas and Javascript by Almeros http://code.almeros.com/water-ripple-canvas-and-javascript/comment-page-1#comment-2518 Almeros Wed, 29 Jun 2011 15:52:01 +0000 http://code.almeros.com/?p=257#comment-2518 Hi Veen00, I quess there's two ways doing that, an easy way and a hard way (which will be more realistic). For the hard way you should alter my algorithm code and create a circular 2d buffer some way. The water waves will bounce of the sides more realisticly. The easy way (go for this one if you want to use it for fun) should be achieved by using the coffee background in the canvas. Now add a transparent .PNG image with the cup and a transparent cutout of the coffee content on top over the canvas. Make the canvas with ripple effect as small as possible arround the circle. That should do it! If you created this, please send me a link to your creation! Hi Veen00,

I quess there’s two ways doing that, an easy way and a hard way (which will be more realistic).

For the hard way you should alter my algorithm code and create a circular 2d buffer some way. The water waves will bounce of the sides more realisticly. The easy way (go for this one if you want to use it for fun) should be achieved by using the coffee background in the canvas. Now add a transparent .PNG image with the cup and a transparent cutout of the coffee content on top over the canvas. Make the canvas with ripple effect as small as possible arround the circle. That should do it!

If you created this, please send me a link to your creation!

]]> Comment on Water ripple FX with Canvas and Javascript by Veen00 http://code.almeros.com/water-ripple-canvas-and-javascript/comment-page-1#comment-2515 Veen00 Wed, 29 Jun 2011 14:07:22 +0000 http://code.almeros.com/?p=257#comment-2515 Is it possible to get the ripple's only in a circle? i have a image of a cup of coffee.. like to ripple the coffee only. thnx! Is it possible to get the ripple’s only in a circle?

i have a image of a cup of coffee.. like to ripple the coffee only.

thnx!

]]> Comment on How to create a CSS3 tag cloud like on this blog by János http://code.almeros.com/how-to-create-a-css3-enabled-tag-cloud/comment-page-1#comment-2307 János Sun, 05 Jun 2011 11:42:26 +0000 http://code.almeros.com/?p=76#comment-2307 Nice article. How do you set the tags width? It is a block element, but the width is not 100% but fitted to the text. How do you manage this? Nice article. How do you set the tags width? It is a block element, but the width is not 100% but fitted to the text. How do you manage this?

]]>