Author: shtao@andrew.cmu.edu

sketch

    // doesn't work since not a local image
    // img = loadImage("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/10/rbd-hats.jpg")

    // notes say does work
    // does not work for me
    // img = loadImage("https://imgur.com/v1QmpAE.jpg")


// var img;

// function preload() {
//     img = loadImage("./cmu.jpg");
// }

// function setup() {
//     createCanvas(400, 400);
//     frameRate(10);
// }

// function draw() {
//     background(100);
//     var scaleX = max(1, mouseX) / width;
//     var scaleY = max(1, mouseY) / height;
//     image(img, 10, 10, img.width * scaleX, img.height * scaleY);
// }



function preload() {
    img = loadImage("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/10/rbd-hats.jpg");
}

function setup() {
    createCanvas(400, 400);
    frameRate(10);
}

function draw() {
    background(100);
    var scale = max(1, mouseX) / width;
    push();
    // we will rotate about the upper left corner of the image
    // that we will place at 10,10:
    translate(10, 10);
    // use mouseY value to determine rotation angle
    rotate(radians(90 * mouseY / height));
    // since we translated by 10,10, the "origin" for the image
    // is 0, 0:
    image(img, 0, 0, img.width * scale, img.height * scale);
    pop();
}

Hello!!

sketch

    // doesn't work since not a local image
    // img = loadImage("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/10/rbd-hats.jpg")

    // notes say does work
    // does not work for me
    // img = loadImage("https://imgur.com/v1QmpAE.jpg")


// var img;

// function preload() {
//     img = loadImage("./cmu.jpg");
// }

// function setup() {
//     createCanvas(400, 400);
//     frameRate(10);
// }

// function draw() {
//     background(100);
//     var scaleX = max(1, mouseX) / width;
//     var scaleY = max(1, mouseY) / height;
//     image(img, 10, 10, img.width * scaleX, img.height * scaleY);
// }



// function preload() {
//     img = loadImage("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/10/rbd-hats.jpg");
// }

// function setup() {
//     createCanvas(400, 400);
//     frameRate(10);
// }

// function draw() {
//     background(100);
//     var scale = max(1, mouseX) / width;
//     push();
//     // we will rotate about the upper left corner of the image
//     // that we will place at 10,10:
//     translate(10, 10);
//     // use mouseY value to determine rotation angle
//     rotate(radians(90 * mouseY / height));
//     // since we translated by 10,10, the "origin" for the image
//     // is 0, 0:
//     image(img, 0, 0, img.width * scale, img.height * scale);
//     pop();
// }


function preload() {
img = loadImage("https://imgur.com/v1QmpAE.jpg")}

function setup() {
    createCanvas(400, 400);
    frameRate(10);
}

function draw() {
    background(100);
    var scale = max(1, mouseX) / width;
    push();
    // we will rotate about the upper left corner of the image
    // that we will place at 10,10:
    translate(10, 10);
    // use mouseY value to determine rotation angle
    rotate(radians(90 * mouseY / height));
    // since we translated by 10,10, the "origin" for the image
    // is 0, 0:
    image(img, 0, 0, img.width * scale, img.height * scale);
    pop();
}