volkanozcan/index.html

## index.html
<html>

<head>
    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/p5.js"></script>
    <!-- uncomment lines below to include extra p5 libraries -->
    <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/addons/p5.dom.js"></script>
    <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/addons/p5.sound.min.js"></script>
    <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
    <script language="javascript" type="text/javascript" src="sketch3.js"></script>
    <script type="text/javascript">
    window.onresize = function() {
        location.reload();
    }
    </script>
    <!-- this line removes any default padding and style. you might only need one of these values set. -->
    <style>
    body {
        padding: 0;
        margin: 0;
    }

    .fixed {
        position: fixed;
        left: 50%;
    }
    </style>
</head>

<body>
</body>

</html>

## sketch3.js
var aci = 0;
var theta = 45;
var stars = []
var starSize = 200;
//
function setup() {
    var x = windowWidth;
    var y = windowHeight;
    createCanvas(x, y);
    fill(255, 40, 255);
    bck = loadImage("space.jpg");
    image(bck, 0, 0);
    frameRate(30);
    for (var i = 0; i < starSize; i++) {
        stars.push(new Star());
    }
    img = loadImage("earth.png");
    moon = loadImage("moon.png");
    astronot = loadImage("astronot.png");

}

function draw() {
    background("black");


    noStroke();
    push();
    translate(0, 0);

    for (var i = stars.length - 1; i >= 0; i--) {

        stars[i].babyStar();
        stars[i].shine();

    };
    pop();

    var r = height / 2 - 50;
    var ci = aci[length]
    x = sin(radians(frameCount)) * width / 2;
    y = sin(radians(frameCount)) * height / 2;

    push();

    fill("blue");

    //ellipseMode(CENTER);
    imageMode(CENTER)
    translate(width / 2, height / 2);
    var x = r * cos(theta);
    var y = r * sin(theta);
    image(img, x, y, img.width / 5, img.height / 5);
    push();
    rotate(cos(frameCount / -100.0));
    image(astronot, 0, 0, astronot.width / 2, astronot.height / 2);
    pop();

    push();
    translate(x, y);
    var dx = 150 * cos(theta);
    var dy = 150 * sin(theta);
    image(moon, dx, dy, moon.width / 20, moon.height / 20);
    pop();

    theta += 0.002
    pop();


}

function Star() {
    this.x = random(width);
    this.y = random(height);
    this.color = random(100, 255)
    this.speed = 0.01;
    this.shine = function() {

        this.x += random(-this.speed, this.speed + 1);
        this.y += random(-this.speed, this.speed);
        if (this.x > width) {
            this.x = 0;
        }
    }
    this.babyStar = function() {
        stroke(random(50, 255));
        point(this.x, this.y);
    }

}
	<html>

	<head>
	<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/p5.js"></script>
	<!-- uncomment lines below to include extra p5 libraries -->
	<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/addons/p5.dom.js"></script>
	<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/addons/p5.sound.min.js"></script>
	<!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
	<script language="javascript" type="text/javascript" src="sketch3.js"></script>
	<script type="text/javascript">
	window.onresize = function() {
	location.reload();
	}
	</script>
	<!-- this line removes any default padding and style. you might only need one of these values set. -->
	<style>
	body {
	padding: 0;
	margin: 0;
	}

	.fixed {
	position: fixed;
	left: 50%;
	}
	</style>
	</head>

	<body>
	</body>

	</html>
	var aci = 0;
	var theta = 45;
	var stars = []
	var starSize = 200;
	//
	function setup() {
	var x = windowWidth;
	var y = windowHeight;
	createCanvas(x, y);
	fill(255, 40, 255);
	bck = loadImage("space.jpg");
	image(bck, 0, 0);
	frameRate(30);
	for (var i = 0; i < starSize; i++) {
	stars.push(new Star());
	}
	img = loadImage("earth.png");
	moon = loadImage("moon.png");
	astronot = loadImage("astronot.png");

	}

	function draw() {
	background("black");


	noStroke();
	push();
	translate(0, 0);

	for (var i = stars.length - 1; i >= 0; i--) {

	stars[i].babyStar();
	stars[i].shine();

	};
	pop();

	var r = height / 2 - 50;
	var ci = aci[length]
	x = sin(radians(frameCount)) * width / 2;
	y = sin(radians(frameCount)) * height / 2;

	push();

	fill("blue");

	//ellipseMode(CENTER);
	imageMode(CENTER)
	translate(width / 2, height / 2);
	var x = r * cos(theta);
	var y = r * sin(theta);
	image(img, x, y, img.width / 5, img.height / 5);
	push();
	rotate(cos(frameCount / -100.0));
	image(astronot, 0, 0, astronot.width / 2, astronot.height / 2);
	pop();

	push();
	translate(x, y);
	var dx = 150 * cos(theta);
	var dy = 150 * sin(theta);
	image(moon, dx, dy, moon.width / 20, moon.height / 20);
	pop();

	theta += 0.002
	pop();


	}

	function Star() {
	this.x = random(width);
	this.y = random(height);
	this.color = random(100, 255)
	this.speed = 0.01;
	this.shine = function() {

	this.x += random(-this.speed, this.speed + 1);
	this.y += random(-this.speed, this.speed);
	if (this.x > width) {
	this.x = 0;
	}
	}
	this.babyStar = function() {
	stroke(random(50, 255));
	point(this.x, this.y);
	}

	}