Javascript Libraries | P5.js
|
SCA – Technical Workshop Descriptor
Bismark Tackie Workshop Title: Getting Started with P5.js Technical Instruction Area: Digital Design Studios Duration of Workshop: Half day Pre-requisites/Skill Levels/Workshop Preparation: Students who wish to participate with any hands on exercises are expected to have downloaded Adobe Photoshop and Brackets code/text editor before the session. Technical Learning Objectives: Through a single supported workshop agreed with your module leader. We'll cover basics concepte of using a Javascript library, with which you'll be encouraged to be creative with code. Initially we'll learn about basic HTML elements and how to style them with CSS. We will try and understand the HTML <canvas> tag and it's benefits. Through self-supported learning and consultation with DDS instructors students have the option of exploring more advanced HTML, CSS and Javascript concepts. Academic Programme/Level/Workshop code: MA Visual Communication Design - Beginner/Intermediate Room Number: (4AF002/4AF003 ) Maximum Numbers Possible: 15† |
Our software of choice...
There is a P5.js editor which runs is a web browser. For this workshop we will use Phoenix Code which is an open source text editor designed to work with a variety of code types. Phoenix Code has a simple interface, and tools such has live preview, autocomplete, colour highlighting and a color picker tool.
As well as the standalone version, there is also an online code editor which loads into a web browser. However, working with a standalone editor which removes the need for a live internet connection. This workshop is designed as a light touch taster session to give an idea of how P5.js, can be used to manipulate the HTML canvas to create simple webpages with interaction. Note: Phoenix Code is Open Source Software. It is the successor to Bracket Code editor which is now discontinued and can be downloaded free of charge from here: https://phcode.dev/download/ Workshop files:
This folder contains some images for execises 
Useful Links | P5.js
Understanding the HTML <canvas> tag: https://www.w3schools.com/html/html5_canvas.asp Downlod P5.js for standalone use on your own computer: https://p5js.org/download/ Learn P5.js from the ground up: https://thecodingtrain.com/tracks/code-programming-with-p5-js Workshop Example | P5.js https://murmerations.netlify.app/ | ||