Skip to content

added the library. readme.md (no caps) is the documentation file. #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added SketchFolder/BlackHanSans-Regular.ttf
Binary file not shown.
475 changes: 475 additions & 0 deletions SketchFolder/PointTextLibrary.js

Large diffs are not rendered by default.

25 changes: 25 additions & 0 deletions SketchFolder/SketchEx.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
//Temporary variable used to contain the text string
var txt1;
var txt2;
var txt3;
var txt4;

//Temporary for tests
function setup()
{
canvas = createCanvas(700, 300);
txt1 = new PointText(350, 100, 'Hi, I am text', 32, 0.5, 1, 'point', '#ff0044');
txt2 = new PointText(100, 50, 'Potato', 50, 0.3, 1.5, 'square', '#0099db');
txt3 = new PointText(300, 200, 'Coding', 150, 0.1, 3, 'triangle', '#fee761');
txt4 = new PointText(550, 150, 'Prog18', 80, 0.15, 5, 'point', '#f77622');
}

//Temporary for tests
function draw()
{
background('#193c3e');
txt1.draw();
txt2.draw();
txt3.draw();
txt4.draw();
}
Binary file added SketchFolder/TTWPGOTT.ttf
Binary file not shown.
33 changes: 33 additions & 0 deletions SketchFolder/sketch.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/* eslint no-undef: 0 */
// Most of this is by Daniel Shiffman
// http://codingtra.in
// Steering Text Paths
// I added the functionality to make the particles change into another text and changed the positioning of the text to always be in the middle of the canvas

//Temporary variable used to contain the text string
var hello;

//Temporary for tests
function setup()
{
canvas = createCanvas(300, 300);
canvas.parent('sketch-holder');
hello = new PointText(width/2, height/2, 'Edit Me!', 80, 0.2, 3, 'point', '#FE5F55');
}

//Temporary for tests
function draw()
{
background(0);
hello.draw();
}

function changeAll()
{
hello.setText(document.getElementById('text').value);
hello.setType(document.getElementById('particleType').value);
hello.setFontSize(document.getElementById('fontSize').value*1.3);
hello.setParticleSize(document.getElementById('particleSize').value/50);
hello.setColor(document.getElementById('color').value);
hello.setParticleDensity(document.getElementById('particleDensity').value/100);
}
3,136 changes: 3,136 additions & 0 deletions addons/p5.dom.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions addons/p5.dom.min.js

Large diffs are not rendered by default.

12,613 changes: 12,613 additions & 0 deletions addons/p5.sound.js

Large diffs are not rendered by default.

28 changes: 28 additions & 0 deletions addons/p5.sound.min.js

Large diffs are not rendered by default.

29 changes: 29 additions & 0 deletions example.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Example</title>

<script src="p5.min.js"></script>
<script src="addons/p5.dom.min.js"></script>
<script src="addons/p5.sound.min.js"></script>

<script src = "SketchFolder/PointTextLibrary.js"></script>
<script src="SketchFolder/SketchEx.js"></script>

</head>

<body>
</body>

<style>
body
{
padding: 0px;
margin: 0px;
}
</style>
</html>
226 changes: 226 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
<!DOCTYPE html>
<html lang="">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>SBTRC</title>

<script src="p5.min.js"></script>
<script src="addons/p5.dom.min.js"></script>
<script src="addons/p5.sound.min.js"></script>

<script src = "SketchFolder/PointTextLibrary.js"></script>
<script src="SketchFolder/sketch.js"></script>

<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">

</head>

<body>

<div id = "title">
<h1>Steering Behaviour Text Reusable Component</h1>
</div>

<br>
<br>
<br>

<h2>Description</h2>

<p>
The <b>Steering Behaviour Text Reusable Component</b> is a library created
for P5.js that facilitates the creation of text made up of points that react
to your mouse (awfully specific, but still rather cool)! The code was adapted
from <a href = "https://www.openprocessing.org/sketch/593221">Martine Hage</a>'s
work, although that code was a modification of <a href = "http://codingtra.in">
Daniel Shiffman</a>'s code! The idea is that I modified the code originally
created by these two people, developped it, and then created a JavaScript
reusable component out of it. You can create really interesting pieces of
text by simply typing out something like:
</p>

<pre>
<a style = "color: #feae34">function</a> <a style="color: #0099db;">setup</a>()
{
hello = <a style = "color: #feae34"> new </a><a style="color: #0099db;">PointText</a>(width/<a style="color: #ff0044;">2</a>, height/<a style="color: #ff0044;">2</a>, <a style = "color: #63c74d">'Edit Me!'</a>, <a style="color: #ff0044;">80</a>, <a style="color: #ff0044;">0.2</a>, <a style="color: #ff0044;">3</a>, <a style = "color: #63c74d">'point'</a>, <a style = "color: #63c74d">'#FE5F55'</a>);
}

<a style = "color: #feae34">function</a> <a style="color: #0099db;">draw</a>()
{
hello.<a style="color: #0099db;">draw</a>();
}
</pre>
<p>
The text you see above is what created the default settings for the sketch
you see in the "Try it yourself!" section! You can also check out more
examples <a onClick = "window.open('example.html', 'Example', width = 700, height = 300)"href = "#">here</a>!.
</p>

<h2>Try it yourself!</h2>
<div id="sketch-holder">
<!-- sketch goes here-->
</div>

<div id = "inputs">

<label>Particle Type</label>
<input placeholder="Particle Type" id = "particleType" type="text" value="square"><br>

<label>Text</label>
<input placeholder="Text" id = "text" type="text" value="Hello World!"><br>

<label>Color</label>
<input placeholder="Color" id = "color" type="text" value="#ff0000"><br>

<label>Font Size</label>
<input id = "fontSize" type="range" min="1" max="100" value="30" class = "slider">

<label>Particle Size</label>
<input id = "particleSize" type="range" min="1" max="100" value="70" class = "slider">

<label>Particle Density</label>
<input id = "particleDensity" type="range" min="1" max="100" value="20" class = "slider">

</div>

<br>

<button type="button" onclick="changeAll()">Change</button>

</body>


<style>
#title
{
margin: 0;
padding: 0px 0px 0px 10px;
right: 0;
overflow: hidden;
background-color: #262b44;
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
font-family: 'Titillium Web', sans-serif;
}

h1
{
padding: 0px 0px 0px 10px;
}

h2
{
font-family: 'Titillium Web', sans-serif;
}
p
{
font-family: 'Titillium Web', sans-serif;
}
body
{
padding: 10px;
margin: 10px;
}

/*based on styling from https://www.bestcssbuttongenerator.com/#/0*/
button
{
background-color:#feae34;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #f77622;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Trebuchet MS;
font-size:14px;
font-weight:bold;
padding:12px 12px;
text-decoration:none;
text-shadow:0px 1px 0px #000000;
}
button:hover
{
background-color:#f77622;
}
button:active
{
position:relative;
top:1px;
}


/*based on styling from
https://www.w3schools.com/css/tryit.asp?filename=trycss_forms*/
input[type=text], select
{
display: inline-block;
width: 100%;
height: 15px;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-family: 'Titillium Web', sans-serif;
}


.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

.slider:hover {
opacity: 1;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 8px;
height: 12px;
background: #f77622;
cursor: pointer;
}


div {
display: inline-block;
}
div label {
display: block;
}

/*https://stackoverflow.com/questions/4000792/how-can-i-style-code-listings-using-css*/
pre
{
background: #f4f4f4;
border: 1px solid #ddd;
color: #666;
page-break-inside: avoid;
font-family: monospace;
font-size: 15px;
line-height: 1.1;
max-width: 100%;
overflow: auto;
padding: 1em 1.5em;
display: block;
}


</style>
</html>
81,578 changes: 81,578 additions & 0 deletions p5.js

Large diffs are not rendered by default.

15 changes: 15 additions & 0 deletions p5.min.js

Large diffs are not rendered by default.

54,420 changes: 54,420 additions & 0 deletions p5.pre-min.js

Large diffs are not rendered by default.

11 changes: 11 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"name": "steeringbehaviortextmodified-master",
"version": "1.0.0",
"description": "",
"main": "p5.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
245 changes: 245 additions & 0 deletions readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,245 @@
# Steering Behaviour Text Reusable Component

# Table of contents
[Introduction](#Introduction) \
[Methods](#Methods) \
[Miscellaneous Methods](#Miscellaneous-Methods) \
[Constructor](#Constructor) \
[Setters](#Setters) \
[Getters](#Getters)
# Introduction
The **Steering Behaviour Text Reusable Component** is a library created for P5.js that facilitates the creation of text made up of points that react to your mouse (awfully specific, but still rather cool)! This is made possible through having a PointText class. The code was adapted from [Martine Hage](https://www.openprocessing.org/sketch/593221)'s work, although that code was a modification of [Daniel Shiffman](https://thecodingtrain.com/)'s code! The idea is that I modified the code originally created by these two people, developped it, and then created a JavaScript reusable component out of it. If you want to test out an interactable example, you can follow [this](https://conradian.github.io/Steering-Behaviour-Text-Reusable-Component) link.

Here's an example (you can't interact with it here though)!

![Potato](https://i.ibb.co/BP7HCT6/Capture.png)

# Methods
The following sections will be related to the several methods that can be used. Please note that "text" is some arbitraty object pertaining to the PointText class.
# Miscellaneous Methods
### Constructor
##### How to call
``` javascript
var text = new PointText(x, y, text, fontSize, density, pointSize, type, color, font, renderer);
```
##### Parameter Explanation
**x:** x-coordinate of where to draw the text (calculated from the very right).
**_Default = 0_**

**y:** y-coordinate of where to draw the text (calculated from the very top).
**_Default = 0_**

**text:** the string corresponding to what text to draw.
**_Default = 'Default Text'_**

**fontSize:** the number corresponding to the size of the text drawn. Note that this isn't how large the particles are, but rather how large the text itself is.
**_Default = 64_**

**density:** the number corresponding to the density of the particles making up the text. The higher the number, the more tighly packed the particles will be. Note that the higher the density the more particles will be drawn, which can have a negative impact on performance.
**_Default = 0.3_**

**pointSize:** the number corresponding to the size of the particles making up the drawn text.
**_Default = 3_**

**type:** a string that corresponds to the particle type. The current options are: 'square', 'point', or 'triangle'. If a parameter other than one of these is input, then it will simply default to 'point'.
**_Default = 'point'_**

**color:** the hexadecimal number in the form of a string corresponding to the color of the drawn text. For example, '#FFFFFF'.
**_Default = '#FFFFFF'_**

**font:** the font to draw the text in.
**_Default = loadFont('https://punrad.github.io/SteeringBehaviorTextModified/SketchFolder/TTWPGOTT.ttf');_**

**renderer:** a P5.renderer object to draw the component to. Must enable WEBGL in the P5.js-speific draw function for this to work.
**_Default = no renderer_**

##### Note
Default values will be used if the parameter is left unspecified. However, to unspeficy it, you won't be able to specify any of the parameters that come after it. For instance, if you don't want to specify the fonSize, then the following parameters will also have to use their default variables: density, pointSize, type, color, font, and renderer.
### draw
``` javascript
//How to call
text.draw();
```
**Note**
This function doesn't output anything, or take in any values. It's simply used to draw the text. This function should be called in the P5.js draw function so that it can be updated at every frame and react to the mouse. In the case that you want to stop drawing the text, you can code the following:
``` javascript
//Example code for not drawing
text.setHidden(true);
```

### toggleFreeze
``` javascript
//How to call
text.toggleFreeze();
```
**Note**
When a PointText object is frozen, it will no longer react to the mouse and each particle will stay fixed in its position (even if they are out of place due to moving away from the mouse). If the text this function is performed is unfrozen, then it will freeze it. If it is frozen then it will unfreeze it.

### reset
``` javascript
//How to call
text.reset();
```
**Note**
This function resets the PointText object and re-draws it. This is normally not used, since the primary use of this is to reset the object after setters are used. However, it might be useful in some circumstances.


# Setters
Below you will find a list of all setters along with an explanation regarding how they function. Note that all of these functions don't return anything, they simply set an object's variable to the inserted parameter. Note that if you attempt to set a variable to a data type that it should not be, then it will automatically changed
#### setHidden
``` javascript
//How to call
text.setHidden(state);
```
**Inputs** \
state: a boolean represeting whether the text is shown (true) or not (false).

#### setText
``` javascript
//How to call
text.setText(stringText);
```
**Inputs** \
stringText: the string to be drawn out of the points.

#### setType
###### Important Note: Possible parameters are "square", "point", or "triangle"
``` javascript
//How to call
text.setType(particleType);
```
**Inputs** \
particleType: a string that corresponds to the particle type. The current options are: 'square', 'point', or 'triangle'. If a parameter other than one of these is input, then it will simply default to "point".

#### setFontSize
``` javascript
//How to call
text.setFontSize(size);
```
**Inputs** \
size: the number corresponding to the size of the text drawn. Note that this isn't how large the particles are, but rather how large the text itself is.

### setParticleSize
``` javascript
//How to call
text.setParticleSize(size);
```
**Inputs** \
size: the number corresponding to the size of the particles making up the drawn text.

### setParticleDensity
``` javascript
//How to call
text.setParticleDensity(density);
```
**Inputs** \
density: the number corresponding to the density of the particles making up the text. The higher the number, the more tighly packed the particles will be. Note that the higher the density the more particles will be drawn, which can have a negative impact on performance.

### setColor
``` javascript
//How to call
text.setColor(color);
```
**Inputs** \
color: the hexadecimal number in the form of a string corresponding to the color of the drawn text. For example, '#FFFFFF'.

### setCoordinates
``` javascript
//How to call
text.setColor(x,y);
```
**Inputs** \
x: the x coordinate at which the object is drawn.
y: the y coordinate at which the object is drawn.


# Getters
All of the getters can be called by doing the following:

```javascript
//getterFunction is only an example function to illustrate a point
text.getterFunction();
```
This is given that the getterFunction is, for instance, getHidden, or getText.

Below you will find the full list detailing all of the getters.
### getHidden
``` javascript
//How to call
text.getHidden();
```
**Outputs** \
A boolean representing whether the object is hidden or not.

### getText
``` javascript
//How to call
text.getText();
```
**Outputs** \
The string the object is drawing.

### getType
``` javascript
//How to call
text.getType();
```
**Outputs** \
The string corresponding to the name of the drawn particle's shape.

### getFontSize
``` javascript
//How to call
text.getFontSize();
```
**Outputs** \
The number corresponding to the font size of the drawn text.


### getParticleSize
``` javascript
//How to call
text.getParticleSize();
```
**Outputs** \
The number corresponding to the particle size of the drawn text.


## getParticleDensity
``` javascript
//How to call
text.getParticleDensity();
```
**Outputs** \
The number corresponding to the density of the drawn text.


## getColor
``` javascript
//How to call
text.getColor();
```

## getColor
``` javascript
//How to call
text.getColor();
```
**Outputs** \
The hexadecimal number in the form of a string corresponding to the color of the drawn text. For example, '#FFFFFF'.

## getCoordinates
``` javascript
//How to call
text.getCoordinates();
```
**Outputs** \
An array in the form of [x,y], where x is the x coordinate of the object, and y is the y coordinate of the object.

## getParticles
``` javascript
//How to call
text.getParticles();
```
**Outputs** \
An array containing all of the particles making up the PointText.