Images

Insert and modify your own existing images with Elm!

Images

Code links and examples: 
 Code Set 1
 Code Set 2
 Code Set 3





Objectives of this tutorial:
    Learn to use different types of images
    Learn to change image sizes
    Learn how to crop images
    Learn how to change the dimensions of an image using width and height

Exercises:
1. Click on the “Code Set 1” link
    You should be able to see an image of a stack. 
    Change the size of the image by changing the numbers in the example.
        Try: On line 6, change image 472 315  to image 200   
        500
    Also, change the image to shells by replacing “stack” with “shells”.
            Try: On line 6, change ”/stacks.jpg” to 
        ”/shells.jpg”
  
2. Click on the “Code Set 2” link.
    A) You should see an image of a book.  
    B) Change the size of the image by changing the numbers.  
        Try: On line 6, change image 472 315  to image 200   
        500
    Notice: that instead of stretching the image, this change maintains the aspect ratio.

3. Click on the “Code Set 3” link.
    A) You should an image of yogi bear, and on line 9, you should see croppedImage (10,10) 150 150. This means it takes a rectangle out of the picture starting at (10,10) , and that the rectangle it takes out is 150 pixels wide by 150pixels tall in size.
    B) Change the numbers in the code in order to change the size.
        Try:   
    On line 9, change (10,10) 150 150  to (10,10) 250 250
          b.   Now, again change it to (0,0) 250 250
          c.   Lastly, change it to (100,0) 250 250
 
Challenge: Crop the picture so that you can only see his hands. (Hint: change the 100 in (100,0) to a higher number.

Click on “Code Set 1” link again. 
    Replace image with tiledImage.  
    Change 473 315 to 600 500 .
    You will notice that the function  tiledImage has created multiple tiles or copies of the original image to fill up the space.
    You can play around with the 600 500 numbers to see more or less tiles

In the code that you just wrote, delete all of line 6 and replace it with height 100 (width 200 (image 500 300 "/stack.jpg")).  
    Change height 100 to height 300
    Change width 200 to width 300
Did you see how the shape of the picture transformed when you changed the height and the width? If not, play around with these two numbers until you think you understand what’s going on.

                                
                                
Previous Tutorial Back to Tutorials Next Tutorial