Motion and Functions

// MOVEMENT 

// linear motion

// circular motion 

​

// ---------------------

// GLOBAL VARIABLE SPACE 

let cX = 0; // changing motion 

let cY; // changing motion 

let speed; // how fast my circle moves

let angle = 0; 

let rectX = 0; 

let cCol; // changing color  

let carXrect = 100 ; 

let carXcircle1 = 120;

let carXcircle2 = 180;

​

let tx1 = -10; 

let tx2 = 10; 

let tx3 = 30; 

​

​

// 1. Declare (Global Variable Space) 

// 2. Assign (Setup)

// 3. Use it (Plugging it into our function call)

// 4. Change it (Automatically: Function // KeyPressed or MousePressed)

​

function preload(){

}

// ---------------------

function setup() {

  createCanvas(400, 400);

  cX = 100; 

  cY = 100; 

  speed = 1; 

  cCol = color(random(255),random(255),random(255));

  // MODE

  angleMode(DEGREES);

}

function draw() {

  background(220);

  drawCircle();   // FUNCTION CALL

  drawTriangle(); // FUNCTION CALL 

  circularMotion(); // FUNCTION CALL  

  moveCars();     // FUNCTION CALL 

}

// ---------------------

// CHANGING VARIABLES 

function keyPressed(){

  cCol = color(random(255), random(255), random(255)); 

}

function mousePressed(){

  speed= random(-2,3); 

}

// ----------------------

// CUSTOM FUNCTION DEFINITIONS 

function drawCircle(){

  strokeWeight(10); 

  fill(cCol); 

  circle(cX,cY,50); 

​

  cY+=speed; 

  // IF STATEMENTS 

  if(cY > 425){

     cY = -25; 

  } 

  if(cY < -25){

    cY = 425;

  }

​

}

function drawTriangle(){

  triangle(tx1,10,tx2,20,tx3,10); 

  // AUTOMATIC 

  tx1+=2;

  tx2+=2; 

  tx3+=2; 

  if(tx1 > 400){

    tx1 = -10; 

    tx2 = 10;

    tx3 = 30; 

  }

}

function circularMotion(){

  // translate and rotate 

  push(); 

    translate(rectX, 400); // recenters (0,0);

    rotate(angle); 

    rectMode(CENTER); 

    rect(0,0,50,50);

    angle++; 

    rectX++; 

    if (rectX > 400){

      rectX = 0; 

    }

  pop();  // isolate code

}

function moveCars(){

  rect(carXrect,100,100,25);

  circle(carXcircle1,130,25);

  circle(carXcircle2,130,25);

  carXrect++;

  carXcircle1++; 

  carXcircle2++; 

  if(carXrect > 400){

    carXrect = 0; 

    carXcircle1 = 20; 

    carXcircle2 = 80; 

  }

​

}

function happyUnicorn(){

}

​

// FUNCTION 

// function call (method)

   // calls the function 

​

// function definition 

    // block of code or set of instructions that accomplishes a specific task