​

//var (): they have a scope -global or local depending on where it is regarding setup

//images can be setup or drawn from an instruction

// You can pre-load files and the call them within the code so they run the image once

​

var img;

function setup(){

    //SOLVE THIS

    img= https:(//pixabay.com/photo-927765/);   

}

//TRY

//begin shape() is for drawing an image with vertexs

//bezierVertex() are a curve drawn as if it was in Illustrator

​

//TRY

//To create movement and change, use variables

//Declare global variable

        var x;

        var y;

        function setup () {

            create canvas (400,400);

​

//Asign values to the variables

        x = 10;

        y = 10;

    //so that it randomizes from the same color mode

    colormode (RGB)

    }

//Move the figure within the x and y that you created

    function draw () {

    background (220);

        y = y+1;

        x = x+1;

        //here you can use x+random (x,y); to create a crazy movement. You add the + so that it moves to a new place if you just make x=random(number) it moves like crazy

    //if we take the background out then we stop seeing just the -new final place- and we see where the ball has been before it is like movie vs drawing

    //in order to make something whole screen you would use create canvas(windowWidth, windowHeight); and you put it on function setup() so it gets done once

    //in order to get a random color you create a variable for color:

    //var colorr;

    //var colorg

    //var colorb

    //function draw(){

    //colorr=random(255)

    //colorg=random(255)

    //colorb=random(255)

    //fill (colorr, colorg, colorb);

    // in order to make it move around the page you would randomize its position

    //x = random (width);

    //y = random (height);

    //in order to make it move slowly around the canvas you would add a random position 

    //x = x+random (-2,2)

    // y= y+random(-2,2);

    //to get a figure right in the midle do the with and height /2

    //ellipse (width/2, height/2, 50, 50);

    //to hook values to the mouse use mouseX 

    //ellipse (width/2, height/2, mouseY, mouseX) this is going to work counterintuitevly

    //homework: make the drawing interactive and use variables to draw that repeats, also make the background change with the mouse and use preload

    //translate moves the (x,y) to a different place in the coordinate and it works with rotate

    //push introduces the translate and pop releases it

    //do a wheel moving with the mouse

    /*

    function setup(){

    createCanvas (windowwidth, windoHeight;

    rectMode(center);

    }

    function draw(){

    background (220);

    push();

    translate (width/2, height/2);

    rotate(radians(mouseX));

    rect (0,0100,100);

    pop();

    ellipse(width/2,height/2,10,10);

    */

    //counsel log the values of mouse x an mouse y in figures so that you can figure out where are they and wher you want them

    //fill can have various arguments so it has opacity which is the fourth one

    ellipse (x,y,50,50);

    }

​

​