​

​

/*

OR forwardslash asterisk followed by asterisk forwardslash to comment out whole sections of text

​

this way you can temporarly remove sections of code without removing your hard work :) 

​

or you can write a lot of explanation without it feeling too crowded..

​

anything gray will be commented out, code text should be in black and some colors - keep an eye out for this, sometimes it is an important explainations, or bits of code required for other functions..

​

another common troubleshooting method is to make sure your brackets open and close code { and }, and don't forget to end commands with a semi-colon ";" to tell that function where to stop

​

lastly, hit the stop and play button to refresh your preview, you can also select Auto-refresh

​

LETS GET STARTED :

​

first lets get an image .. On the left select the arrow to the right of Sketch Files > Create Folder > Name this "images", or whatever you'd like.

​

Select the arrow to the right of your images folder > Upload File > Drag and drop any image - now you have an image loaded in your sketch file, ready to reference in the code

*/

​

​

let img;

function preload() {

  img=loadImage('images/image.jpg');

}

/*

This lets my img be imported from my sketch files, I must call out the folder first with "images/flowers.jpg" in paranthesies

​

you can upload as many images and rename them to something simple for to call them into the code easier

*/

​

function setup() {

// this sets the rules for the rest of the code, there are many different function types

​

  let windowRatio = windowWidth / windowHeight;

  let imageRatio = img.width / img.height;

  if (windowRatio > imageRatio){img.resize(0,windowHeight-20)}

  else {img.resize(windowWidth-20,0)

}

    //this if-else statement now compares the two against eachother - if the window ratio is larger than the image ratio, then the image is resized based on width and height, so now the image loaded will resize automatically, always fully shown

  createCanvas(img.width, img.height);

  image(img, 0, 0,);

  //this tells the code to create a canvas based on image width/height and where to place the image within that canvas

}

/*

function draw(){

  if (mouseIsPressed === true){

    filter(DILATE);

  }

  else {filter(ERODE);}

}

*/

​

function keyTyped() {

  if (key === "s") {

    save("flowersp5.jpg");

  }

}

//this creates a function to automatically download your image when typing the s key. you can change the file name as you wish