Suhail Rafeeque
Suhail Rafeeque

Reputation: 3

Syntax error when creating an object in a p5js sketch

I am trying to create a background scenery with objects cloud, mountain, tree, canyon etc. Everything is going well, except when I reached creating the cloud object. I have declared the var cloud for the cloud object and initialized the values of the coordinates of cloud in the setup function as cloud = (pos_x: 200, pos_y: 70, diameter: 130);. However, when I try to create the cloud object with the ellipse shape in the draw() function as mentioned below, it gives me 2 problems:

  1. I do not get the autofill cloud.pos_x when I enter cloud. in the ellipse();
  2. Error *sketch.js:23 Uncaught Syntax Error: Unexpected token ':'* (dot on top of each other), after I run the code.

I hope I have given you enough details to understand the issue. Thank you.

var floorPos_y;

var gameChar_x;
var gameChar_y;

var treePos_x;
var treePos_y;

var canyon;
var collectable;

var mountain;

var cloud; 
var cloudPos_x: 
var cloudPos_y; 
var cloudDiameter; 



function setup()
{
    createCanvas(1024, 576);
    floorPos_y = 432; //NB. we are now using a variable for the floor position

    //NB. We are now using the built in variables height and width
    gameChar_x = width/2;
    gameChar_y = floorPos_y;

    treePos_x = width/2;
    treePos_y = height/2;
    
    cloud = (pos_x: 200, pos_y: 70, diameter: 130); 
}

function draw()
{
    background(100, 155, 255); //fill the sky blue

    noStroke();
    fill(34, 139, 34);
    rect(0, floorPos_y, height, width - floorPos_y); //draw some green ground
    triangle(height + 200, floorPos_y - 20, height + 50, floorPos_y - 20, height + 50, floorPos_y); 
    quad(height, floorPos_y + 20, height, floorPos_y - 20, height + 50, floorPos_y - 20, height + 50, floorPos_y); 
    rect(0, floorPos_y - 20, height, 20);
    quad(width - 200, floorPos_y - 20, width, floorPos_y - 20, width, floorPos_y, width - 100, floorPos_y); 
    
    
    //draw tree
    fill(139, 69, 19); 
    rect(treePos_x, treePos_y, 30, 150); 
    fill(34, 139, 34);
    ellipse(treePos_x + 15, treePos_y - 50, 150, 200); 
    ellipse(treePos_x + 15, treePos_y - 150, 120, 200); 
    
    //Canyon
    fill(244, 164, 96); 
    quad(height, floorPos_y + 20, height + 50, floorPos_y, height + 50, height - 50, height, height); 
    quad(width, floorPos_y, width - 100, floorPos_y, width - 100, height - 50, width, height); 
    quad(width - 100, floorPos_y, width - 200, floorPos_y - 20, width - 200,  floorPos_y + 20, width - 100, height - 50); 
    quad(height + 50, floorPos_y, height + 200, floorPos_y - 20, height + 200, floorPos_y + 30, height + 50, height - 50); 
    quad(width - 200, floorPos_y - 20, height + 200, floorPos_y - 10, height + 200, floorPos_y + 10, width - 200,  floorPos_y + 20); 
    fill(0, 255, 255); 
    triangle(height + 200, floorPos_y + 10, width - 200,  floorPos_y + 20, height + 200, floorPos_y + 30); 
    quad(height, height, height + 50, height - 50, width - 100, height - 50, width, height); 
    quad(height + 50, height - 50, height + 200, floorPos_y + 30, width - 200,  floorPos_y + 20, width - 100, height - 50); 
    
    //Mountain
    fill(244, 164, 96);
    triangle(0, height - 500, 100, floorPos_y - 20, 0, floorPos_y - 20); 
    quad(20, height - 400, 60, height - 450, 170, floorPos_y - 20, 100, floorPos_y - 20); 
    quad(50, height - 300, 120, height - 360, 220, floorPos_y - 20, 150, floorPos_y - 20); 
    quad(100, height - 250, 190, height - 300, 320, floorPos_y - 20, 200, floorPos_y - 20);
    fill(105, 105, 105); 
    triangle(0, height - 100, 400, floorPos_y - 20, 0, height); 
    
    //cloud
    fill(255, 255, 255); 
    ellipse(cloud.
    
    
    //collectable
    strokeWeight(3); 
    stroke(240, 248, 255); 
    fill(220, 20, 60); 
    quad(height - 200, height - 50, height - 170, height - 100, height - 80, height - 100, height - 70, height - 50); 
    noFill();
    strokeWeight(3); 
    stroke(255, 69, 0); 
    //curve(height - 200, height - 70, height - 200, height - 120, height - 180, height - 120, height - 180, height - 70); 
    curve(height - 200, height - 70, height - 200, height - 70, height - 200, height - 120, height - 180, height - 120);
    curve(height - 200, height - 70, height - 200, height - 120, height - 180, height - 120, height - 180, height - 70); 
    curve(height - 200, height - 120, height - 180, height - 120, height - 180, height - 70, height - 180, height - 70); 
    fill(255, 255, 0); 
    quad(height - 210, height - 40, height - 220, height - 70, height - 160, height - 70, height - 170, height - 40); 
    
    
    // draw the game character
    noStroke(); 
    fill(220, 220, 220); 
    ellipse(gameChar_x, gameChar_y - 65, 25, 25); 
    fill(0, 0, 0); 
    rect(gameChar_x - 15, gameChar_y - 55, 30, 50); 
    stroke(0, 0, 0); 
    strokeWeight(03); 
    point(gameChar_x, gameChar_y - 65); 
    strokeWeight(01); 
    stroke(255); 
    rect(gameChar_x - 20, gameChar_y - 55, 05, 25);   
    rect(gameChar_x + 15, gameChar_y - 55, 05, 25);
    noStroke(); 
    fill(255, 255, 255); 
    triangle(gameChar_x - 05, gameChar_y - 53, gameChar_x, gameChar_y - 50, gameChar_x - 05, gameChar_y - 47); 
    triangle(gameChar_x + 05, gameChar_y - 53, gameChar_x, gameChar_y - 50, gameChar_x + 05, gameChar_y - 47); 
    fill(119, 136, 153); 
    rect(gameChar_x - 12, gameChar_y - 10, 10, 15); 
    rect(gameChar_x + 02, gameChar_y - 10, 10, 15); 


}

function mousePressed()
{
    gameChar_x = mouseX;
    gameChar_y = mouseY; 
    

}

Upvotes: 0

Views: 392

Answers (1)

statox
statox

Reputation: 2886

You have a syntax error which tells you that you used some invalid character. Here it is because you don't create an object with (...) but with {...}.

Replacing

cloud = (pos_x: 200, pos_y: 70, diameter: 130); 

with

cloud = {pos_x: 200, pos_y: 70, diameter: 130}; 

Should solve your syntax error.

Your second syntax error comes from line 15:

var cloudPos_x:

It should end with a semicolon ; not a colon :.

There are a lot of tools to check your syntax and it is usually a bad idea to code without one. JSHint is one of them but it's not the only option, you should search for one which you can use easily with whatever IDE or text editor you are using to code.

Upvotes: 1

Related Questions