M5 | L5 – Programe interactive

Astăzi vom afla despre:

  • Parametrii pozitiei mouse-ului

Aplicațiile pe care le vom folosi sunt:

Khan Academy

PROIECTE:

Rosia gustoasa

Distractie cu miscarea mouse-ului

Khan Editor : https://www.khanacademy.org/computer-programming/new/pjs

LINK Proiect Masina de Noapte: https://www.khanacademy.org/computer-programming/exemplu-masina-noapte/5296170020061184

  1. Interactiunea cu mouse-ul

Codul:

Explicatie :

Interactiunea cu mouse-ul se face folosind doi parametrii cheie speciali, mouseX si mouseY care spun programului pozitia curenta a mouse-ului. Programul nostru deseneaza de fiecare data cercul unde am pozitionat mause0ul dand impresia ca cercul ne urmareste cursorul. Putem sa ne jucam cu acesti doi parametri astfel :

  • Scoatem functia backround
  • Lasam numai unul dintre parametri
  • Inversam parametri
  1. Pas proiect

Vom schimba cerul in negru si vom desena stela care se misca

Codul:

noStroke();

// position of the car

var x = 10;

 

var xPos = 200;

var yPos = 200;

var xPos1 = 253;

var yPos1 = 269;

var xPos2 = 136;

var yPos2 = 76;

var xPos3 = 294;

var yPos3 = 121;

draw = function() {

background(0, 0, 0);

 

fill(255, 255, 0);

ellipse(xPos, yPos, 10, 10); 

ellipse(xPos1, yPos1, 10, 10);

ellipse(xPos2, yPos2, 10, 10); 

ellipse(xPos3, yPos3, 10, 10);

//grass

fill(0, 184, 6);

rect(0,320,400,100);

// draw the car body

fill(255, 0, 115);

rect(x, 306, 100, 20);

rect(x + 15, 283, 70, 40);

// draw the wheels

fill(77, 66, 66);

ellipse(x + 25, 326, 24, 24);

ellipse(x + 75, 326, 24, 24);

 

//x++;

xPos +=1 ;

yPos +=3;

xPos1 +=1;

xPos2 +=1;

yPos3 += 2;

};

 

  1. Pas proiect

Vom face o stea speciala care se misca dupa mouse

Codul:

noStroke();

// position of the car

var x = 10;

var xPos = 200;

var yPos = 200;

var xPos1 = 253;

var yPos1 = 269;

var xPos2 = 136;

var yPos2 = 76;

var xPos3 = 294;

var yPos3 = 121;

draw = function() {

background(0, 0, 0);

fill(255, 255, 0);

ellipse(xPos, yPos, 10, 10);

ellipse(xPos1, yPos1, 10, 10);

ellipse(xPos2, yPos2, 10, 10);

ellipse(xPos3, yPos3, 10, 10);

ellipse(mouseX, mouseY, 30, 30);

//grass

fill(0, 184, 6);

rect(0,320,400,100);

// draw the car body

fill(255, 0, 115);

rect(x, 306, 100, 20);

rect(x + 15, 283, 70, 40);

// draw the wheels

fill(77, 66, 66);

ellipse(x + 25, 326, 24, 24);

ellipse(x + 75, 326, 24, 24);

//x++;

xPos +=1 ;

yPos +=3;

xPos1 +=1;

xPos2 +=1;

yPos3 += 2;

};

 

  1. Provocare: Rosia gustoasa

https://en.khanacademy.org/computing/computer-programming/programming/interactive-programs/pc/challenge-tasty-tomato

  1. Provocare: Distractie cu mouse-ul

https://en.khanacademy.org/computing/computer-programming/programming/interactive-programs/pc/challenge-mouse-movement-mania