anyuser/index.html

## index.html
<html>
<head>
  <meta charset="UTF-8">
  <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="transform.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <style> body {padding: 0; margin: 0;} </style>
</head>

<body>
</body>
</html>

## sketch.js

function setup(){

	createCanvas(windowWidth,windowHeight);
	createObjects();
}

function draw()
{
	//update input
	updateInput();

	// draw background
	background(0);

	// draw stage with all attached objects
	stage.drawAll();
}

var stage;
var objects = []
var objCount = 20;
var rectWidth = 100;
var rectHeight = 40;

function createObjects()
{
	// create a stage where all the objects will be attached
	stage = new Transform();

	// create an empty object (not visible)
	var centerObj = new Transform();

	// move it to the center of the canvas
	centerObj.localPosition = createVector(windowWidth/2,windowHeight/2);

	// add it to the stage
	stage.addChild(centerObj);

	// define the center object as a parent for the following object
	var parentObj = centerObj;

	// create a few objects, all attached to each other
	for (var i = 0; i < objCount; i++)
	{
		// create an object
		var obj = new Transform();

		// set position, rotation and scale in local coordinates
		if( i != 0)
			obj.localPosition = createVector(rectWidth,0);

		obj.localRotation = 0;
		obj.localScale = createVector(0.9,0.9);

		// rotation point
		obj.pivot = createVector(0,rectHeight/2);

		// set draw function
		obj.draw = function() {

			stroke(0);
			strokeWeight(3);
			fill(255);
			rect(0, 0, rectWidth,rectHeight);

		};

		// add it to another object as a child
		parentObj.addChild(obj);

		// add it to the array so we can do something with it later
		objects.push(obj);

		// change parentObj, so we can attach the next object to this one
		parentObj = obj;
	}
}


function updateInput()
{
	// update (local) rotation for all objects
	for (var i = 0; i < objects.length; i++)
	{
		objects[i].localRotation = map(mouseX,0, windowWidth,-1,1) * 60;
	}
}


## transform.js


/// TRANSFORM

var Transform = function()
{
	this.localPosition = createVector(0,0);
	this.localRotation = 0;
	this.localScale = createVector(1,1);
	this.children = [];
	this.pivot = createVector(0,0);
	this.angleMode = DEGREES;
	this.enabled = true;
	this.parent = null;
}

Transform.prototype = {

	constructor: Transform,

	// draw recursively, first this object, then children
	drawAll: function(){

		push();
		angleMode(this.angleMode);

		translate(this.localPosition.x,this.localPosition.y);
		rotate(this.localRotation);
		scale(this.localScale.x,this.localScale.y);

		push();
		translate(-this.pivot.x,-this.pivot.y);
		this.draw();
		pop();


		for (var i = 0; i < this.children.length; i++) {

			if(!this.children[i].enabled)
				continue;

			this.children[i].drawAll();
		}

		pop();
	},

	// add a child object
	addChild: function(child)
	{
		if( child == this)
			return;

		if( child.parent )
			child.parent.removeChild(child);

		child.parent = this;
		this.children.push(child);
	},

	// remove a child object
	removeChild:function(child)
	{
		var childId = this.children.indexOf(child);
		if (childId > -1) {
		    this.children.splice(childId, 1);
			child.parent = null;
		}
	},

	// draw function (override this for visual objects)
	draw: function(){


	},
}
	<html>
	<head>
	<meta charset="UTF-8">
	<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>
	<script language="javascript" type="text/javascript" src="transform.js"></script>
	<script language="javascript" type="text/javascript" src="sketch.js"></script>
	<style> body {padding: 0; margin: 0;} </style>
	</head>

	<body>
	</body>
	</html>

	function setup(){

	createCanvas(windowWidth,windowHeight);
	createObjects();
	}

	function draw()
	{
	//update input
	updateInput();

	// draw background
	background(0);

	// draw stage with all attached objects
	stage.drawAll();
	}

	var stage;
	var objects = []
	var objCount = 20;
	var rectWidth = 100;
	var rectHeight = 40;

	function createObjects()
	{
	// create a stage where all the objects will be attached
	stage = new Transform();

	// create an empty object (not visible)
	var centerObj = new Transform();

	// move it to the center of the canvas
	centerObj.localPosition = createVector(windowWidth/2,windowHeight/2);

	// add it to the stage
	stage.addChild(centerObj);

	// define the center object as a parent for the following object
	var parentObj = centerObj;

	// create a few objects, all attached to each other
	for (var i = 0; i < objCount; i++)
	{
	// create an object
	var obj = new Transform();

	// set position, rotation and scale in local coordinates
	if( i != 0)
	obj.localPosition = createVector(rectWidth,0);

	obj.localRotation = 0;
	obj.localScale = createVector(0.9,0.9);

	// rotation point
	obj.pivot = createVector(0,rectHeight/2);

	// set draw function
	obj.draw = function() {

	stroke(0);
	strokeWeight(3);
	fill(255);
	rect(0, 0, rectWidth,rectHeight);

	};

	// add it to another object as a child
	parentObj.addChild(obj);

	// add it to the array so we can do something with it later
	objects.push(obj);

	// change parentObj, so we can attach the next object to this one
	parentObj = obj;
	}
	}


	function updateInput()
	{
	// update (local) rotation for all objects
	for (var i = 0; i < objects.length; i++)
	{
	objects[i].localRotation = map(mouseX,0, windowWidth,-1,1) * 60;
	}
	}


	/// TRANSFORM

	var Transform = function()
	{
	this.localPosition = createVector(0,0);
	this.localRotation = 0;
	this.localScale = createVector(1,1);
	this.children = [];
	this.pivot = createVector(0,0);
	this.angleMode = DEGREES;
	this.enabled = true;
	this.parent = null;
	}

	Transform.prototype = {

	constructor: Transform,

	// draw recursively, first this object, then children
	drawAll: function(){

	push();
	angleMode(this.angleMode);

	translate(this.localPosition.x,this.localPosition.y);
	rotate(this.localRotation);
	scale(this.localScale.x,this.localScale.y);

	push();
	translate(-this.pivot.x,-this.pivot.y);
	this.draw();
	pop();


	for (var i = 0; i < this.children.length; i++) {

	if(!this.children[i].enabled)
	continue;

	this.children[i].drawAll();
	}

	pop();
	},

	// add a child object
	addChild: function(child)
	{
	if( child == this)
	return;

	if( child.parent )
	child.parent.removeChild(child);

	child.parent = this;
	this.children.push(child);
	},

	// remove a child object
	removeChild:function(child)
	{
	var childId = this.children.indexOf(child);
	if (childId > -1) {
	this.children.splice(childId, 1);
	child.parent = null;
	}
	},

	// draw function (override this for visual objects)
	draw: function(){


	},
	}