Project #5 Make Your Own Library

قلب, Ramsey Nasser

Description

In Javascript, a library is a javascript file someone else has written that you include in your project in order to extend the functionality of your code. In Make Your Own Library, you will create your own library for others to use. We will consider toolmaking as a creative practice, and create new p5 libraries that may be proposing a helpful feature for the p5 editor, or creating an alternative imagination for what's possible while using p5. Your library could be functional, critical, or poetic. Think about how you will describe your library's purpose and usage to a stranger. Once you've created your JS library, you will also create written instructions on how to use it.

Are.na subchannel

Class Presentation

Recordings 1

Timeline & Deliverables

April 22: Submit a proposal presentation to are.na
April 29: Complete white-boxed version of the project.
May 6: Project due, present during class.

Submission Guidelines

Submit proposal and white-boxed version of your project to Canvas
Add your final project to your Glitch portfolio, and submit your project link to Canvas

Design Constraints

(1) Use Vanilla Javascript
(2) Write your library in it's own file
(3) Include written documentation on how to use your library (in human language i.e. english)

Required Readings

(1) In Defense of Useful Art, Caroline Sinders

Resources

(1) w3 schools Javascript tutorial
(2) w3 schools CSS tutorial
(3) w3 schools HTML tutorial
(4) In class demo

References

(1) قلب A programming language written in Arabic, Ramsey Nasser
(2) God.js, Ramsey Nasser
(3) AARON, Harold Cohen
(4) p5.cmyk.js, A addon library for converting p5 sketches into print ready cmyk files
(5) p5.riso.js, A addon library for converting p5 sketches into print ready riso files

Study Guide

Table of Content

(1) HTML + File Structure Review
(2) p5 Function Review
(3) Vanilla Javascript Functions
(4) Connecting your p5 Sketch and JS Code
(5) Query Selector & SetAttribute Review
(6) CSS Selectors Review

To have our Javascript library run in the web browser we must link it to an HTML file first. Below is an example of a barebones HTML template that shows proper structure.

When downloading a P5 sketch your HTML file will automatically generate script tags for several p5 libraries in the HTML head tag.

When adding in your own libraries you will want to follow a certain file structure as shown below. Since they are local libraries you will want to place them in the body tag.

To make sure that your sketch.js runs correctly you must put the library or libraries that you’ve created above it in your HTML body tag. In this piece of code all of the Javascript libraries are in their own folder so they can be organized and referenced easily by “library/”.

Functions are pieces of code that run at specific times. In p5, both setup and draw are functions where setup runs once when you open the page and draw runs over and over again once per frame. In p5 there are also several built in functions you can use to do different things like draw a circle or set a certain color. These functions often take arguments or values within their parenthesis that further define what you are doing. For example, ellipse() takes values that define the x and y coordinates plus the width and height.
You can create your own functions by following the template below.
Here is one that takes an argument for a name and says hello...

Functions you create can take multiple arguments, just like how the ellipse function mentioned before takes four different arguments to determine size and placement.Here is an example of a function that draws a cloud and takes three arguments for cloud X location, cloud Y location, and cloud size.

The arguments that you have given this are cloudX, cloudY, and cloudSize. You can pass in any number of arguments to alter the size, shape, color, movement, and other properties of what the function is calling. When you call the function you pass in the arguments that you define like this “cloud(150,150,70);”. The first value corresponds to cloudX, second to cloudY, and third to cloudSize. When you create your library you will need to define these arguments so that users can understand what values they will need to pass in.
Once you have written a function successfully and called it, you can then call it multiple times. This will turn our lone cloud into a sky full of clouds! The great part of functions is that now you can treat the cloud() function as one step, instead of the multiple it would take to draw a cloud.

Link To Source Code

Vanilla Javascript functions are one of the fundamental building blocks of the Javascript language. The advantage of using p5 is that there are many functions already built into the library so you don’t have to write out the code for them. When writing vanilla Javascript you may have to take extra steps to create your function that you wouldn’t have to with p5.

Here is an example of a function in vanilla Javascript using Math.random. This function calls a random question from an array and returns it to the user. You can see below that the function is structured in the same way a p5 function would be.

In p5 the “random” function is already simplified for us where in vanilla Javascript you have to write out a more complex piece of code for it. The easiest way to navigate Javascript is to utilize Google + StackOverflow to find answers for your code. Most people who code with Javascript, even very experienced coders, find themselves looking up how to solve problems all the time. To find the piece of code for random in this function you want to be able to search for it very specifically. You may write something like “Vanilla Javascript random item from array” to find the answer you’re looking for.
From here you can find the piece of code you want to use for your project. To learn more about how the code works you may want to google the separate pieces of it. We are going to break down how the code works here.

Math.random will pick a random number between 0 and 1 and questions.length pulls the length of your written array. These are then multiplied to get a random number. Math.floor is then used to round the decimal that is created from the equation in parentheses. This allows the code to pull a specific number from the array and return the question coinciding with it.

To connect your vanilla JS function to your p5 sketch you will need to call it within another function. This snippet of code below shows our askQuestion function being called as an alert when btn2 is pressed in our p5 sketch.

You need to make sure that the function name being called is exactly the same as the one you’ve written in your vanilla JS file so that it executes correctly.

In order to manipulate an html element using JS, we first need to reference the element so our Javascript knows which element to address. There are a few ways of doing this. Most likely you will be using document.querySelector("") and in between the quotes, either an id name with a "#" in front, a class name with a "." in front, or a tag name with nothing in front. Example:
document.querySelector("#cool-id");
document.querySelector(".cool-class");
document.querySelector("div");

Once you've referenced the element you want to manipulate, the easiest way to actually change it is to use setAttribute. SetAttribute allows you to change some aspect of the element whether it's the "style" or if it is a link, the "href" property. See examples below:

To link an external stylesheet to your HTML file you will want to add the line below into your head tag. You can replace “mystyle.css” with whatever you have named your own stylesheet.

Here is the basic structure of a css style:

A selector is a keyword or name we use to reference the HTML element we want to edit such as p for carrot p carrot. The property is the name of the setting we want to change such as background-color. And finally, the value is what we want to set that property as, like changing the background-color to blue. This piece of code would look like this.

Here is a helpful reference for different css properties → https://www.w3schools.com/cssref/ . CSS selectors can be any html tag name such as h1, h2, span, etc. But we can also get more specific with them.For example if this is in our html:

How might we change only the second and third div background-color to red? Well, the following CSS will change all of the paragraphs because it simply references the tag.

But!!! We can separate our div elements with something called Classes.

A CSS Class is essentially a custom name that we give to an HTML element that we can then use in our css to reference that specific element. CSS classes are different from CSS **ID's** (which we will explain in a moment..) because multiple html elements can have the same CSS class.

In order to use a CSS Class we have to first edit our html a bit…

We will have to add a class to our second and third paragraph div’s. This class name can be whatever we want! It should just not have spaces or special characters except dashes are ok (i.e. my-cool-class).

But I will choose mycoolclass as my css class for now.

Now that we have our classes in our html we can reference them in our css by putting a . in front of the class name like so…

This will change just the div’s with “mycoolclass” to a background of yellow and leave the other div as red.

Now what if we wanted to change just the first div’s background to pink and give it a green 1px solid green border? We can totally use a class here, but since it's just one element that we want to change, let's use something called an ID…

An ID is similar to a class. It's a name that you give an html element in order to be able to reference it in your CSS. The key difference between a css Class and a css ID is that an ID can only be used for a singular element. Multiple elements cannot have the same ID. So you really want to use it when you only want to target one specific html element.

Let's first add our ID to the html like so…

Then we can reference it in our css by adding a # in front of the ID name...

This will make it so only the first paragraph has a background color of blue and a green border.

You may have noticed that the div’s extend themselves across the entire html page. We are able to change the divs size in our style sheet using width and height. You can define the space it takes up by using pixels, percentages, or VW/VH (which uses the viewport width + height to divide the html browser into 100 units). Using percentages or VW/VH allows for a more responsive web page as it responds to the size of the browser. We are going to comment out the #mycoolclass divs and change our #mycoolid div to take up 25% of the page.

As you can see now our div is responsive in size to the web browser! Yay!

We are now going to comment out our paragraph 1 div and use the two other div’s code again so that we just see this.

By default divs take up the entire space but the display property allows us to tell them to only take up the amount of space they are using and not the whole line. Some display properties include none which makes the div disappear, block which tells div to take up necessary space, and inline-block which will allow the divs to sit next to each other. The code below shows what an inline-block would look like with our divs.

Now you might notice that the text looks a little awkward with the background only covering underneath it. You can use padding and margins to affect the spacing of this, the image below shows how these two properties are defined.

Adding this line of code will allow us to manipulate the margins and padding. Allowing our divs to look like the image below instead.

Link to Source Code

If you want to change the text color of one of the divs but not the other you can give one of them an ID along with their class name. This ID will override the styling given by the class to allow you to have similar divs that may have slightly different properties. The options for styling are endless and using w3schools as a resource will help you to learn different ways to experiment. :-)