Colored disks

Objective: Create graphics by direct pixel manipulation and using 2d canvas operations

Question #1: Colored disk

  • a)Draw a colored disk in the canvas by modifying each pixel one by onein the RGBA array obtained by getImageData()(rasterization of the disk)
    • --Define the coordinates x0,y0 of the disk center and a RGB color.
    --For each pixel(x,y),compute the distance to(x0,y0) and modify the pixel R,G,B values if this distance is less than the radius.
    --Draw the image using putImageData()
  • b)Compare your result with the result obtained by using the higher level 2d canvas function arc().

    • Part A

    Part B

    The black circle is using myFunction and the second image is using arc().
    Using arc() function you can see that the image is more solid in the borders.
    Here is an image of how my function is drawing the pixels, and that why
    you see in the First Image that there are little edges in the black circle.

    Image when Radius == Distance

    Question 2: Additive synthesis

    Extend the code of Q1a so that now 3 disks are shown (see example image), and the image is generated using additive synthesis of color pixel by pixel.

    Part A

    Question 3: Animation

    Animate the display of Q2a to show the 3 disks rotating around the image center by using requestAnimFrame()