From 3844fbb01fd6b200844265eebb11aa8ea231735e Mon Sep 17 00:00:00 2001 From: kimmy190 <90531819+kimmy190@users.noreply.github.com> Date: Mon, 18 Mar 2024 07:01:10 +0900 Subject: [PATCH] Revert "Added installation guide for p5.md " --- Topics/Tech_Stacks/p5.md | 122 --------------------------------------- 1 file changed, 122 deletions(-) delete mode 100644 Topics/Tech_Stacks/p5.md diff --git a/Topics/Tech_Stacks/p5.md b/Topics/Tech_Stacks/p5.md deleted file mode 100644 index 333cc2a99..000000000 --- a/Topics/Tech_Stacks/p5.md +++ /dev/null @@ -1,122 +0,0 @@ -# p5.js - -## Table of contents -### [Introduction](#introduction) -### [Getting Started](#getting-started) -### [Basic Components](#basic-components) - -## Introduction - -p5.js is an innovative and creative coding library published for JavaScript that enables the users to facilitate the process of creating -innovative visuals, apply visual arts easily and sketch with its pre-fixed codes that contains tools, drawing functionalities and other -software to make design of visuals simpler. - -p5.js is not an emulation or port, still in active development; it’s additional libraries makes it easier and efficient to implement images, videos, sounds, text, and HTML5 objects. p5.js uses HTML, CSS, and JavaScript - similar to almost all webprojects. - -It eases the process of sketching and creating visuals with the functionalities pre-set by the library and thus simplifies it. p5.js can be thought of as a software sketchbook similar to the ‘Preprocessing’, where p5.js is a translation of ‘Preprocessing’ software. - - -### Usage of p5.js - -p5.js is a free and open-source Javascript library. Anyone who is interested in implementing creative visuals, or including sketches or graphical visuals on their software can use this library. Users can either create a project focused fully on the creative visuals or support their existing project with the visuals designs with the support of the p5.js library. - -p5.js is also beginner-friendly. With its easy guides and tutorials everyone can learn how to use the p5.js library on their code. - -p5.js users can utilize various options to enhance their coding project such as creating and setting up canvases, designing geometric shapes and coordinate systems with various color options : represented in various ways such as RGB, RGBA, gray value, hexadecimal , and HSBA. - -p5.js users can either use the p5.js editor published from the official website of p5.js or can use their own desktop (if selected to use on personal desktop, have to first download the library to the desktop - following the download instructions). - - -### Advantage of using p5.js - -1. p5.js allows the users to simplify being creative, thus with its pre-written library, users can enjoy being creative and simply innovate their code and think of their web browser as a canvas. - -2. p5.js is beginner-friendly, thus there is no need to worry about diving-in to complex code structures since it is easy to understand. - -3. p5.js can be used for educational purposes as well, since it is easy to use, it makes educating easier also (especially for subjects involving mathematics such as geometry - since p5.js includes features to easily create geometric objects and coordinate systems, lines and geometric objects on the coordinate systems). - -4. It is a free and open-source Javascript library, thus it is accessible for everyone who is interested in digital art and visual graphics. - -5. Users can include graphics, geometric motifs and shapes, and coordinate systems on their canvases - or even use a coordinate system as a canvas - which eases users to apply mathematical concepts and geometrical representations of images throughout their project. - -6. Users can include features that are responsive to mouse movements and mouse touches : whether the mouse is dragged, pressed, released, clicked or scrolled. - -7. Users can draw canvases with default functions set-up the canvas environment that the user wants to work on, and coordinate systems to enhance the project that they are working on; with its easy to build set-up features users can create their canvases easily and time efficiently. - -8. Users have the option to include colors in their canvases, with various ways to represent colors such as RGB, RGBA, gray value, hexadecimal , and HSBA. - - -## Getting Started - -p5.js offers mainly 2 ways to use the library. User can either use the p5.js web editor provided by the library's official website or locally set p5.js to work on their desktop. - - -### Using p5.js web editor - -Click [here](https://editor.p5js.org/) to access the web editor. -Below code should appear in the default editor. - -```javascript -function setup() { - createCanvas(400, 400); -} - -function draw() { - background(220); -} -``` - -After making changes in the editor, click the pink play button to see your changes in the preview section. - - -### Setting up p5.js editor locally - -We will use Visual Studio Code as our code editor as it is one of the most used and easy to set up. -Download visual studio code [here](https://code.visualstudio.com/download) and download the live server extension [here](https://github.com/processing/p5.js/wiki/Local-server) by following the instructions under the "VS Code Live Server" section. - -There are different ways to use p5.js on a user's local computer. - -#### Download a complete p5.js library - -[Download p5.js](https://p5js.org/download/) After clicking this page, scroll down and download "p5.js complete" project under Complete Library. - -Open the downloaded folder using Visual Studio Code. Under the folder named "empty-example", head to `index.html` and start the live server by clicking the "Go Live" button in the status bar or by `ALT-L` `ALT-O`. You will edit the `sketch.js` file and those changes will be reflected in the local browser. - - -#### Using hosted p5.js library - -Instead of downloading the whole package, there is another option of using the p5.js file hosted online as all versions of p5.js are stored in a CDN. Create a folder and inside create `index.html` and `sketch.js`. In `index.html` place the below code and start the live server by clicking the "Go Live" button in the status bar or by `ALT-L` `ALT-O`. -```html - - - - - - -
-
- - -``` - -### First Sketch - -After setting up p5.js, write this code below in `sketch.js` to check if p5.js is working as intended. - -```javascript -function setup() { - createCanvas(400, 400); -} - -function draw() { - background(220); - ellipse(50,50,80,80); -} -``` -It should show a white ellipse with a black outline whose width and height are 80 pixels and located 50 pixels from the left and down from the top. - -#### Installation - -## Basic Components - -## Reference