It is common for digital systems to deal with 8 bits at a time (this is referred to as a byte). Translating between decimal and binary is not always obvious, because 10 is not a power of 2. Digital systems use bits which have two states, 0 and 1, so they are better represented in base 2 (binary). We are used to seeing numbers in base 10 (decimal). A bit of explanation is in order if you aren’t already familiar with digital representations. Orange: “rgb(100%, 65%, 0%)” or “rgb(255, 165, 0)”Īlso known as hex color codes, this is just another way of specifying an RGB color.The RGB examples above can be rewritten as: So all of these calls to fill() specify white: If you leave the percent signs out, the number is interpreted as a regular RGB value in the 0-255 range. If you wanted to fill with white, you could call fill(255, 255, 255), or use an RGB string: fill("rgb(100%. These look like function calls, but are actually just strings that will be interpreted according to the colors they represent. In this case, you would specify your color with and RGB color string. If 0 to 255 seems weird and arbitrary, you can also think of RGB in terms of percentages: each of the three numbers is between 0 and 100 instead of 0 and 255. But if you are going to go to all the trouble of typing three numbers instead of one, you may as well get some color out of it! So the total number of colors we can have is 255 x 255 x 255 = 16,581,375 – over 16 million colors! When all the numbers are equal, you get some shade of gray. In the RGB color model used in p5.js, each of the three is represented by a value from 0 to 255, where 0 means none of the color, and 255 is the maximum amount of that color. Other colors can be generated by mixing these three colors in various proportions. These are the three additive primary colors, the basic colors from which other colors may be derived by adding light sources. This is about a simple as it gets! In the example above, fill() has been called with values of 0, 100, 200, and 255 resulting in circles ranging from black to white. You may now begin working with p5.js by editing the “sketch.js” file.You can specify a single number between 0 and 255 as a color, and it will be interpreted as a shade of gray, with 0 being pure black and 255 being pure white. You can now drag the “empty-example” folder into the workspace of the text editor of your choice. Going back to the “p5” folder, access the “addons” folder and drag the files “p5.sound.js” and “p5.” to the “libraries” folder within your project working folder. Next, create a folder called “libraries” within the “empty-example” folder. Inside the “empty-example” folder, there should be two files labeled “index.html” and “sketch.js.”ĭo not delete or move these files. Make sure you save the folder in a location that is easily accessible.Īfter the download completes, you should see a folder called “p5” on your computer that contains a file named “p5.js,” as well as two folders labeled “empty-example” and “addons.”ĭrag the “empty-example” folder out of the “p5” folder to the place where you want your project files to be stored. To do this, visit /download and download the “p5.js complete” library. You can also opt to download the p5.js library onto your computer and work with p5.js using a text editor such as Atom or Sublime Text. To dive in, visit to create an account and begin writing code on the p5.js web editor! We highly recommend this route for beginners, and this is the simplest way to begin working with p5.js immediately. Unlike Processing, which required users to download the Processing application on their device, p5.js can be accessed entirely from your browser. Students and instructors are welcome to attend our in-lab workshops or meet with the lab assistants during lab hours to learn more about p5.js. Students, artists, design professionals, and researchers use it for learning, prototyping, and creating interactive web applications: from experimental games to computer-generated abstract art, it is an amazing tool to create engaging, interactive multimedia projects. P5.js is a flexible Javascript library that is great for learning how to code within a visual environment.
0 Comments
Leave a Reply. |