Week 4 - Media

Schedule:

  • Rollovers
  • Pong
  • Images
  • Collage time
  • Digital painting software
    • (kids paint software) portrait painting
    • “no paint” painting

Rollovers (buttons)

For our bouncing ball, we needed to detect when we were on the page or not. This same technique can be used to detect when a user has clicked on a button.

First we see if our mouse has rolled over the rectangle

function setup() {
  createCanvas(400, 400);

  rectMode(CORNER);
}

function draw() {
  background(220);

  rect(150,150,100,100);

  if (mouseX >= 150 && mouseX <= 150+100 && mouseY >= 150 && mouseY <= 150+100) {
  //if we've rolled over do something
    fill(0);
   } else {
		fill(255);
   }

}

How do we take this code and alter it so that the button changes color only when we press the mouse?

Answer: place the code inside a test for whether the mouseIsPressed

Activity: Build Pong

Needed:

  • a player paddle on the left
  • a ball
  • 3 Lives

What variables are needed?

Spoilers:

  • x and y for player
  • x, y, xspeed, yspeed for ball

What functionality is needed?

  • Checking keys and moving player paddle up and down
  • Keeping ball on screen (bouncing off walls)
  • Bouncing ball when it hits player paddle
  • Player loses a life when ball hits left wall
  • End game when player runs out of lives

Useful code: key presses

//move player
  if (keyIsPressed == true) {
    if (keyCode == UP_ARROW) {
      playerY = playerY - 5;
    }
    if (keyCode == DOWN_ARROW) {
      playerY = playerY + 5;
    }
  }

More info on KeyCode

Working with Images

Okay, we can draw ellipses, and rects, lines, points, triangles, or use beginShape() to make your own shape. We can draw part of a circles with arc.

This is great. But sometimes you want to work with images directly. p5.js can load and display images: png, jpg, gif.

To do so, we need to do four things:

  1. Import the image into our sketch’s folder.
  2. Create a variable to hold the image.
  3. Add a preload() function section to our code sketch and preload the image.
  4. draw the image to the window with image(imageVariableName,x,y);, usually in our draw function.

Example

var fluffyCatImg; //the variable to hold our imageFile

function preload(){
    fluffyCatImg = loadImage('cat.jpg');
}

function setup(){
  createCanvas(200,200);
}

function draw(){
  //this draws the fluffyCatImg at 0,0 in our sketch window
  image(fluffyCatImg,0,0);
}

You can also optionally specify the image’s width and height.

image(fluffyCatImg,0,0,100,200);
//the image is drawin at 0,0 and is 100 wide, 200 high

Resolution

File size impacts how fast your software loads. And since our code sketches live online in a web browser, they impact how fast your website or web app loads. Big files slow this down. You can compress images, but it’s helpful to understand the big 3 image file types, their advantages and disadvantages.

When to use Gif, Jpeg, Png

Jpeg
  • ‘Joint Photographics Experts Group’
    • defined in 1986!
  • reduces file size
  • lossy! = some data/quality is lost in the compression
  • can display millions of colors
  • ideally for reducing an image 60-75%
  • standard image file type for across platforms, cameras, browsers, etc

Gif

  • ‘Graphics Interchange Format’
  • 256 indexed colors
  • this is a lossless format of limited colors
  • great for sharp-edged images, with limited colors
  • can loop!
  • uses dithering, a process where limited colors are used in a technique to appear as if there are a larger depth of colors

PNG

  • ‘Portable Network Graphics’
  • lossless
  • intended to compete with and be better than Gif!
  • full color
  • transparency supported!

Which to use?

  • Most of the time: Jpeg!
    • Compressed. Small
  • Need transparency?
    • Png
  • Need a looping image? or small 8bit image?
    • Gif

Compression options

  • Check an image’s file size. On the Mac, click on the file. Go to File > Get Info, and check out the size
  • Photoshop -> Save For Web and Devices
    • On a screen, the max resolution is 72 dpi
  • On a Mac, use Preview to open the file. File > Export and choose jpeg, png or gif and amount of compression.

Meeting Mr. Kid Pix

Kid Pix software, online. Remember, this is 30 years old! Click to launch, then you click to turn on sound and fullscreen. To exit out of fullscreen, press escape.

Homework

Homework Read/Watch

Read:

  • chapter 7, Media (review, some new things)
  • chapter 8, Motion (new)
  • chapter 9, Functions (new)

Watch:

Multi-week Assignment: Make a drawing tool

Software like Adobe Photoshop appears at first to have infinite possibilities. In actuality it is constrained and specific. You can only do what the software allows you to do.

As long as artists have been making art, they have been inventing, designing, and altering their tools.

Becoming a programmer is often equated in our culture to developing magical powers or unlocking new abilities. Let’s embody this idea with the challenge to create our own art-making tools. For this assignment, consider what we have learned this semester, as well as the history of artist’s software tools.

In the p5js web editor, create your own custom art-making tool. Consider color, brushes, images, buttons, text.

Start on paper in your notebook. What is the purpose of the tool? What is the interface? How will someone know how to use your tool? Is your tool intended for you or for someone else? Start doing very simple sketching of the tool and its functionality.

Remember that someone can right click on the canvas to Save As > image. But you can also build in a button, mousePress or keypress for saving an image of the canvas with the save() or saveCanvas() command.

  • save reference page

Part A - Prototype

  1. In your notebook or on the computer sketch out your software. What will things look like?
  2. What is the purpose/goal of your software?
  3. Sketch out the interface in your notebook, on the computer. Build a first version of your interface in code.

Part B - (required!) due October 3

Final Requirements

  1. A catchy title
  2. A short description
  3. Screenshots of the tool/software
  4. Documentation of how to use the software
    • optional: short clear well-produced video screencast of you demonstrating your software
  5. Ability to save with your software
  6. Create a folder of representative ‘good’ images that you’d want to demonstrate. There should be at least 3 works (saved screenshots) made with your tool.

References