オブジェクトとは、複数の関連するデータを1つにまとめたものです。

例えば、四角形を描画する際に、その座標を変数として保持することを考えてみましょう。

座標はX座標とY座標がありますから、単純にコードを書くと次のようになります。

let x = 100; //X座標
let y = 200; //Y座標
rect(x, y, 100, 100); //四角形を描画

これでも問題はありませんが、本来X座標とY座標は関連するデータです。
このような場合、オブジェクトを活用すると、X座標とY座標をまとめることができ、より良いコードを書くことができます。

オブジェクトを使うと次のように書けます。

let obj = { x: 100, y: 200 };
rect(obj.x, obj.y, 100, 100); //四角形を描画

コードを解説します。

{ x: 100, y: 200 }

ここがオブジェクトを定義している部分です。
オブジェクトは {} で囲んで表現します。
まず x を宣言し、値として 100 を代入しています。
次に y を宣言し、値として 200 を代入しています。
これらのオブジェクト内部の変数のことをプロパティといいます。
よってこのコードは、xとyをプロパティとして持つオブジェクトを定義したと言えます。

このオブジェクトを変数 obj に代入し、

rect(obj.x, obj.y, 100, 100); //四角形を描画

ここで実際にオブジェクトのプロパティの値を取得して、利用しています。

コード全文は次のようになります。
オンラインエディタ に貼り付けて、実行してみましょう。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let obj = { x: 100, y: 200 };
  rect(obj.x, obj.y, 100, 100); //四角形を描画
}

X座標が100、Y座標が200の位置を起点として、四角形が描画されると思います。

オブジェクトのプロパティの値は後から変更することも可能です。
例えば、次のようなコードを書くこともできます。

let obj = { x: 0, y: 0 };
obj.x = 100;
obj.y = 200;
rect(obj.x, obj.y, 100, 100); //四角形を描画

オブジェクトはJavaScriptにおいてはかなり多用される構文になりますので、ぜひ慣れておきましょう。