Web Analytics Made Easy -
StatCounter New at this Need Help Can Not Figure This Out - CodingForum

Announcement

Collapse
No announcement yet.

New at this Need Help Can Not Figure This Out

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • New at this Need Help Can Not Figure This Out

    hey, I am really new and trying my best to understand what is wrong Click image for larger version

Name:	UShuy3g2EeaxYA6oVw19Xw_32f9f25b846e45177deea2d3ca0dccbd_71-20_3_2_Q6.jpg
Views:	1
Size:	9.7 KB
ID:	2283642here but I cannont, would anyone be able to help me with this and help me break this learning barrier, it would help me out so much to understand more, ive been getting a lot of beating around the bush answers like ive been taking this for a few months atleast i started 3 days ago and have till tmrw to hand in this project, i really do not want todo it this way but I really want this done and understand what i am doing wrong. bewlow is my pseudocode. the outcome is i want top change in between 0 and 1/3 of width to change to red, inbetween 1/3 to 2/3 change pixel to blue and in between 2/3 and 3/3 to change pixel to green , i have upload a files of the before and after photo to show better of what I am talking about.
    the codes to used mainly are getpixel setpixel setred setblue setgreen and get(x,y) we havent been tought other codes yet so i do not want to be using a code I havent been thought yet .

    i am doing this cause we are learning the green code but slowly and this will help me understand it.
    any help would be really great as i take a great interest in this and want to accel more but sometimes you just need to throw a dog a bone you know

    var img = new SimpleImage ("http://www.dukelearntoprogram.com/course1/example/skyline.jpg");
    print(img);
    function print (img1){
    var ans = ("img1"); for (var pixel of img.Values());{
    if
    (pixel.getX < img.getWidth()/3);
    pixel.setRed (pixel.getRed(255)/3);}
    {
    if (pixel.getX > img.getWidth()/3);
    pixel.setGreen (pixel.getGreen(255)*2/3);}

    {(pixel.getX >= img.getWidth()/3);
    pixel.setblue (pixel.getblue(255)*2/3);}
    return ans;}
    print(img);

  • #2
    Are you using a framework for canvas? Which? Is it this course:
    Documentation

    Comment


    • #3
      Your logic is a bit off... when you setGreen, or setRed, or setBlue, you're only setting that PART of the colour component. By cutting red to a third whilst leaving blue and green alone, it would be setting the first colour to cyan hue. Likewise the second would be magenta, and the third stripe yellow!

      RGB is easy... set to ZERO the other colours on the pixel.

      Code:
      if (pixel.getX() < img.getWidth() / 3) {
      	pixel.setGreen(0);
      	pixel.setBlue(0);
      } else if (pixel.getX() < img.getWidth() * 2 / 3) {
      	pixel.setRed(0);
      	pixel.setBlue(0);
      } else {
      	pixel.setRed(0);
      	pixel.setGreen(0);
      }
      Stripping the blue and green off just leaves the red intact... Stripping off the red and blue just leaves the green. Removing Red Green just leaves Harold and Dalton.

      Though I would actually do it by converting all three channels to their luminance equivalent using the YCbCr emissive colourspace to BT.601 formula. (as used to display VGA monochrome -- there was such a thing, as well as Apple colourspace conversion and the basis for the WCAG contrast calculations)

      https://en.wikipedia.org/wiki/YCbCr

      Code:
      var y = 0.299 * pixel.getRed() + 0.587 * pixel.getGreen() + 0.114 * pixel.getBlue();
      if (pixel.getX() < img.getWidth() / 3) {
      	pixel.setRed(y);
      	pixel.setGreen(0);
      	pixel.setBlue(0);
      } else if (pixel.getX() < img.getWidth() * 2 / 3) {
      	pixel.setRed(0);
      	pixel.setGreen(y);
      	pixel.setBlue(0);
      } else {
      	pixel.setRed(0);
      	pixel.setGreen(0);
      	pixel.setBlue(y);
      }
      That way you don't lose as much detail. You could also do a 1/3rd to one-half instead of zero to the other channels to brighten it slightly if so desired.

      Also note, don't waste time checking for values you already know are true... and "else" is your friend.

      Big thing I think was tripping you up though, was that setRed only changes the RED part of the RGB image, it doesn't set the WHOLE pixel to red. The Blue and green remain intact. Learn the RGB colour wheel:

      blue + green = cyan
      blue + red = magenta
      green + red = yellow
      red + blue + green = white

      So by setting just the red, you were making cyan.
      Last edited by deathshadow; Sep 30, 2016, 07:57 PM.
      Walk the dark path, sleep with angels, call the past for help.
      https://cutcodedown.com
      https://medium.com/@deathshadow

      Comment


      • #4
        hey thanks alot so I tried using this out, I assume I put the RGB values in ( line 3 ) and I get this error
        (Line 3 pixel is not defined )



        var img = new SimpleImage ("http://www.dukelearntoprogram.com/course1/example/smalluniverse.jpg");
        print(img);
        var y = 0.299 * pixel.getRed(255) + 0.587 * pixel.getGreen(255) + 0.114 * pixel.getBlue(255);
        if (pixel.getX() < img.getWidth() / 3) {
        pixel.setRed(y);
        pixel.setGreen(0);
        pixel.setBlue(0);
        } else if (pixel.getX() < img.getWidth() * 2 / 3) {
        pixel.setRed(0);
        pixel.setGreen(y);
        pixel.setBlue(0);
        } else {
        pixel.setRed(0);
        pixel.setGreen(0);
        pixel.setBlue(y);
        }
        print(img);

        Comment


        • #5
          i got a line 8 error saying (You tried to call getRed with 1 value, but it expects 0 values). So i change it then i get (pixel.getBlue is not a function) I do not know if I understand functions fully I have watched the video over many times and some youtube videos. Am I using the Function properly???

          Comment


          • #6
            ignore the message above it was for a different forum

            Comment


            • #7
              i have figured it out thanks


              var img=new SimpleImage("http://www.dukelearntoprogram.com/course1/example/smalluniverse.jpg");

              for (var pixel of img.values()){
              if (pixel.getX()<=85)
              {pixel.setRed(255);}

              else
              {if(pixel.getX()>46 & pixel.getX()<=170)
              {pixel.setGreen(255);}

              else
              {pixel.setBlue(255);}}}

              print(img);Click image for larger version

Name:	myImage.jpg
Views:	1
Size:	7.7 KB
ID:	2270505

              Comment


              • #8
                Originally posted by babyoilnolotion View Post
                and I get this error (Line 3 pixel is not defined )
                You didn't include your for loop.

                Code:
                var img = new SimpleImage ("http://www.dukelearntoprogram.com/course1/example/smalluniverse.jpg");
                for (var pixel of img.values()) {
                	var y = 0.299 * pixel.getRed(255) + 0.587 * pixel.getGreen(255) + 0.114 * pixel.getBlue(255);
                	if (pixel.getX() < img.getWidth() / 3) {
                		pixel.setRed(y);
                		pixel.setGreen(0);
                		pixel.setBlue(0);
                	} else if (pixel.getX() < img.getWidth() * 2 / 3) {
                		pixel.setRed(0);
                		pixel.setGreen(y);
                		pixel.setBlue(0);
                	} else {
                		pixel.setRed(0);
                		pixel.setGreen(0);
                		pixel.setBlue(y);
                	}
                }
                print(img);
                Beware that setting all channels to 255 will actually (like setting the other channels to zero) strip off data and detail. Really any conversion method will, but the longer approach I presented is more likely to preserve the image result as something recognizable without -- well, look at your green stripe, how it's so bright and washed out?
                Walk the dark path, sleep with angels, call the past for help.
                https://cutcodedown.com
                https://medium.com/@deathshadow

                Comment


                • #9
                  i still get a either way if i dont oput 255 or any other value or no value.. ive been reading over the wiki link sorta confusing but im on my second time reading it over tonight

                  Comment


                  • #10
                    i just think its the site page displaying it like that cause when i open it in my pictures folder its not washed like above fyi i just noticed this

                    Comment


                    • #11
                      that documentation

                      Comment


                      • #12
                        and i guess canvas

                        Comment

                        Working...
                        X