December First Post

This week I learnt how to import images of different formats, and type texts in p5.js.

The preload() function - learnt how to load images. The parameters could be changed to adjust the width and height of the image. This function is needed instead of setup() because the browser will begin loading an image, but skip to the next line before the image finishes loading. This process, known as asynchrony or asynchronous function, allows pages to load and run faster on the web. p5.js can load raster images in JPEG,PNG, GIF formats, and vector images in SVG format. The pixels of GIF, PNG and SVG images can be invisible or partially invisible to look transparent.

textFont() function allows users to set different fonts. Letters can be drawn through text() function, and the size of the text can be changed with textSize(). The second and third parameters of the text() function determines the horizontal and vertical location of the text. Other webfonts can be used apart from the local fonts. p5.js can also output black text with white outlines through the stroke() and fill() functions.

The texts can be drawn in a box and stored within a variable if it is going to be used repeatedly throughout the code.

Text with Arial font

Text with Source Code Pro font

Text with text stroke and fill