there is my code
http://codepen.io/usf/pen/pGscf
in this part
function animate() {
//sun.rotation.x = t/1000;
sun.rotation.y += 0.01;
t += 0.1;
earth.position.x = Math.sin((2*Math.PI/24*60*60)*timeScale*t)*300;
earth.position.z = Math.cos((2*Math.PI/24*60*60)*timeScale*t)*200;
camera.position.set(sun.position);
camera.lookAt(earth.position);
//sun.lookAt(earth.position);
renderer.clear();
renderer.render(scene, camera);
window.requestAnimationFrame(animate, renderer.domElement);
};
i want to look on earth from sun (lol), but i see nothing.
how can i fix that? I think there is some little mistake, but can't find it out
There is something wrong here: camera.position.set(sun.position);
The set method should be used like this :
set: function ( x, y, z ) {
this.x = x;
this.y = y;
this.z = z;
return this;
}
Use camera.position.copy(sun.position) instead.
Related
I'm quite new to JS so please excuse my ignorance but I can't figure out why my animation if statement doesn't work if I declare my speed variable locally in the move() function.
If I don't declare the speed variable globally, the girl gets to the windowWidth and gets stuck moving a couple of pixels back and forth. Basically staying there rather than moving the other way.
let speed = 2;
class Girl {
constructor(x, y) {
this.x = x,
this.y = y
}
body() {
noStroke();
fill(239, 101, 233);
rect(this.x, this.y, 20, 40);
fill(249, 192, 155);
triangle(this.x, this.y, this.x + 20, this.y, this.x + 10, this.y + 15);
}
move() {
if (this.x > windowWidth + 50 || this.x < -50) {
speed = speed * -1;
}
this.x = this.x + speed;
}
}
I should mention I'm using the p5 library in case I'm using any funky functions. It works but I'm sure I could tidy this up a little bit. Any advice would be more than welcome.
Thanks in advance!
You should not declare it as a local variable inside the move method (as that would make it get re-initialised to 2 on every call), but you should make it a property of the instance that gets initialised in the constructor and modified in the move method (just like x and y).
class Girl {
constructor(x, y) {
this.x = x;
this.y = y;
this.speed = 2;
}
body() {
noStroke();
fill(239, 101, 233);
rect(this.x, this.y, 20, 40);
fill(249, 192, 155);
triangle(this.x, this.y, this.x + 20, this.y, this.x + 10, this.y + 15);
}
move() {
if (this.x > windowWidth + 50 || this.x < -50) {
this.speed = this.speed * -1;
}
this.x = this.x + this.speed;
}
}
Because the value of speed is shared across multiple calls to move. If you declare it inside move then it gets created for each call to move, thus any previous value of speed will be ignored.
If you don't want speed to be a global variable, then you can make it a property of the class Girl:
class Girl {
constructor(x, y) {
this.x = x;
this.y = y;
this.speed = 2; // make 'speed' a property of the class
}
/* ... */
// use 'this.speed' inside 'move' instead of just 'speed'
move() {
if (this.x > windowWidth + 50 || this.x < -50) {
this.speed = this.speed * -1;
}
this.x = this.x + this.speed;
}
}
Problem here is this.x > windowWidth + 50 || this.x < -50. Try to log this inside move() function and you will see that it is referring to move().x instead of Girl.x. So this.x is undefined and undefined > 10 + 50 is always false.
P.s. I dont know p5 so this is vanilla.
So to fix this you need to declare another variable to get Girl scope.
var Girl = function(){
var self = this;
//code goes here
function move(){
self.x = setValue;
console.log(this.x) //undefined
}
}
I am trying to make a simulation of gravity and the sort. I am just starting off right now, but I've already encountered a problem I can't seem to find the answer to. I am trying to make it so my particle speeds up exponentially by the gravity variable using another variable. But when I run this code, it makes the particle[0].y = NaN. Help is very appreciated.
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var gravity, objectDensity, force, parVelo;
gravity = 9.8;
function Object(mass, x, y, w, h) {
this.m = mass;
this.x = x;
this.y = y;
this.w = w;
this.h = h;
};
var particle = [];
particle.push(new Object(10,10,10,20,20));
function draw() {
parVelo += gravity;
ctx.clearRect(0,0,c.width,c.height);
for(let i = 0, len = particle.length; i < len; i++) {
ctx.fillRect(particle[i].x,particle[i].y,particle[i].w,particle[i].h)
particle[i].y += parVelo;
}
}
setInterval(draw,1000);
You need to set parVelo = 0; probably at the same time as setting the initial value for gravity.
Im trying to get a very simple inheritance pattern for my Project going, extending from a base class into a specialized class. However, my specialized class's attributes are being overwritten by the parent's attributes.
Why is that and how can i fix it ?
thanks,
function Ship(className, x, y){
this.className = className;
this.x = x;
this.y = y;
this.speed = 0;
}
function Corvette(className, x, y){
this.className = className;
this.x = x;
this.y = y;
this.speed = 100;
Ship.call(this, className, x, y)
}
Corvette.prototype = Object.create(Ship.prototype);
var ship = new Ship("Biggie", 50, 50);
var corvette = new Corvette("Smallish", 50, 50);
console.log(Corvette.className) // "Smallish" - correct via parameter.
console.log(Corvette.speed) // should be 100, is 0 - not correct, "static" from parent attribute
console.log(Corvette.constructor.name) // Ship
Why you have the same properties in the child object which are already in the parent's?
I suggest you to do
function Ship(className, x, y, speed = 0) {
this.className = className;
this.x = x;
this.y = y;
this.speed = speed;
}
function Corvette(className, x, y, speed = 100) {
Ship.call(this, className, x, y, speed);
}
Corvette.prototype = Object.create(Ship.prototype);
Corvette.prototype.constructor = Corvette;
var ship = new Ship("Biggie", 50, 50);
var corvette = new Corvette("Smallish", 50, 50);
console.log(corvette.className) // "Smallish" - correct via parameter.
console.log(corvette.speed) // should be 100, is 0 - not correct, "static" from parent attribute
console.log(corvette.constructor.name) // Ship
and if your browser supports some features of ES6 use this feature ES6 classes.
class Ship { // And also Ship is an abstractionm so you can use `abstract` keyword with it
constructor(className, x, y, speed = 0) {
this.className = className;
this.x = x;
this.y = y;
this.speed = speed;
}
}
class Corvette extends Ship {
constructor(className, x, y, speed = 100) {
super(className, x, y, speed);
}
}
var ship = new Ship("Biggie", 50, 50);
var corvette = new Corvette("Smallish", 50, 50);
console.log(corvette.className) // "Smallish" - correct via parameter.
console.log(corvette.speed) // should be 100, is 0 - not correct, "static" from parent attribute
console.log(corvette.constructor.name) // Ship
You only need to move Ship.call(this, className, x, y) at the start of Corvette function.
Also, next time, before posting code, check it is correct, you wrote console.log(Corvette) instead of console.log(corvette)
Another thing: you do not need to repeat params you do not want to overwrite
function Ship(className, x, y){
this.className = className;
this.x = x;
this.y = y;
this.speed = 0;
}
function Corvette(className, x, y){
Ship.call(this, className, x, y)
this.speed = 100;
}
Corvette.prototype = Object.create(Ship.prototype);
var ship = new Ship("Biggie", 50, 50);
var corvette = new Corvette("Smallish", 50, 50);
console.log(corvette.className)
console.log(corvette.speed)
console.log(corvette.constructor.name)
You should invoke the parentclass contructor first and then override the properties, this way the properties set by Corvette will not be changed by the parent class i.e.:
function Corvette(className, x, y){
Ship.call(this, className, x, y)
this.speed = 100;
}
i know i can add a method by doing:
point.prototype.move = function ()
{
this.x += 1;
}
But, is there a way to add a method to a class by assigning a function that is declared outside of it to one of its propertie?
I am pretty sure this can't work but it gives an idea about what i'am trying to do:
function point(x, y)
{
this.x = x;
this.y = y;
this.move = move();
}
function move()
{
this.x += 1;
}
The only reason your example doesn't work is because you are calling move() and assigning its result which is undefined.
You should just use a reference to the move function when assigning it.
function move()
{
this.x += 1;
}
function point(x, y)
{
this.x = x;
this.y = y;
this.move = move
}
Different ways to do it
// Attach the method to the prototype
// point.prototype.move = move;
// Attach the method to the instance itself
// var myPoint = new point(1,2); myPoint.move = move;
function point(x, y, move)
{
this.x = x;
this.y = y;
this.move = move;
}
function move()
{
this.x += 1;
}
var obj = new point(2, 5, move);
Hello there stackoverflow people,
I'm messing around with HTML5 and Javascript and I'm trying to add a function to an object in javascript, just like a function is added to a class in C#.
Here is my javascript (I know this doesn't work)
function Hero()
{
this.xPos = 100;
this.yPos = 100;
this.image = new Image();
this.image.src = "Images/Hero.png";
}
function MoveHero( xSpeed, ySpeed )
{
xPos += xSpeed;
yPos += ySpeed;
}
Now in my main loop function like so
function main()
{
canvas.fillStyle = "#555555";
canvas.fillRect( 0, 0, 500, 500);
canvas.drawImage( hero.image, hero.xPos, hero.yPos );
hero.MoveHero(1,1);
}
Now this ofcourse tells me that
"Uncaught TypeError: Object #<Hero> has no method 'MoveHero'"
How would I link the function so I could use
hero.MoveHero(x,y);
If anyone could help me out it would be awesome.
P.S. I am declaring my hero variable globally like so
var hero = new Hero();
is that ok?
You can;
Hero.prototype.MoveHero = function( xSpeed, ySpeed )
{
this.xPos += xSpeed;
this.yPos += ySpeed;
}
function Hero()
{
// add other properties
this.MoveHero = function( xSpeed, ySpeed )
{
this.xPos += xSpeed;
this.yPos += ySpeed;
}
}