//codexdesign.org
//learning approach: p5.js (uses the JavaScript language)

//content: using bitmap images (sometimes called raster)
//code: loadImage(), image()
//declare, load, and call an image
//basic image mods: imageMode(CENTER), tint()

//image files must be made available in proximity to the html and js files
//images can be modified, sized, and/or distorted in the image()
//image size must match sketch size to be used in the background()

let landscape; //declare an image

function setup() {
createCanvas(400, 400);
colorMode(HSB); //new!
background(255);
landscape = loadImage('assets/mushrooms2.jpg'); // load the image
}

function draw()  {
tint(50, 255, 255); // HSB, yellow hue
//call image(name, x, y); or image(name, x, y, width, height)
image(landscape, 0, 0, 550, 400); //adjusted values to "fill the frame"
}

//tint(v1, v2, v3, [alpha])
//tint(value)
//tint(gray, [alpha])
//tint(values)
//tint(color)

//important information about images in p5.js:
//browser security prevents the display of local images called using javascript
//to include images in p5 projects images must be stored and accessed in a particular manner
//there are a few options for storing and accessing images

//basic option
//use a local chrome plugin to simulate a local server - https://www.youtube.com/watch?v=nMOwQQpZRus
//the chrome extension is here https://chrome.google.com/webstore/detail/web-server-for-chrome

//intermediate option
//create and use a github account to run project on web - https://www.youtube.com/watch?v=Q6Z0GUjrpxk

//advanced options
//option upload/sftp your project files to a webserver, if you are a student your school may provide webserver space
//option set up a local webserver - https://github.com/processing/p5.js/wiki/Local-server