Three.js – Spinning Planets

After being inspired to do a space themed threeJs final, I learnt how to add in textures, control different functions and modify them to do what I want them to do as well as take something and put my own spin on it.

After deciding that I wanted my main focus to be on Earth and finding that just using the snippets felt like I wasn’t learning code and what threeJs can do, I decided to push it a little further. I did this by adding two meshes, one a jpg and one a png on top of each other to create layers. From there I wanted to have them spin at different speeds to make it clear that they were two different elements. I decided to have Earth spin slower than the clouds but still visible that it is rotating. Having the different meshes rotate at different speeds created a visually appealing loop.

The next element I wanted to add were some stars which I created using the particles snippet. However, instead of having them spin around screen, I wanted them to stay in one spot and then I wanted them to twinkle. In the particles snippet you can have the particles change colour but I decided that having one colour worked well and then having the particles slightly smaller and then fade in and out of brightness created a nice twinkle effect and that added another layer to the final output and tied the space theme together.

I wanted to add in one more element as it was becoming more obvious that this was based in space with a black background, stars and Earth, I thought that having a moon would also be a cool idea. It took a while to play with the code to get the positioning of the moon correct but once it was it was easy to create the rotation.

A lot of the struggles I had with this program Tim was able to help me with. I struggled with adding two meshes on top of each other but Tim suggested making the cloud layer slightly bigger would fix the problem and it did just that. He also came up with the math code to create the brightening and fading for my stars. Thank you Tim.

You can view it here – //threejsplaygnd.brangerbriz.com/s/?id=8238 and I believe I managed to get the moon working.

Understanding the code –

Below is the code. There are image which has my notes explaining what it does and then my actual code and the images I used.

Code –

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: #ffffff;

margin: 0;

overflow: hidden;

}

</style>

</head>

<body>

http://threejsplaygnd.brangerbriz.net/js/three.min.js

http://threejsplaygnd.brangerbriz.net/js/Detector.js

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var camera, scene, renderer;

var geometry, material, mesh; //the different variables that are used. These also control the differnt aspects so I can do different things with them individually

var cloud_geometry, cloud_material, cloud_mesh;

var moon_geometry, moon_material, moon_mesh;

function setup() {

var W = window.innerWidth, H = window.innerHeight;

renderer = new THREE.WebGLRenderer();

renderer.setSize( W, H );

document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 );

camera.position.z = 500;

scene = new THREE.Scene();

//moon

map = THREE.ImageUtils.loadTexture(‘https://lh3.googleusercontent.com/proxy/Knq3LMr0rgQKzbVDRM_S-f9jUzEqHN8tOWQU59BJNjoIjfYNeTE4mlaMb3wH1ZuVXQfjMoj_vVUtKenJmodYos-h’); //this loads the image using the imageURL

moon_geometry = new THREE.SphereGeometry(150, 100, 100); //this controls the size

moon_material = new THREE.MeshBasicMaterial({shading: THREE.FlatShading, color: 0xdcdcdc, map: map}); //this controls the colour, shading, transparency and opacity (if stated) of the shape

moon_mesh = new THREE.Mesh(moon_geometry, moon_material);

map.wrapS = map.wrapT = THREE.RepeatWrapping;

map.repeat.set( 1, 1 );

moon_mesh.scale.x = moon_mesh.scale.y = moon_mesh.scale.z = 0.39; //this controls the size

moon_mesh.position.y = 150.23; //this controls the X and Y locations

moon_mesh.position.x = 180.23;

scene.add(moon_mesh); //this loads everything

//Clouds

map = THREE.ImageUtils.loadTexture(‘https://upload.wikimedia.org/wikipedia/commons/d/df/Earth-clouds.png’); //this loads in the image url to use as a texture for the shape

cloud_geometry = new THREE.SphereGeometry(150, 100, 100);

cloud_material = new THREE.MeshBasicMaterial({shading: THREE.FlatShading, color: 0xdcdcdc, map: map, transparent: true, opacity: 1});

cloud_mesh = new THREE.Mesh(cloud_geometry, cloud_material);

map.wrapS = map.wrapT = THREE.RepeatWrapping;

map.repeat.set( 1, 1 );

cloud_mesh.scale.x = cloud_mesh.scale.y = cloud_mesh.scale.z = 1.01;

scene.add(cloud_mesh);

//Earth

map = THREE.ImageUtils.loadTexture(‘https://steamuserimages-a.akamaihd.net/ugc/545263034473954343/68F4AB04814E6E57B78A848CEF3852476F0B00A8/?imw=637&imh=358&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true’);

geometry = new THREE.SphereGeometry(150, 100, 100);

material = new THREE.MeshBasicMaterial({shading: THREE.FlatShading, color: 0xdcdcdc, map: map});

mesh = new THREE.Mesh(geometry, material);

map.wrapS = map.wrapT = THREE.RepeatWrapping;

map.repeat.set( 1, 1 );

scene.add(mesh);

//Stars

geometry = new THREE.Geometry();

for ( i = 0; i < 5000; i ++ ) {

var vertex = new THREE.Vector3();

vertex.x = 1000 * Math.random() – 500;

vertex.y = 1000 * Math.random() – 500;

vertex.z = 1000 * Math.random() – 500;

geometry.vertices.push( vertex );

}

material = new THREE.ParticleBasicMaterial( { size: 3, sizeAttenuation: false, transparent: true } );//this mentions the size of the star pixels

material.color.setHex( 0xff00ff );

particles = new THREE.ParticleSystem( geometry, material );

particles.sortParticles = true;

scene.add( particles );

//Background

bg = document.body.style;

bg.background = ‘#000000’;

}

function draw() {

requestAnimationFrame( draw );

//rotation cntrols the speed and the angle of which is rotates

cloud_mesh.rotation.x = Date.now() * 0.0000;

cloud_mesh.rotation.y = Date.now() * 0.0003;

cloud_mesh.rotation.z = Date.now() * 0.00000;

mesh.rotation.x = Date.now() * 0.0000;

mesh.rotation.y = Date.now() * 0.0001;

mesh.rotation.z = Date.now() * 0.0000;

moon_mesh.rotation.x = Date.now() * 0.0000;

moon_mesh.rotation.y = Date.now() * 0.0001;

moon_mesh.rotation.z = Date.now() * 0.0000;

var time = Date.now() * 0.0003; //size of pixel stars

h = (((Math.sin( Date.now() * 0.002 ))+0.75)/4)+.2; //controls the speed at which the star pixels fade and brighten

console.log(h);

material.color.setHSL( 0.5, 1, h ); //colour of pixel stars

renderer.render( scene, camera );

}

setup();

draw();

</script>

</body>

</html>

Images –

The cloud image won’t show on a white page but you can click here to see the image or go here to the website – https://commons.wikimedia.org/wiki/File:Earth-clouds.png

Earth website – https://steamcommunity.com/sharedfiles/filedetails/?id=348783119

https://lh3.googleusercontent.com/proxy/Knq3LMr0rgQKzbVDRM_S-f9jUzEqHN8tOWQU59BJNjoIjfYNeTE4mlaMb3wH1ZuVXQfjMoj_vVUtKenJmodYos-h

Moon can be seen here – http://solarviews.com/cap/moon/moonmap.htm

Video –

Processing – Ellipse Painting

The ellipse painting, I wanted to be able to create an image in the code

For my space pixel painting set of code, I dragged and inserted my images to processing so that they are located in the data directory of the current sketch. I set up the screen size to be fullscreen and then I loaded in the different images so that they are ready to use.

You start by setting up the variable name and tell processing what it is equal to and in this case you tell it to loadImage and then you put in the full name of the filename. For this project I used jpg and png for my different images. I also resized the images so that they fit the screen better. I set the background to black to resemble space. I also decided that I didn’t want the cursor to show unless the mouse is pressed.

I wanted there to be two different parts to this code. One where people can watch something happen and another where they can take part and play with it a little. When the mouse is released it will show the image that is made out of ellipses in front of you. It will continue to add ellipses to the image creating a twinkling effect until the mouse is pressed. This has two functions. One it restarts the code so you can see it from the beginning and two it shows the image in full without ellipses and you can move the cursor around which is now a rocket ship.

Understanding the code –

Below is the code. There is the image which has my notes explaining what it does and then my actual code and the images I used.

Code –

PImage galaxySpace3;
PImage rocketFire;
PImage spaceAlone2;

void setup() {
fullScreen();
galaxySpace3 = loadImage(“galaxySpace3.jpg”);
spaceAlone2 = loadImage(“spaceAlone2.jpg”);
spaceAlone2.resize(displayWidth, displayHeight);
rocketFire = loadImage(“rocketFire.png”);
rocketFire.resize(0, 500);
background(0);
noCursor();

}

void mouseReleased() {
background(0);
noCursor();
}

void draw() {
for (int i = 0; i < 75; i++) {
float x = random(width);
float y = random(height);
color c = galaxySpace3.get(int(x), int(y));
fill(c);
noStroke();
ellipse(x, y, 10, 10);
}

if (mousePressed) {
background(spaceAlone2);
cursor(rocketFire);
}
}

Images –

Video –

Conditional Design – Constellations

Constellations

Take turns placing a dot in the most empty space on the paper as quick as possible, using your chosen colour. For 3-5 minutes
Connect the dots you made with a line that doesn’t cross the lines of another player.
These lines must be straight. Try complete this is in under 5 minutes
Pay attention as you can have up to 2 lines coming off of one dot
Each dot must have at least one line coming off of it
You don’t have to only draw off your own lines and dots

This code gets people to think quickly about where to put the dots in the most empty space of the page. The lines which can be difficult to quickly add onto the dots gets people to think more about where they are going to place their next line. The end result makes up what looks like a constellations.

The bright colours mimic the colourfulness of my other sets of code. I decided on white paper as the colours didn’t show on black paper and white makes the colours and the end result stand out.

Week 6

I was nervous for class and that maybe my code wouldn’t work but it all went really well and people seemed to like what I had made. It was impressive to see what people had made and how we had further developed the same skills in class and all came up with outcomes. I loved the ones where you can interact with the sketch. I didn’t take a lot of photos at this but it all went really well.