0

I am pretty begginer to coding.

I translate to center of the canvas and the point that I want to draw is further down instead to be in the center of the canvas. What am I missing? 

<script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
<script language="javascript" type="text/javascript" src="p5.js"></script>
<script language="javascript" type="text/javascript" src="fibonacci.js"></script>

function setup() {
  createCanvas(590,304);
  background(0);
}

function draw() {
  stroke(255);
  noFill();
  translate(width/2, height/2);
  strokeWeight(8);
  point(0,0);
}
Azametzin
  • 5,223
  • 12
  • 28
  • 46
jivas
  • 1
  • 1
    Why do you have p5 included twice? – Aplet123 Mar 27 '20 at 12:33
  • Can we presume that your functions are actually inside a script tag, and that the variables `width` and `height` are defined somewhere? – scunliffe Mar 27 '20 at 12:35
  • @Aplet123 i am new so i copy and paste it from an internet recourse. pls help me if you can. – jivas Mar 27 '20 at 12:36
  • @jivas Can you open the developer console and report any errors that you see there? We can't help you if you don't provide this information. – Aplet123 Mar 27 '20 at 12:40
  • @scunliffe i write a js file and use it as a source toan html one so to preview it on browser. so the only usage of html code is to preview the js code. so if i didnt answer to your question, tell me. – jivas Mar 27 '20 at 12:42
  • @Aplet123 thats the displayed problem p5 had problems creating the global function "cursor", possibly because your code is already using that name as a variable. You may want to rename your variable to something else. – jivas Mar 27 '20 at 12:48
  • @jivas You're getting that error because you included p5 twice. Get rid of the second `p5.js` script tag. – Aplet123 Mar 27 '20 at 12:49
  • @Aplet123 i just comment out the second script tag from html and work fine. thanks for your help. have a nice day – jivas Mar 27 '20 at 12:53

1 Answers1

0

To create à canvas only from p5.js you might want to try it this way :

let s = (sketch)=> {
  sketch.setup=()=>{
    sketch.createCanvas(590,304);
    sketch.background(0);
  };
  
  sketch.draw = ()=> {
    sketch.stroke(255);
    sketch.noFill();
    sketch.translate(sketch.width/2, sketch.height/2);
    sketch.strokeWeight(8);
    sketch.point(0,0);
  };
};
let p5j = new p5(s);
canvas{border:1px solid black;}
<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>

source : stackoverflow

codeanjero
  • 674
  • 1
  • 6
  • 14