Prototype

For our prototype I’m working on the code in p5. Here is my code so far:

let angle = 0;
let sunRatio = 400;
let sunDistance = 200;
var mercText;
var earthText;
function setup()
{
createCanvas(windowWidth,600, WEBGL);
background(20, 20, 20);
sunDistance = (-windowWidth/2) – 400;
mercText = loadImage(“mercuryTexture.jpeg”);
earthText = loadImage(“earthTexture.jpeg”);

}

function draw()
{

background(0);
stroke(255, 255, 100); //sun
fill(255, 220, 0);
translate(sunDistance ,0, 0);
//rotateY(frameCount * 0.01);
sphere(sunRatio);

stroke(255,220,165); //mercury
fill(85, 55, 20);
translate(200 + 22.7, 0 ,0);
//rotateY(frameCount * 0.01);
texture(mercText);
sphere(sunRatio/277);
angle += 0.01;

fill(211, 113, 0); //venus
stroke(255, 155, 0);
translate(200 + 35.9, 0, 0);
//rotateY(frameCount * 0.009);
sphere(sunRatio/113);
angle += 0.01;

fill(127, 208, 255); //earth
stroke(235, 235, 255,200);

translate(200 + 50.8, 0, 0);
//rotateY(frameCount * 0.008);
texture(earthText);
sphere(sunRatio/108);
angle += 0.01;

fill(231, 133, 0); //mars
stroke(255, 155, 0);
translate(200 + 75.4, 0, 0);
//rotateY(frameCount * 0.007);
sphere(sunRatio/208);
angle += 0.01;

fill(188, 136, 84); //jupiter
stroke(150, 150, 90);
translate(200 + 256.1, 0, 0);
//rotateY(frameCount * 0.006);
sphere(sunRatio/9);
angle += 0.01;

fill(214, 163, 61); //saturn
stroke(224+20, 173+20, 71+20);
translate(200 + 492.6, 0, 0);
//rotateY(frameCount * 0.005);
sphere(sunRatio/11.4);
angle += 0.01;
// fill(255, 0,0);
//sphere(sunRatio/9, 10, sunRatio/9);

fill(127, 208, 255); //uranus
stroke(220,200,200);
translate(200 + 1003.5, 0, 0);
//rotateY(frameCount * 0.004);
sphere(sunRatio/26.8);
angle += 0.01;

fill(100, 100, 255); //neptune
stroke(74, 44, 12);
translate(200 + 1502, 0, 0);
//rotateY(frameCount * 0.003);
sphere(sunRatio/27.7);
angle += 0.01

}

 

Here’s a screenshot of what it looks like when I run it:

example

Some of the planets are hard to see from here but they are much easier to see when actually on the computer.

Here is the link to the online version:

https://editor.p5js.org/aramakrishnan/full/Sy_QGV8aX

(The rotate is commented out on this code becauseĀ  I commented it out so I could make sure the texture on the planets looked right.)

I’m still working on getting the planets to rotate in place instead of around the sun, getting all the textures on the planets, and being able to zoom in with the click of the mouse. The rotation just needs a little bit more research into WebGL, the textures are easy to put in place, and the clicking will be the most work but it is all doable!

2 thoughts on “Prototype”

  1. You guys are so talented! I really liked the interactive aspect of this project, that it was different that just using the mouse on the screen! I think thought that a user might be afraid to break the laser-cut ball because it seems quite fragile. We did talk about how in reality, it is quite a sturdy structure but I think it is because the entwined wires is white short. Definitely think about getting a bit more flexible wires and longer in length! I think it might make the interaction more ‘flexible’ or ‘easy’. Can’t wait to see it all finished (Even though you guys are basically done ahaha)!

Leave a Reply