Created
January 22, 2017 23:58
-
-
Save nataliefreed/4dc2d675bc22a826fbc63361ae24b354 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Cat photo used in class example by Nick Nunns on Flickr: https://www.flickr.com/photos/neeb/334265966/ | |
var img; | |
//preload will load before setup runs | |
function preload() { | |
//this relative file path starts in the same folder as your sketch. | |
//In other words, in this example, make a folder called images in the same | |
//folder as your sketch file (sketch.js) and then put the image file ("kittens.jpg") | |
//inside of that. | |
img = loadImage("images/kittens.jpg"); | |
} | |
function setup() { | |
createCanvas(img.width, img.height); | |
image(img, 0, 0); //draw the image to the canvas | |
console.log("Image width: " + img.width + " height: " + img.height); | |
//one of the built-in filters to try out for inspiration! More at: https://p5js.org/reference/#/p5/filter | |
//uncomment to test | |
//filter(POSTERIZE, 5); | |
//change pixels, draw a blue stripe | |
loadPixels(); | |
for(var i=4*640*100;i<4*640*200;i+=4) { | |
pixels[i] = 0; //red | |
pixels[i+1] = 0; //green | |
pixels[i+2] = 255; //blue | |
pixels[i+3] = 255; //alpha (transparency - works with PNGs, not JPGs) | |
} | |
updatePixels(); | |
//change tint of pixels in a stripe by modifying the red channel | |
loadPixels(); | |
for(var i=4*640*300;i<4*640*400;i+=4) { | |
pixels[i] = pixels[i]-50; //red | |
} | |
updatePixels(); | |
} | |
function draw() { | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment