How do I move this circle (feeling stupid)

tim50

Can someone tell me in a simple noob way how to move this circle, NOT by animation, but just by hard code. I have (200, 200) everywhere but it keeps printing it at (0, 0). How to I put it at (400, 400) or (250, 250), or (width/2, height/2). Thank you..

var bubble;                                 

function setup() {
       createCanvas(600, 600);               
       bubble = new Circle(200, 200);  
 }
function draw() {
      background(200);                      
      bubble.display(200, 200);             
}

function Circle(x, y) {
    this.x = 0;
    this.y = 0;
    this.r = 100;                           
    this.display = function() {              
        ellipse(this.x, this.y, this.r, this.r); 
  {
{

GoToLoop

Again go to https://OpenProcessing.org/sketch/create and paste my sketch version: >-)

// forum.Processing.org/two/discussion/21403/
// how-do-i-move-this-circle-feeling-stupid#Item_1

// GoToLoop (2017-Mar-14)

"use strict";

let bubble, bgColor;

function setup() {
  createCanvas(600, 300);

  ellipseMode(CENTER).colorMode(RGB).blendMode(REPLACE);
  fill('yellow').noStroke();

  bubble  = new Bubble(Bubble.RAD, height>>1);
  bgColor = color(0o300);
}

function draw() {
  background(bgColor);
  bubble.display().move();
}

class Bubble {
  static get DIAM() {
    return 100;
  }

  static get RAD() {
    return Bubble.DIAM>>1;
  }

  static get SPD() {
    return 5;
  }

  constructor(x, y) {
    this.x = x, this.y = y;
  }

  move() {
    this.x += Bubble.SPD;
    this.x > width - Bubble.RAD && (this.x = Bubble.RAD);
    return this;
  }

  display() {
    ellipse(this.x, this.y, Bubble.DIAM);
    return this;
  }
}

tim50

that's too confusing for me. I think it might be easier than that but I can't do it. How do I move this simple circle to (400, 400)? I don't know processing but I'm pretty sure I don't need it to move this circle to (400, 400). Please, please just show me without a bunch of classes and processing stuff.

 var bubble;                                 

 function setup() {
        createCanvas(600, 600);               
        bubble = new Circle(200, 200);  
  }
 function draw() {
       background(200);                      
       bubble.display(200, 200);             
 }

 function Circle(x, y) {
     this.x = 0;
     this.y = 0;
     this.r = 100;                           
     this.display = function() {              
         ellipse(this.x, this.y, this.r, this.r); 
   {
 { 

tim50

Looking at all that DIAM stuff makes me wonder if your just messing with me? You don't need to change the color, just how do you move it to (400, 400)?

GoToLoop

• Variable bubble stores the reference to a Circle object, right?
• So through bubble we can access all of the object's properties, including x & y, via . dot operator.
• So if you wanna directly change both of those coord. properties to be 400, type in:
  bubble.x = bubble.y = 400;

GoToLoop

Looking at all that DIAM stuff makes me wonder if...

DIAM means diameter, RAD is radius & SPD is speed.
I've just made them to become internal static constant getters for the class.

tim50

Can you show me how to do it please. I don't know how. Please no processing stuff. How to I move that circle to (400, 400)? I'm no where near ready for anything called DIAM. I just want to move the circle to (400, 400).

I have no idea where bubble.x, bubble.y goes.

No clue. If you look at the code, you will see I put in (200, 200).

PLEASE, I don't know where bubble.x and bubble.y goes? Please please please show me. I'm really stupid.

GoToLoop

• According to your version, properties x & y are both initialized w/ 200 via: bubble = new Circle(200, 200);
• So in order to make them both 400 later, issue: bubble.x = bubble.y = 400;.

tim50

I don't know what that means? Are you able to move that circle to (400, 400)?

I don't think you understand how stupid I am. This: "According to your version, properties x & y are both initialized w/ 200: bubble = new Circle(200, 200);"

This greek to me. Can you show me please how to move that circle to (400, 400)?

No I don't understand: "later, issue: bubble.x = bubble.y = 400;"

bubble.x = whatever. I have no idea how to move that circle to (400, 400). Can you show me?

GoToLoop

The question is: When do you intend to change x & y to 400, given the fact you started them all as 200 when instantiating their class?

Oh w8, now I see: Your constructor is wrong: @-)

function Circle(x, y) {
  this.x = 0;
  this.y = 0;

  // ...
}

It shoulda been:

function Circle(x, y) {
  this.x = x;
  this.y = y;

  // ...
}

Compare it w/ my class' constructor() too:

constructor(x, y) {
  this.x = x, this.y = y;
}

Perhaps you're also mixing up how to access some property inside its class and then outside it. /:)

Inside we use this.. But outside, instead of this, we replace it w/ a reference variable, like bubble for example: bubble.y = 400; :-B

tim50

"The question is: When do you intend to change x & y to 400, given the fact you started them all as 200 when instantiating their class?"

I don't know what that mean? OH I SEE I HAD 200. I meant 400. Either way it does not work,. Please show me

Can you move that circle to (400, 400)? <------------ Can you? I am totally lost. I have no clue how to do it or what you are talking about. PLEASE please show me..

var bubble;                                 

function setup() {
       createCanvas(600, 600);               
       bubble = new Circle(400, 400); // <---- not working!!!!  
 }
function draw() {
      background(200);                      
      bubble.display(400, 400); // <------ not working!!!!!!             
}

function Circle(x, y) {
    this.x = 0;
    this.y = 0;
    this.r = 100;                           
    this.display = function() {              
        ellipse(this.x, this.y, this.r, this.r); 
  {
{ 

tim50

"constructor(x, y) { this.x = x, this.y = y; }"

Please don't assume I know what that means, please. Please..

GoToLoop

You haven't corrected your class to initialize its internal properties x & y according to received parameters x & y!

function Circle(x, y) {
  this.x = x;
  this.y = y;

  // ...
}

Now I'm at a loss to pinpoint what exactly you're asking.
It can't be simply to assign 400 to both properties x & y, can it?

I've already stated many times already, all properties from an object can be accessed via the . dot operator.

You want property x to become 400, and the variable holding the reference for its object is bubble, just issue: bubble.x = 400; ~:>

What else might it be?! 8-}

GoToLoop

https://Processing.org/reference/dot.html
https://Processing.org/tutorials/objects/

tim50

I'm trying to move that circle to (400, 400).

"just issue: bubble.x = 400;"

I think you think I know what that means?

You said to move that circle to (400, 400) was easy-peasy and I have no clue how to do it. Do you know how to move that circle to (400, 400). If so, can yo show me I'm a noob.

tim50

I don't know processing. Perhaps the only way to do it is if I do this:

 draw() {
   ellipse(400, 400, 100, 100);
 }

but can't I do it with the code above? If so how?

If someone was going to pay you a million dollars to move the circle above to (400, 400, 100, 100) would you just say: ""just issue: bubble.x = 400;"

they may say you didn't do it and you'd be out a million bucks. How do you do it?

tim50

"Now I'm at a loss to pinpoint what exactly you're asking. It can't be simply to assign 400 to both properties x & y, can it?"

YES!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! how to I move the circle to (400, 400). PLEASE please show me, please.

Why wold you say "simply?" it is impossible brutal hard. Is it even possible? Nasty nasty tough to do.

GoToLoop

function draw() {
  background(200);
  bubble.x = bubble.y = 400;
  bubble.display();
}

tim50

I'm going to see if it works. I'll let you know. Too bad I have to put it in draw. I thought it would have worked through arguments but I'm obviously stupid... going to check...

tim50

HOLY SHIT, IT WORKED!!!!!

GoToLoop

You can move bubble.x = bubble.y = 400; to setup() of course.
But if you had fixed your class like I've asked 2 times already, you could get the values right from the start, when instantiating the class w/ new. :-@

tim50

That's incredible. I didn't think it was possible after all the DIAM and stuff.

You can do this too: bubble.x = width/2; bubble.y = height/2;

I didn't think it was going to be doable. Man that was impossible. Coding is a nightmare.

Too bad you can't do it through arguments and not put them in draw. I thought keeping draw clear was somewhat important. Still, I can't believe it actually was doable. At first I thought it would be easy because the canvas redraws itself 50 times a second but it turned out to be brutal hard. nasty.

I wonder if my shitty vertex code is just as easy. I'm just trying to move the x and y in there too. but it is stuck just like that circle was stuck.

What were you thinking I was trying to do?

tim50

"when instantiating the class w/ new."

I don't know what that means? instantiating is that English?

"w/ new" I do have new in there. See since I have new in there already, I have no idea what you are talking about?

"bubble = new Circle(400, 400); "

see, there it is. new circle. God it is probably all wrong or something. Maybe I should put noob instead?

GoToLoop

Actually the most formal way to do it is to have the properties initialized directly in the constructor:
bubble = new Circle(width/2, height/2);

Rather than after new:

bubble = new Circle();
bubble.x = width/2, bubble.y = height/2;

In my own version, this is what I did to instantiate class Bubble:
bubble = new Bubble(Bubble.RAD, height>>1);

tim50

what's a constructor?

bubble.x = width/2, bubble.y = height/2;

I don't know what that means and I definitely don't know where it goes. In draw I guess.

 bubble = new Circle();
 bubble.x = width/2, bubble.y = height/2;

where does that code go. I'm an idiot. Don't underestimate how brain dead a noob is.

tim50

bubble  = new Bubble(Bubble.RAD, height>>1);

I have absolutely no idea where you put that code. No even the foggiest of clues perhaps in draw? I imagine if I went and put that in my code somewhere, it wouldn't work. I imagine you have to delete stuff to use that code?

Noobs don't understand this stuff.

GoToLoop

You dunno any OOP terminology b/c you haven't properly studied it! [-X
Actually, most folks would guess correctly at 1st what a class' constructor would refer to. $-)
In my own example, the constructor is spot on:

constructor(x, y) {
  this.x = x, this.y = y;
}

In your case it should be something like this:

function Circle(x, y) {
  this.x = x;
  this.y = y;

  // ...
}

And if you're still wondering what a constructor is for, is the function which is called by new in order to have the object created by it to have its properties properly initialized.

Please, read or watch OOP tutorials before proceeding w/ your "Space Invaders" clone game sketch.

Oracle site got a good OOP tutorial here:
http://docs.Oracle.com/javase/tutorial/java/concepts/index.html

Even though it's for Java, once we learn it, its concept can be applied to almost any programming language.

Specifically for p5.js, watch @Shiffman's video tutorial series:
https://YouTube.com/watch?v=QoFWCPVpWUE&index=20&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

GoToLoop

I have absolutely no idea where you put that code.

Just look up at the already posted full code sketches in this very forum thread.
I'm just posting excerpts from the full code now, of course!
The place to put those excerpts are easy to guess once we look up the full original code.

GoToLoop

Just found 2 YouTube tutorial videos about JS class: :bz

1. 
2.