Introduction to JavaScript using p5!

-

Creating an Ellipse 

To start programming with JavaScript, I used the text editor Sublime, although Brackets (another text editor) was recommended, I am already familiarised with using Sublime, having some previous experiences to using JavaScript in the past. Although my knowledge of JavaScript is limited, using p5.js has allowed me to learn and experiment with the creative aspects of programming in JavaScript for a web document. Using the tutorials provided by the class lecturer "The Coding Train", I was able to begin my study on the basic foundation level of programming in JavaScript.

 In the image below is the JavaScript code I will be breaking down in steps to analyse; this is to better understand the process these set of instructions are executing; how they are effecting the web page graphically and functionally.

The "function setup()" block is used from initialisation, and it only runs once. By default, the canvas to which things are drawn into is sized 100x100, however a custom size can be set using "createCanvas();" function. Using this function draws a new canvas that allows users to manipulate the size of the canvas, increasing or decreasing the canvas scale. Lastly, "print("setup function");" simply displays the data which was called, in this case, the data called is written to the browser console. Individual elements within the function can be separated with "" or join with the addition operator +.  

The "function draw()" block runs in a continuous loop, this block is used for animation, or to typically "draw" into. Within the draw block is an if statement; if the mouse key is pressed, an ellipse with a fill value of 0 (black) will be drawn onto the canvas, else (or otherwise) draw an ellipse with the fill value of 255 (white). In this scenario, the cursor acts like a paint brush, printing ellipse's onto the canvas non-stop.

The "background();" function is used to alter the background colour of a canvas, it does this by using either a grey-scale integer value "background(#);", RGB integer values "background(#, #, #);",  or a hexadecimal RGB notation "background('#111111');", however, there are many other ways of defining a colour value within the background() function.
The "ellipse()" function normally uses 4 different values; positions left and right, with height and width. In this case, the position is determined by the position of the mouse cursor, and the height and width have been given the same value of 80 pixels. The "console.log();" function is often used for debugging code, it allows users to script log data to the JavaScript console.

Comments

Post a Comment

Popular posts from this blog

Pure Data: GEM

-
Image
Here I will be presenting my final project in Pure Data using GEM, and what I have learned from the experience of using pure data to create motion graphics. The code will be sectioned into separate processes and explain in the order 1 through 7 as shown in the figure below. Figure 1 Step 1: Created [gemwin] object and connected it to three messages; [create] creating a window to draw graphics to, [destroy] to terminate the window, [lighting] which would initiate the world lighting. A toggle were added to [gemwin] to start and pause graphics, and another toggle to lighting to switch on or off. Step 2: Next I created a [gemhead] to begin drawing graphics to the empty window, I start off by creating a 3D object; a cube, and defining some properties; its XYZ rotation, XYZ translation, and colour. Two messages; draw fill and draw line, were connected to the cube, which would either fill the render into a solid shape, or draw the rendered shape with out-lines. Step 3 & S...
Read more

Purr Data: GEM

-
Using the information provided by the source given that explained what GEM is and what it is used for in Pure Data, I now have a clear understanding on how GEM is used to create media visuals; images, videos, and 3D Shapes. What is GEM? GEM is based on a large part of OpenGL. GEM is apart of pure data, and it is used to create motion graphics, this includes videos or still images, draw 2D or 3D shapes, and transform objects and shapes. Visuals can also be made to react to sounds. [gemwin] [gemwin] is what represents the window a graphic is drawn into - it creates a window which displays the graphics created. Using frame-rate, it schedules when frames should be drawn to the screen, by default, it clears the window and sets a background colour using RGB values. [gemhead] [gemhead] is the start of a chain of graphics operations connected by patch cords, that should be executed ever frame. Drawing operations cascade from the top down - adding to each other, flowing downwards ...
Read more

The Enduring Ephemeral, or the Future Is a Memory

-
Written by Wendy Hui Kyong Chun The Enduring Ephemeral, or the Future Is a Memory This read discusses how new media, like computer technology, is constantly evolving yet simultaneously back-peddling towards what would be know as a "bleeding edge of obsolesce". Normally, I questioned "what is new media?", yet the author suggests more appropriate questions such as "what was new media?" and "what will new media become?"... The "new" in "new media" suggests that what is new will one day become old, however, this is not the case with new media; as new media is almost the same yesterday as it is today, as stated by the author. This leads me to assume, due to the constant  storing and evolution of new media, it could not possibly become old despite the age of any such media; as "old" media found today is rediscovered as "new" media, which is a constant cycle of repetition. I found this interesting, as archi...
Read more