🇬🇧 English

Animacija kružnog kretanja pomoću alata p5.js

Ova jednostavna animacija demonstrira kako objekat može da se kreće po kružnici koristeći JavaScript biblioteku p5.js. U središtu se nalazi nepomična tačka, a crveni krug se kreće oko nje po unapred zadatoj putanji.

Pomoću trigonometrijskih funkcija cos() i sin(), izračunava se pozicija objekta na osnovu ugla koji se uvećava tokom vremena. Na taj način postiže se neprekidno kružno kretanje.

Primer animacije:

Kasnije ćemo prikazati dodatne efekte, kao što su trag kretanja, više objekata i kontrola brzine pomoću tastature. Takođe ćemo objasniti koje matematičke funkcije stoje iza ove vrste animacije.

Objašnjenje animacije kružnog kretanja

Animacija je rađena u Processing 4 koristeći biblioteku p5.js. Kao ulaz kreiramo skeč KruznoKretanjeSimulacija.js, a alat automatski generiše i index.html u kojem je definisan glavni canvas za crtanje.

Za kružno kretanje definišemo dve promenljive: radius (radijus, početna vrednost 100) i angle (ugao, početna vrednost 0).

U setup():

pozivamo createCanvas(500, 500, P2D) za dimenzije platna,
podešavamo režim uglova na radijane (angleMode(RADIANS)) i centriramo elipse (ellipseMode(CENTER)),
kanvas vezujemo za HTML kontejner kruzni-canvas (canvas.parent(container)).

U draw():

pozadina je svetlosiva (background(245)),
računamo centar: centerX = width/2, centerY = height/2,
poziciju tela: x = centerX + radius*cos(angle), y = centerY + radius*sin(angle),
crtamo centar i pokretni objekat (ellipse),
ugao uvećavamo za 0.03 radi animacije.

Detaljno objašnjenje strukture i koda

Projekat se sastoji od dva glavna fajla:

KruznoKretanjeSimulacija.js – p5.js skeč koji definiše ponašanje animacije.
index.html – HTML stranica koja sadrži <div> kontejner za canvas i učitava p5.js i skeč.

U index.html kreiramo <div id="kruzni-canvas"></div> koji služi kao roditelj za p5.js canvas. U JavaScript kodu, u setup() pozivamo canvas.parent(container) da bi p5.js ubacio kanvas baš u taj div.

U skeču definišemo:

radius – radijus kružne putanje
angle – trenutni ugao u radijanima

Funkcije setup() i draw() postavljaju okolinu i crtaju animaciju.


// KruznoKretanjeSimulacija.js
// Definišemo globalne promenljive
let angle = 0;           // početni ugao
let radius = 100;       // radijus putanje
let canvas;
let container;

function setup() {
  // Kreiramo canvas dimenzija 500×500
  canvas = createCanvas(500, 500, P2D);
  // Pronalazimo div kontejner u index.html
  container = document.getElementById('kruzni-canvas');
  // Uglovi u radijanima i centriranje elipsi
  angleMode(RADIANS);
  ellipseMode(CENTER);
  // Vežemo canvas za pronađeni div
  canvas.parent(container);
}

function draw() {
  // Očistimo pozadinu
  background(245);

  // Izračunavamo centar kanvasa
  let centerX = width / 2;
  let centerY = height / 2;

  // Položaj objekta na kružnici
  let x = centerX + radius * cos(angle);
  let y = centerY + radius * sin(angle);

  // Crtamo centar rotacije
  fill(100, 150, 255);
  stroke(0);
  ellipse(centerX, centerY, 10, 10);

  // Crtamo objekat koji se kreće
  fill(255, 0, 0);
  ellipse(x, y, 20, 20);

  // Uvećavamo ugao za animaciju
  angle += 0.03;
}


<!-- index.html -->
<!DOCTYPE html>
<html lang="sr">
<head>
  <!-- Meta tagovi, CSS i CDN za p5.js -->
  <script src="libraries/p5.min.js"></script>
  <script src="KruznoKretanjeSimulacija.js"></script>
  <style>
    body { margin: 0; padding: 0; }
    .canvasForHTML { width: 100%; border: solid thin #0000ff; }
  </style>
</head>
<body>
  <!-- Kontejner u koji će p5.js umetnuti canvas -->
  <div id="kruzni-canvas" class="canvasForHTML"></div>
</body>
</html>

Kružno kretanje aplikacija

Ova sekcija prikazuje interaktivnu aplikaciju za modelovanje kružnog kretanja. Cilj je omogućiti korisnicima da eksperimentisanje sa parametrima putanje i dinamike postane jednostavno i vizuelno.

U nastavku je prikazana aplikacija za prikaz kružnog kretanja. U plavom panelu mogu se menjati polazne vrednosti: poluprečnik putanje R, početna ugaona brzina, ugaono ubrzanje – sve pomoću slajdera. Ispod toga se nalazi panel sa dugmadima za navigaciju: Start, Jedan korak, Pauza i Reset. Takođe u istom panelu postoje checkbox za izbor smera obrtanja, prikaz informacija, brzine i ubrzanja. Animaciju je moguće usporiti do 20× preko dodatnog slajdera za usporenje, takođe smeštenog na plavom panelu.

Za više o tome pročitajte: Animacija kružnog kretanja u Processing‑u