RGB graphics using Javascript

Yesterday we copied the HTML and Javascript program for painting graphics pixel by pixel.
We also saw that each pixel has a Red, Green and Blue component that goes from 0-255.

This is the version we used yesterday RGBgraphics.html. This version only has colours going up to 255.

The version on this website is different as the colours are entered as going up to 1024, but then scaled to 255. So the formulas that you get from this website won't look the same as in the images.

To fix it, find these three lines in the RGB.html program and change them to look like this:

data[i++] = red(x, y) >> 2;
data[i++] = green(x, y) >> 2;
data[i++] = blue(x, y) >> 2;

Some things that you can do

• set the whole background to one shade:

  function red(x,y){
     return 100
  }
  

• set the colour to vary according to x and/or y

  function red(x,y){
     return x - y
  }
  

• This can then get very complicated! ...
• x % 255 : this will make the red value go from 0-255 and then repeat again and again as x increases
• If you get a negative number, you can force it to be positive by taking the absolute value: Math.abs( x - y)
• Other math functions:
  • Math.cos() : this is cosine. BUT all trig functions use RADIANS in programming. So ...
  • (Math.cos(x * 3.141 / 180)) * 255
    What this does is: take x, pretends that it is in degrees and changes it to radians.
    It then multiplies the result of cosine (-1 to +1) by 255, the brightest value for RGB
  • We don't actually care about degrees, so we can say (Math.cos(x * 3.141 / 500)) * 255
    This means that half a cycle corresponds to x going from 0-500. A full cycle (bright, dark, bright again) is 1000 pixels.
    The black middle part is negative - it just stays black.
  • Math.abs(Math.cos(x * 3.141 / 500)) * 255 This now changes the black negative part to positive.
  • Now you can do the normal math translations and stretching of functions f(x) ...
  • Math.pow(x, 3) is x^3
  • Math.min(x, 500) is the smallest of the two numbers
  • return Math.atan2(x-512,y-512) *100
    something weird - moved to the centre of the screen
• You can also use logical functions (bitwise operators). I can't explain why these produce what they do
  • OR is |
    return (x | y)
return (x | y) % 255
  • AND is &
    return (x & y)
return (x & y) % 255
  • XOR is ^
    return (x ^ y)
  • NOT is ~
    return (x & ~y)
  • Try >> too: function red(x,y){ return (x >> y) } function green(x,y){ return (y >> x) } function blue(x,y) { }
• You can make one colour call another, as long as it's not an endless loop function red(x,y){ return (x >> y) } function green(x,y){ return (y >> x) } function blue(x,y) { return 70-red(x,y) }
• You can use variables (I created a and b):
  function red(x,y){ a = (Math.abs(1024 - x - y) * (1024 - x + y)) b = (Math.abs(x - y) * (x + y)) a = Math.min(a,1024) b = Math.min(b,1024) return 2048 - a - b }
• You can use IF statements
  • A red vertical line at x=100
    function red(x,y){ if (x==100) return 255 }
  • vertical lines spaced 100 pixels apart
    if (x%100==0) return 255
  • wider vertical lines spaced 100 pixels apart
    if (x%100 <5) return 255
  • a red square from (100,100)-(200,200)
    if ((x > 100 && x < 200) && (y >100 && y < 200)) return 255
• It looks like you can also change the values of X and Y inside the red(), green() and blue() funtions.
  function red (x,y){ if (y < 512) y = 1024-y return x%y }

The End

Now start playing!