Week 1 - Your Development Environment Week 1 @ Material Week_1. pdf Lesson 1.1 - Introduction to P5.js What is Programming? Command : . The smallest building blocks of a program, for a computer to perform a task. Program (Source Code) : · A collection of commands put in the right order to solve a problem, complete a task, or user interaction. IDE/Code Editor : · Unlike a text editor, it helps to write code by making suggestions and spotting errors for easier execution. Programming Language: · It is a dictionary of commands a language provides. Interpreter : · Translates higher level language to binary instructions for a specific hardware to understand. v What is P5.js? P5.js Library: Week 1 - Your Development Environment 1
· Is an extensive library/pre-written code of JavaScript for creative coding used by artist, designers, educators, and beginners. . Helps avoid reinventing the wheel. P5.js Resources : Homepage : home | p5.js p5. js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing. * https://p5js.org/ Reference Page: reference | p5.js p5. js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing. * https://p5js. org/reference/ Example : https://p5js.org/example VSCode : Creating a new project in VSCode with the P5. VSCode extension : 1. Press <Ctrl><Shift><P> and select Create P5. js project . function setup( ) { createCanvas(500, 500); } function draw( ) { Week 1 - Your Development Environment 2
background(0,0,0); fill(255,0,0); stroke(0,255,0); rect (125, 125, 250, 250) ; } 2. Press Go Live button in taskbar to triggers the live view and render index.html. Ln 11, Col 1 (150 selected) Spaces: 2 UTF-8 LF {} JavaScript Go Live 3. The index.html view of the source code created is: Sketch X + D X ® 127.0.0.1:5500 Other bookmarks Server is Started at port : 5500 Source: Live Server (Extension) @ x Don't show again Spaces: 2 UTF-8 LF () JavaScript Ø Port: 5500 R V 2D Coordinate System Ln 11, Col 1 (150 selected) Week 1 - Your Development Environment 3