绘图功能外部绘图场景p5.js

如何解决绘图功能外部绘图场景p5.js

开始使用Khan Academy学习JavaScript，我到达了我们要制作动画的地方，使用一个按钮，您可以在不同场景之间进行迁移。

当我开始使用他们教给您的最新版本的程序来制作自己的程序时，问题就出现了，我目前正在使用P5.Js网络编辑器，并且使用较旧的ProcessingJS编辑器进行教学。

在课堂上，他们没有召唤draw（）函数内部的任何东西，他们能够像这样创建场景变量和按钮：

var currentScene = 1;

var Button = function() {
strokeWeight(2);
stroke(255,255,255);
fill(0,0);
rect(170,170,50,50);
};

var scene1 = function() {
currentScene = 1;
background(0,0);
Button();
};

var scene2 = function() {
currentScene = 2;
background(255,240);
Button();
};

var mouseClicked() {
if (currentScene === 1 && mouseX > 170 && mouseX < 220 && mouseY > 170 && mouseY < 220 ) {
scene2();
}
};

并随后在draw（）函数外部调用场景（仅具有一个起始场景），

draw = function() {

}; 

scene1();

我尝试了许多变体，但是大多数时候我尝试启动P5.js编辑器时都会告诉我：

我在功能内部，功能外部尝试了许多变体。我要么一无所获，要么最好的情况是，只有当我按下鼠标时，场景的改变才会发生，一旦我单击取消，返回到scene1（），我就无法缝合来确定交易是什么在这里。

这是我正在使用的实际代码

// VARIABLES

// SCENE VARIABLES


// object variables
// movement speed (bouncing_ball)
var speed = 10;

// SCENCE 1 

///////////////////////////////////////////////////////////////
// SQUARE OBJECTS

var square_obj = function(x,y,width,height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

// square obj methods
square_obj.prototype.display = function() {
  fill(0,0);
  stroke(255,255);
  strokeWeight(2);
  rect(this.x,this.y,this.width,this.height);
};

/*
square_obj.prototype.move() {
  // TO FILL
};
*/

///////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////
// ROUND OBJECTS

// create a color that changes depending on need (each summon)

var bouncing_ball = function(x,height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;

}

// bouncing ball methods
bouncing_ball.prototype.display = function() {
  fill(0,255);
  strokeWeight(2);
  ellipse(this.x,this.height);
};

// movement methods
bouncing_ball.prototype.move_up = function() {
  this.y = this.y + speed;
};

bouncing_ball.prototype.move_side = function() {
  this.x = this.x + speed;
};

// bouncing methods
bouncing_ball.prototype.bounce_Up_Dn = function() {
  if (this.y < height) {
    speed = speed + 1;
  }
  if (this.y > height) {
    speed = speed -1;
  }
};

bouncing_ball.prototype.bounce_Lf_Rt = function() {
  if (this.x < width) {
    this.x += speed;
  }
  if (this.x > width) {
    this.x -= speed;
  }
};

///////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////
// POP UP SQUARE OBJECT

// object variables

// pop up square constructor
var pop_up = function(x,height){
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
};

///////// TO DO CHANGE FILL AND COLOR OF BOTH TEXT AND RECT
// pop up square methods
pop_up.prototype.draw = function(x,height) {
  fill(240,223,147);
  stroke(255,255);
  strokeWeight(2.5);
  rect(this.x,this.height);
};

pop_up.prototype.text = function(string,x,height) {
  fill(0,0);
  textSize(25);
  text(string,this.x + 5,this.y + 5,this.height);
};

///////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////
//---------------------------MAIN----------------------------//
///////////////////////////////////////////////////////////////

// SCENE 1
// window frames
var frame_up = new square_obj(0,900,20);
var frame_down = new square_obj(0,480,20);
var frame_left = new square_obj(0,20,460);
var frame_right = new square_obj(880,460);

// pop up square new instances
var pop_up_1 = new pop_up(50,200,70);
var pop_up_2 = new pop_up(50,150,400,70);
var pop_up_3 = new pop_up(50,350,70);

// bouncing_ball
// vertical bounce
var new_bball = new bouncing_ball(750,40,25,25);

//horizontal bounce
var new_bball_2 = new bouncing_ball(20,315,25);

// bouncing_ball support structures AKA rects
// vertical support
var square_1 = new square_obj(737,30,25);
var square_2 = new square_obj(737,455,25);
var square_1_1 = new square_obj(734.5,45,35,10);
var square_2_1 = new square_obj(734.5,445,10);

//horizontal support
var square_3 = new square_obj(20,300,30);
var square_4 = new square_obj(855,30);
var square_3_1 = new square_obj(45,297.5,10,35);
var square_4_1 = new square_obj(849,35);


///////////////////////////////////////////////////////////////

function setup() {
  createCanvas(900,500);
}

function draw() {
  background(73,66,120);

  // pop_up rectangles and filled in text
  pop_up_1.draw();
  pop_up_1.text('WELCOME TESTER');

  pop_up_2.draw();
  pop_up_2.text('why dont you try clicking around? CLICK CLICK CLICK');

  pop_up_3.draw();
  pop_up_3.text('you think you can find the all hidden buttons?');

  // bouncing ball
  // vertical bouncer
  new_bball.display();
  new_bball.move_up();
  new_bball.bounce_Up_Dn();

  // horizontal bouncer
  new_bball_2.display();
  new_bball_2.move_side();
  new_bball_2.bounce_Lf_Rt();

  //bouncing_ball bases
  //vertical
  square_1.display();
  square_2.display();
  square_1_1.display();
  square_2_1.display();

  //horizontal
  square_3.display();
  square_4.display();
  square_3_1.display();
  square_4_1.display();


  //window frames
  frame_up.display();
  frame_down.display();
  frame_left.display();
  frame_right.display();

  // tube buttons
  // horizontal right
  if (mouseIsPressed && mouseX > 850 && mouseY > 300 && mouseX < 882 && mouseY < 335) {

    background(0,0);

    // text
    fill(255,255);
    text('there you go...',55,75,70);
    text('"x" amount more to go...',155,70);
    text('..cant tell you how many or where tho...',380,70);

    // bouncing ball
    // vertical bouncer
    new_bball.display();
    new_bball.move_up();
    new_bball.bounce_Up_Dn();

    // horizontal bouncer
    new_bball_2.display();
    new_bball_2.move_side();
    new_bball_2.bounce_Lf_Rt();

    //bouncing_ball bases
    //vertical
    square_1.display();
    square_2.display();
    square_1_1.display();
    square_2_1.display();

    //horizontal
    square_3.display();
    square_4.display();
    square_3_1.display();
    square_4_1.display();


    //window frames
    frame_up.display();
    frame_down.display();
    frame_left.display();
    frame_right.display();

  }


  // horizontal left
  if (mouseIsPressed && mouseX > 20 && mouseY > 300 && mouseX < 55 && mouseY < 335) {

    background(0,0);

    //text


    // bouncing ball
    // vertical bouncer
    new_bball.display();
    new_bball.move_up();
    new_bball.bounce_Up_Dn();

    //bouncing_ball bases
    //vertical
    square_1.display();
    square_2.display();
    square_1_1.display();
    square_2_1.display();

    //window frames
    frame_up.display();
    frame_down.display();
    frame_left.display();
    frame_right.display();

  };


/*
  //vertical up
  if () {};

  //vertical down
  if () {};
*/

}
///////////////////////////////////////////////////////////////

绘图功能外部绘图场景p5.js

如何解决绘图功能外部绘图场景p5.js

相关推荐