Lecture 3
Canvas transformations
The Canvas coordinate system.
Review coordinate system
The Canvas coordinate system
//fillRect(position x, position y, width, height)
context.fillRect(1000, 400, 50, 50);Canvas drawImage()
context.drawImage(newImg, 0, 0);
context.drawImage(newImg, 250, 10, 200, 56);
//context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
context.drawImage(newImg, 10, 25, 60, 55, 520, 80, 120, 110);drawImage()
//context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// img Specifies the image, canvas, or video element to use
// sx (Optional.) The x coordinate where to start clipping
// sy (Optional.) The y coordinate where to start clipping
// swidth (Optional.) The width of the clipped image
// sheight (Optional.) The height of the clipped image
// x The x coordinate where to place the image on the canvas
// x The x coordinate where to place the image on the canvas
// y The y coordinate where to place the image on the canvas
// width (Optional.) The width of the image to use (stretch or reduce the image)
// height (Optional.) The height of the image to use (stretch or reduce the image)
// check references here https://www.w3schools.com/tags/canvas_drawimage.aspCanvas transformations
context.translate(50, 50);
Canvas transformations
context.rotate(-30);
New Objects()
Working with media in the canvas involves working with specific objects.
new Object()
Image Object, Audio Object
//importing an image
let newImg = new Image();
newImg.src = "assets/img/tesse.gif"
//importing a sound
let bounce = new Audio('assets/media/bounce.mp3');Importing objects does not mean they are used yet:
//importing an image
let newImg = new Image();
newImg.src = "assets/img/tesse.gif";
context.drawImage(newImage, 50, 50);
//importing a sound
let bounce = new Audio('assets/media/bounce.mp3');
bounce.play();About Generative art
The work of Vera Molnár
The dot is black
https://yewtu.be/watch?v=gVSeSV08UEA https://yewtu.be/watch?v=Hns4GVWuf5k https://yewtu.be/watch?v=hdtKeYkyhzs