# Projective Geometry Playground
## Introduction

This learning resource was created as Projective Geometry Playground in which learners/students can test a projective mapping with a simple WebApp that runs completely in the browser as runtime environment (see AppLSAC). A browser is available on almost every standard operating system and AppLSAC approach allows that the course content can be shared offline between devices.

### Wiki2Reveal

This learning resource can be displayed as Wiki2Reveal slides. It meant to be used by teachers, to explain in the classroom how the HTML and Javascript files are organized and how they can be used to explore and test the projective mappings created by students.

### Equirectangular Projection

The learning resources was created for the Wikiversity learning resource about the equirectangular projection in a way, that the playground provides a infrastructure to start with and the students can focus on the mathematical mapping.

### Objectives

The following aspects of Projective Geometry Playground are considered in detail:
* (1) What are the files in the projective playgrounds and why are the files part of the playground?
* (2) What is a mathematical function, that maps a pixel from the source coordinate system in the destination coordinate system?
* (3) How can the student check the result in browser and compare the generated result with the expected result?

## Target Group

The target group for Projective Geometry Playground of the learning resource
* are teachers that what to integrated projective geometry in their lessons and want to explain the foundations of using the Projective Geometry Playground as OER with Wiki2Reveal.
* students that want to perform a specific learning task given by the teacher and need again a bit support in using the Projective Geometry Playground

## Learning Activities - Preparation

Learning activities address mathematical skills in projective geometry. Nevertheless the Projective Geometry Playground provides the resource as HTML, CSS and Javascript files. So basic Javascript knowledge is required to use the Projective Geometry Playground. The requirements are:
* defining a function Javascript. Needed to define the coordinate transformation $T(x,y)=(x',y')$
* setting a specific pixel on a HTML canvas. This is needed because the source images are loaded in a canvas and the destination image is created in the canvas.

### Coordinate System of Graphics

The coordinate system of an image has a different orientation in y-axis. This is shown in the diagram.
* $x_{max}$ is the maximal value of the on the x-axis of the image
* $y_{max}$ is the maximal value of the on the y-axis the of the image
* The origin of the coordinate system is on the top left.
Keep this in mind, when you use the coordinate system for your experiments with projections (see also equirectangular projection.

### Explore Equirectangular Projection

The learning resource about the equirectangular projection provides the foundations to create the an equirectangular image. Start to explore the learning resource to understand, where the equirectangular projection is used and perform the mathematical learning task for the equirectangular projection. At the end of the learning resource, you will have the mathematical function for the coordinate transformation $T(x,y)=(x',y')$.

### Files used in Projective Geometry Playground

The files in Projective Geometry Playground are stored in Git-repository as OER:
* (index.html) contains the information about implementation task.
* (progeoplay.html) is the main file, that contains the canvas
* (js/projection.js) is the main Javascript file, that handles the projection onto the canvas
* (css/progeoplay.css) is the cascading style sheet, that handles the layout of the Projective Geometry Playground. Feel free to change that and adapt the Open Educational Resources to the CSS of your learning resources used in the classroom.