CS 105

Week 3, Part 2

MP2

Build your own Instagram-like filters to transform your images

Progressive MP: builds on what you complete it lab sections

Available on CS 105 Website (after your lab)
Due: Tuesday, Feb. 17, 8:00pm

Activity 3

Release: Later Today

Due: Monday, Feb. 16, 9:00am
(Before Lecture)

Loops

Loops

var s = "Illinois";
for (var i = 0; i < s.length; i++) {
  console.log(s.charAt(i));
}

Try it!

Data Types

Numbers

If you are using a number (65, -32, 194) and want to do math on it, never use quotes.

Simple Image

A new data type, created for CS 105, is a SimpleImage.

Allows us to get/set pixel data about an image.

Pixel

A pixel is a dot on a computer screen and always has a single color.

Normally, pixels are too small to distinguish.

Pixel

Pixel Color

Besides being just a dot, a pixel has a single color.

Inside of computers, colors are represented by their primary colors of light.

Primary Colors

Red

Green

Blue

Primary Colors

How bright of red light should be present?

How bright of green light should be present?

How bright of blue light should be present?

Color picker

Image

An image a rectangle grid of pixels.

Each pixel has a color and location.

Location

The top-left corner of an image is pixel (x = 0, y = 0)

Moving right (across the image), we increase the x value.

Moving down (down the image), we increase the y value.

Location

Using Simple Image

If your variable is a SimpleImage, the variable has two properties and four methods.

img.width, the width of the image

img.height, the height of the image

Simple Image

var pixel = img.getRGB(x, y), returns an RGB pixel from locaiton (x, y)

The returned RGB pixel is three properties:
pixel.r, the red value (0-255)
pixel.g, the green value (0-255)
pixel.b, the blue value (0-255)

Simple Image

img.setRGB(x, y, pixel), sets the RGB color given an RGB pixel

Simple Image

Lecture 6 File Download

Looping Through an Image

for (var x = 0; x < img.width; x++) {
  for (var y = 0; y < img.height; y++) {
    /* (x, y) is now the location */ 
  }
}

Simple Image

var pixel = img.getHSL(x, y), returns an HSL pixel from locaiton (x, y)

The returned HSL pixel is three properties:
pixel.h, the hue value (0-360)
pixel.s, the saturation percentage (0-100%, which is 0.0-1.0)
pixel.l, the luminosity percentage (0-100%, which is 0.0-1.0)

Simple Image

img.setHSL(x, y, pixel), sets the HSL color given an HSL pixel