diff --git a/README.md b/README.md
index b001466..c74d289 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,5 @@
-# p5_clock
\ No newline at end of file
+# Interactive P5 Plane Map
+
+This example demonstrates a simple interactive map using [p5.js](https://p5js.org/). Click anywhere on the canvas to add a plane that moves across the screen. Planes wrap around the edges.
+
+Open `index.html` in a web browser to view the demo.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5747758
--- /dev/null
+++ b/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+ Interactive Plane Map
+
+
+
+
+
+
+
diff --git a/sketch.js b/sketch.js
new file mode 100644
index 0000000..63688e4
--- /dev/null
+++ b/sketch.js
@@ -0,0 +1,50 @@
+let planes = [];
+let planeImg;
+
+function setup() {
+ createCanvas(windowWidth, windowHeight);
+ imageMode(CENTER);
+ // load plane icon as triangle if planeImg not loaded
+}
+
+function preload() {
+ planeImg = loadImage('https://upload.wikimedia.org/wikipedia/commons/e/e0/Plane_font_awesome.svg', () => {}, () => { planeImg = null; });
+}
+
+function windowResized() {
+ resizeCanvas(windowWidth, windowHeight);
+}
+
+function draw() {
+ background(200, 220, 255); // simple blue background representing sky/map
+
+ // update and draw planes
+ for (let plane of planes) {
+ plane.x += plane.vx;
+ plane.y += plane.vy;
+
+ if (plane.x > width) plane.x = 0;
+ if (plane.x < 0) plane.x = width;
+ if (plane.y > height) plane.y = 0;
+ if (plane.y < 0) plane.y = height;
+
+ push();
+ translate(plane.x, plane.y);
+ rotate(plane.angle);
+ if (planeImg) {
+ image(planeImg, 0, 0, 20, 20);
+ } else {
+ fill(255, 0, 0);
+ noStroke();
+ triangle(-10, 8, 10, 0, -10, -8);
+ }
+ pop();
+ }
+}
+
+function mousePressed() {
+ // add new plane at mouse with random velocity
+ let angle = random(TWO_PI);
+ let speed = random(1, 3);
+ planes.push({ x: mouseX, y: mouseY, vx: cos(angle)*speed, vy: sin(angle)*speed, angle });
+}