![]() ![]() This boils down to four conditions to work out the vector to draw between the cursor position and text position. I probably lost some of you there but the important part to all this is the last section. Rosetta Stone discovered in 1799 colorized 0,0 is the top left of the canvas and x,y is the bottom right.įor any of you that understand chicken scratch maths hieroglyphics I bestow unto you these pictures of my notebook We will let the text position co-ordinates equal (cx,cy) and the mouse pointer co-ordinates equal (mx,my). In order for the text to know which direction it needs to head in, we need to draw a vector between these two points. There are two sets of co-ordinates that we care about for this example, The x,y position of our text and the x,y position of our mouse pointer. Now we can finally get onto all of the fun vector maths… draw() is a function that constantly loops which we will use to call all of our functions. Our setup() function defines this canvas, the background colour and a few initial variables on first load. With p5.js we create a canvas that we can draw to and interact with via the p5.js library functions. Now that you’ve seen the end product we can get into the real nitty-gritty of what’s actually happening here.īefore we get into an explanation of the maths, a short explanation of the basic p5.js things going on is needed.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |