Media Computing: P5.JS

P5.JS provides an introduction to media-related computing technologies in a multidisciplinary way.  With this library, I have learned to understand the basic knowledge of how media information can be represented through images, graphics, audio, video, and animation from the user’s perspective, and it is surely a good way to know the technologies and applications of image processing, computer graphics, and computer vision, for the stage of achieving human-computer interaction and motion capture. On this page, I am going to show you some of my early work that combined some basic coding functions, in order to let you know my learning stage and introduce some basic coding knowledge.

Access Google Drive Backend

Basic

Adding text, position, framerate, key and mouse pressed

Draw shapes, lines, mousepressed

Load media (sound, image, font)

Function draw (flipping), Create movement and speed

Use "Loop"

Draw circle with loop

Draw line with loop

Create boundaries

Smoothing the movement

Use "Array"

Circle movement with array

Array in action

Create function

Photo array selection

Photo serie array

Target object in array

Dancing letter with array

Small Project

Sliding puzzle

Ball game