0 Favourites

How to create color patterns with canvas?

  • Hello,

    I'm involved in a project where the aim is to show a variable color pattern depending on a formula values. Although my efforts, I'm only obtaining a constant value of grey in the zone supposed to show a variable pattern from red to black. And I can't guess why.

    Here is the code:

    <img src="https://dl.dropboxusercontent.com/u/87172782/Patterns/crop.png" border="0">

    And the result:

    <img src="https://dl.dropboxusercontent.com/u/87172782/Patterns/Result.png" border="0">

    And, of course, the project:

    https://dl.dropboxusercontent.com/u/87172782/Patterns/Pattern.capx

    Anyone could give me a clue to find out why this is not being drawn as it's supposed to?

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Two things:

    1) red green and blue need to be integer values in the range [0, 255]. Setting green and blue to loopindex give them values above 255, which is invalid

    2) If that alone doesn't help, try drawing to the canvas on the first tick instead of "on start of layout" (compare tickcount to achieve this). The reason for this proposal is that I'm not sure if the canvas is already available for drawing before tick 1.

    EDIT: OK, sorry, forget point 2 <img src="smileys/smiley36.gif" border="0" align="middle" />

  • Hi!

    I've just tried this

    "red green and blue need to be integer values in the range [0, 255]. Setting green and blue to loopindex give them values above 255, which is invalid"

    changing the values of blue and green to make them remain between 0 and 255. But this still doesn't works and the result is a grey box.

    What else could be happening?

  • If I recall correct, it is not enough to clamp them into the value range, they need to be integer values. Have you tried to set the (range corrected) values with

    "rgb("&int(red)& ... etc.?

    Else, in case there's just some typo or small error, I'm sorry, but I can't have a look at your capx, I'm using an older stable version of C2.

  • If I set red to 255, instead of a gray box I get a white box.

    I guess you should map the values to the 0-255 range

    I found this example on the forum:

    (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min

    which would translate for blue and green to:

    (loopindex - 0) * (255 - 0) / (1280 - 0) + 0

    or int(loopindex*255/1280)

    Ok, this gives some interesting colour transitions when changing the value of red, but nothing close to the red and black square you show..

    Guess I'm making a mistake..

  • Quote:

    -------------------------------------------

    If I recall correct, it is not enough to clamp them into the value range, they need to be integer values. Have you tried to set the (range corrected) values with

    "rgb("&int(red)& ... etc.?

    -------------------------------------------

    THAT WAS THE KEY!!!!!!

    GREAT!!! IT WORKS PERFECT.

    Thanks a lot, I was looking for a solution for this for weeks!

  • Great!

    Sometimes it's just the small things. I'm glad that I recalled correctly <img src="smileys/smiley2.gif" border="0" align="middle" />

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)