Compare commits
11 Commits
de06ae0897
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 gauthiier
|
f076d0469d | ||
|
gauthiier
|
0d0c667d01 | ||
|
gauthiier
|
5374cc530a | ||
|
gauthiier
|
4a2fafc8d7 | ||
|
gauthiier
|
3c41d2cbc0 | ||
|
gauthiier
|
17ab94aed0 | ||
|
gauthiier
|
657209f22d | ||
|
gauthiier
|
6ba906075c | ||
|
gauthiier
|
031fa9297d | ||
|
gauthiier
|
faa84cae1e | ||
|
gauthiier
|
f9074de87d |
+11
-5
@@ -1,9 +1,11 @@
|
||||
<p align="center">
|
||||
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/autopilot-creativity.png" alt="autopilot creativity" width="350" style="display: block; margin: 0 auto;" />
|
||||
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/autopilot-creativity.png" alt="autopilot creativity" width="350" style="display: block; margin: 0 auto;" />
|
||||
</p>
|
||||
|
||||
# Framing the (art historical) debate: (Pre-, Post-) Modern?
|
||||
|
||||
Cramer, Florian. “Concepts, Notations, Software Art.” In *Signwave, Auto-Illustrator Users Guide*, 101–12. Liquid Press/Spacex, 2002.
|
||||
|
||||
> The history of the digital and computer-aided arts could be told as a history of ignorance against programming and programmers. Computer programs get locked into black boxes, and programmers are frequently considered to be mere factota, coding slaves who execute other artist’s concepts. (Cramer 1)
|
||||
|
||||
> A computer program is a blueprint and its execution at the same time. Like a pianola roll, it is a score performing itself. [...] Computer programming collapses, as it seems, the second and third of the three steps of concept, concept notation and execution. (Cramer 4)
|
||||
@@ -14,18 +16,22 @@
|
||||
|
||||
> If software is generally defined as executable formal instructions, logical scores, then the concept of software is by no means limited to formal instructions for computers. (Cramer 5)
|
||||
|
||||
Work 0: [Sol LeWitt's "Plan for a Concept Art Book"] https://www.sollewittprints.org/artwork/lewitt-raisonne-1971-18/
|
||||
_Work 0: [Sol LeWitt's "Plan for a Concept Art Book"](https://www.sollewittprints.org/artwork/lewitt-raisonne-1971-18)_
|
||||
|
||||
Cox, Geoff, Alex McLean, and Adrian Ward. “Coding Praxis: Reconsidering the Aesthetics of Code.” In *Read_me: Software Art & Cultures*, edited by Olga Goriunova and Alexei Shulgin, 161–74. Aarhus: Aarhus University Press, 2004.
|
||||
|
||||
> The paper argued that any separation of code and the resultant actions would simply limit the aesthetic experience [...] Speech and its repre- sentation in writing together form a language that we appreciate as poetry. In the essay we speculated whether code could be seen to work in a similar way? (Cox et al. 161)
|
||||
|
||||
> The written form is merely a computer-readable notation of logic, and is a representation of this process. Yet the written code isn’t what the computer really executes, since there are many levels of interpreting and compiling and linking taking place. [...] But software itself relies on the deferred action of its author — the code operates on behalf of the programmer, so it is more accurate to consider this as part of a continuing performance. (Cox et al. 164)
|
||||
|
||||
Galloway, Alexander R. “Jodi’s Infrastructure.” *E-Flux*, no. 74 (June 2016).
|
||||
|
||||
> Two basic activities emerge. A person may work "on" the digital or "within" it. In the former, one's attention is directed from the outside in, taking the medium itself as its object, while in the latter one takes the perspective of the medium itself, radiating attention outward to other contexts and environments. To generalize from this, the first position (working "on") is labeled modern or, when applied to art and aesthetics, modernist. And the latter position (working "within") is labeled non-modern, be it premodern, postmodern, or some other alternative (Galloway, 1-2).
|
||||
|
||||
Work 1: http://㐃.net
|
||||
Work 2: [Ed Atkins, Ribbons](https://www.youtube.com/watch?v=3EkqVWXBVOQ)
|
||||
_Work 1: http://㐃.net_
|
||||
_Work 2: [Ed Atkins, Ribbons](https://www.youtube.com/watch?v=3EkqVWXBVOQ)_
|
||||
|
||||
Other works: https://constantdullaart.com/, https://arambartholl.com,
|
||||
_Other works: https://constantdullaart.com/, https://arambartholl.com_
|
||||
|
||||
> Where does the work reside? (Galloway, 5)
|
||||
|
||||
|
||||
+16
-14
@@ -3,17 +3,17 @@
|
||||
## 👋 p5js Editor
|
||||
|
||||
<p align="center">
|
||||
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/editor.p5js.png" alt="autopilot creativity" height="650"/>
|
||||
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/editor.p5js.png" alt="autopilot creativity" height="650"/>
|
||||
</p>
|
||||
|
||||
## 🤔 How does code work/act?
|
||||
|
||||
<p align="center">
|
||||
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/raw/branch/main/img/compiler.svg" alt="autopilot creativity" height="150"/>
|
||||
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/raw/branch/main/img/compiler.svg" alt="autopilot creativity" height="150"/>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/raw/branch/main/img/interpreter.svg" height="150"/>
|
||||
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/raw/branch/main/img/interpreter.svg" height="150"/>
|
||||
</p>
|
||||
|
||||
## Sketch: 0. Hello World
|
||||
@@ -35,7 +35,7 @@ function draw() {
|
||||
## 🤔 What kind of "Errors"?
|
||||
|
||||
<p align="center">
|
||||
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/error.png" height="200"/>
|
||||
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/error.png" height="200"/>
|
||||
</p>
|
||||
|
||||
## Sketch: 1.0 Key Events
|
||||
@@ -58,7 +58,7 @@ function draw() {
|
||||
|
||||
### 📚 Exercise
|
||||
|
||||
1. Modify the sketch 1.0 so that "Hello World" is printed only when a key is pressed. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/).
|
||||
1. Modify the sketch 1.0 so that "Hello World" is printed only when a key is pressed. To do so have a look at the [p5js reference](https://p5js.org/reference/)
|
||||
|
||||
## Sketch: 1.1 Mouse Events
|
||||
|
||||
@@ -85,9 +85,9 @@ function mouseMoved() {
|
||||
```
|
||||
### 📚 Exercises
|
||||
|
||||
1. Modify sketch 1.1 so that a circle is draw on the screen at the location where the mouse is each time it moves. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/).
|
||||
1. Modify sketch 1.1 so that a circle is drawn on the canvas at the location where the mouse is located each time it moves. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/).
|
||||
|
||||
2. What can you observe with the circle being drawn on the screen? Can you modify the sketch so that a trace of the movement on the mouse stay on the screen and erase this trace when the mouse is pressed?
|
||||
2. What can you observe with the circle being drawn on the canvas? Can you modify the sketch so that a trace of the movement of the mouse stay on the canvas and erase itself when the mouse is pressed?
|
||||
|
||||
## 🤔 What are (x,y) coordinates (in p5js)?
|
||||
|
||||
@@ -130,9 +130,9 @@ function mouseMoved() {
|
||||
|
||||
### 📚 Exercises
|
||||
|
||||
1. Modify sketch 1.2 so that a line is drawn between the location of current mouse press and the previous location. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/).
|
||||
1. Modify sketch 1.2 so that a line is drawn between the location of the current mouse press and the previous location. To do so have a look at [p5js reference](Reference: https://p5js.org/reference/).
|
||||
|
||||
2. Modify the sketch further and try erasing what is drawn each time a key is pressed.
|
||||
2. Modify the sketch further and try erasing what is drawn on the canvas each time a key is pressed.
|
||||
|
||||
### Sketch: 1.3 Distance and Text
|
||||
|
||||
@@ -175,12 +175,14 @@ function draw() {
|
||||
### 📚 Exercise
|
||||
|
||||
1. Modify sketch 1.3 so that:
|
||||
* if the calculated distance between the previous and current mouse pressed locations is less than 300 then display "🍕" as text at the current mouse location and "PIZZA" at the previous
|
||||
* if the calculated distance between the previous and current mouse pressed locations is less than 600 then display "🍍" as text at the current mouse location and "ANANAS" at the previous
|
||||
* if the calculated distance between the previous and current mouse pressed locations is less than 300 then display "🍕" as text at the current mouse location and "PIZZA" at the previous location
|
||||
* if the calculated distance between the previous and current mouse pressed locations is less than 600 then display "🍍" as text at the current mouse location and "ANANAS" at the previous location
|
||||
* Otherwise display "😵💫" as text at the current mouse location and "WOOOOO" at the previous
|
||||
|
||||
## 🤔 What are conditional statements (i.e. if-statements)?
|
||||
|
||||
Below are what is commonly called "if-statements":
|
||||
|
||||
```javascript
|
||||
if(conditionX) {
|
||||
// if conditionX is true then
|
||||
@@ -203,14 +205,14 @@ if(conditionX) {
|
||||
}
|
||||
```
|
||||
|
||||
Ok ok, but what are "conditions" then?
|
||||
Ok, but what are "conditions" (i.e. conditionX, conditionY, conditionZ, etc.) then?
|
||||
|
||||
<p align="center">
|
||||
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/comp-operators.png" width="100%"/>
|
||||
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/comp-operators.png" width="100%"/>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/logic-operators.png" width="100%"/>
|
||||
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/logic-operators.png" width="100%"/>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
+35
-31
@@ -1,7 +1,7 @@
|
||||
# Ghost Writing: Text, Arrays, Randomness
|
||||
# Ghost Writing: Text, Arrays, Loops, and Randomness
|
||||
|
||||
<p align="center">
|
||||
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/love-letter.png" width="80%"/>
|
||||
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/love-letter.png" width="80%"/>
|
||||
</p>
|
||||
|
||||
## Sketch: 2.0 Array + Index
|
||||
@@ -51,7 +51,7 @@ function keyTyped() {
|
||||
### 🤔 Who/what is "undefined"?
|
||||
|
||||
<p align="center">
|
||||
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/undefined.png">
|
||||
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/undefined.png">
|
||||
</p>
|
||||
|
||||
## Sketch: 2.1 Array + Index + Loop
|
||||
@@ -140,7 +140,7 @@ Rudimentary indeed, but there are many things we can build with this simple func
|
||||
|
||||
Since we access elements of an array with indices, we can generate a random index between 0 and the length of an array to select a random element in it.
|
||||
|
||||
The first problem we must solve though is that the ```random``` functions generates a "real" number (ex: 4.993319470244624, 1.9486631456631776, 7.1841821754535813, etc.) while the indices of an array are "integer" numbers (5, 2, 7, etc.). We thus need to round the "real" numbers produced by random to get an “integer” (4.993319470244624 -> 5, 1.9486631456631776 -> 2, 7.1841821754535813 -> 7).
|
||||
The first problem we must solve though is that the ```random``` functions generates a "real" number (ex: 4.993319470244624, 1.9486631456631776, 7.1841821754535813, etc.) while the indices of an array are "integer" (whole) numbers (5, 2, 7, etc.). We thus need to round the "real" numbers produced by random to get an “integer” (4.993319470244624 -> 5, 1.9486631456631776 -> 2, 7.1841821754535813 -> 7).
|
||||
|
||||
We do this with the ```floor``` function that simply rounds a number down (4.993319470244624 -> 4) to the nearest integer. Here is an example:
|
||||
|
||||
@@ -243,16 +243,16 @@ Karin wears a black jacket when Maaike plays chess
|
||||
## ✍️ Christopher Strachey's Love Letters
|
||||
|
||||
<p align="center">
|
||||
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/Strachey-Mark1.png" width="100%"/>
|
||||
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/Strachey-Mark1.png" width="100%"/>
|
||||
</p>
|
||||
|
||||
So now that we have a better understanding of how arrays, indices, randomness, and functions work, let's write love letters!
|
||||
|
||||
One of the first non-scientific computer program that was ever written is Christopher Strachey's Love Letters program for the Manchester Mark I (so called [Baby](https://content.presspage.com/uploads/1369/1920_themanchestermk1computerbuiltbyextendingthebaby.jpg?10000)). In fact, this computer program (written in 1952 and making use of randomness) is arguably the first art-inspired program!
|
||||
One of the first non-scientific computer program that was ever written is Christopher Strachey's Love Letters program devised for the Manchester Mark I (the so called [Baby](https://content.presspage.com/uploads/1369/1920_themanchestermk1computerbuiltbyextendingthebaby.jpg?10000)). In fact, this computer program (written in 1952 and making use of randomness) is arguably the first art-inspired program!
|
||||
|
||||
Christopher Strachey was/is a computer programming pioneer who worked along Alan Turing in the very early days of computing at the University of Manchester. Strachey's story is fascinating. There is a great article about [him and the love letters on Rhizome's Queer History of Computing written by Jacob Gaboury](https://rhizome.org/editorial/2013/apr/9/queer-history-computing-part-three/). For those who are interested in researching Strachey's work, please have a look at his [papers and correspondences at the Bodleain library's archive](https://archives.bodleian.ox.ac.uk/repositories/2/resources/2561).
|
||||
|
||||
Strachey's Love Letters have been studied before. [David Link](http://www.alpha60.de) did a colossal reconstitution of the Love Letter program on a simulator of the Manchester Mark computer. [The works was exhibited circa 2010](http://www.alpha60.de/art/love_letters/). The program does not look at all like the code we are writing now! The picture on the right side of the image above (☝️) is from Link's simulator. Early computers did not have the compilers and interpreters we have now (remember compilers and interpreters?) and thus the code was written in a rather cryptic way (believe me, way more cryptic than what we are writing now).
|
||||
Strachey's Love Letters have been studied before. [David Link](http://www.alpha60.de) did a colossal reconstitution of the Love Letters program on a simulator of the Manchester Mark I computer. [The work was exhibited circa 2010](http://www.alpha60.de/art/love_letters/). Strachey's program does not look at all like the code we are writing now! The picture on the right side of the image above (☝️) is from Link's simulator. Early computers did not have the compilers and interpreters we have now (remember compilers and interpreters?) and thus the code was written in a rather cryptic way (believe me, way more cryptic than what we are writing now).
|
||||
|
||||
The program we are about to write in a "modern" computing language (i.e. javascript/p5js) is a modified version of [Nick Montfort](https://nickm.com)'s letter.py code written in python (another programming language). Montfort's letter.py was based on Noah Wardrip-Fruin's article ["Digital Media Archaeology."](https://www.degruyter.com/document/doi/10.1525/9780520948518-016/html)
|
||||
|
||||
@@ -317,7 +317,7 @@ HONEY LOVE
|
||||
MUC
|
||||
```
|
||||
|
||||
Can you decipher certain writing patterns in the above formulations? If so, what are they?
|
||||
Can you decipher certain word patterns in the above formulations? If so, what are they?
|
||||
|
||||
Consider the following sentences:
|
||||
|
||||
@@ -326,11 +326,11 @@ MY YEARNING FERVENTLY LIKES YOUR AMOROUS PASSION.
|
||||
MY APPETITE TENDERLY CHERISHES YOUR BEAUTIFUL WISH.
|
||||
```
|
||||
|
||||
Are there common words here? Yes, the "MY" and "YOUR".
|
||||
Are there common words here? Yes, the "MY" and "YOUR" right?
|
||||
|
||||
What about the other words, do they have something in common? Yes. They are nouns, adverbs, verbs, and adjectives. And these have indeed a particular position in each sentence.
|
||||
What about the other words, do they have something in common? Yes. They are sequences of nouns, adverbs, verbs, and adjectives. And these have indeed a particular position in each sentence.
|
||||
|
||||
We can thus devise a "code" of the sentences as follow:
|
||||
We can thus devise a "code" or "template" of the sentences as follow:
|
||||
|
||||
MY + ```noun``` + ```adverb``` + ```verb``` + YOUR + ```adjective``` + ```noun``` + .
|
||||
|
||||
@@ -371,15 +371,15 @@ Also, in terms of composition or sentences sequencing we can notice that:
|
||||
3. short form YOU ARE MY + ```adjective``` + ```noun``` + . is never followed by the same short form YOU ARE MY + ```adjective``` + ```noun``` + .
|
||||
4. A letter comprises between 4 and 5 sentences (long or short form)
|
||||
5. A letter is always closed with YOURS + ```adverb```
|
||||
6. A letter is always signed by MUC (which means Manchester University Computer Department)
|
||||
6. A letter is always signed by MUC (which means Manchester University Computer)
|
||||
|
||||
|
||||
|
||||
### Reconstituting Love Letters' algorithm
|
||||
|
||||
Now that we have an idea of the structure of Strachey's letters, let's get to work in formalising it's algorithmic generation.
|
||||
Now that we have an idea of the structure of Strachey's letters, let's get to work in formalising their algorithmic generation.
|
||||
|
||||
Luckily, in terms of vocabulary, we can start with Monfort's work that gives the following arrays:
|
||||
Luckily, in terms of vocabulary, we can start with Monfort's archaeological work that gives the following vocabulary in an array forms:
|
||||
|
||||
```javascript
|
||||
// vocabulary
|
||||
@@ -417,7 +417,7 @@ function long() {
|
||||
|
||||
This will certainly work. Yet I would like to have more variation with the sentences the function returns. As it stands it will always follow the long form structure. Is there a way we can achieve this with injecting some randomness in the structure?
|
||||
|
||||
How about we make ```adjective``` and ```adverb``` non mandatory, meaning they maybe there or not. What I have in mind is something like:
|
||||
How about we make ```adjective``` and ```adverb``` non mandatory, meaning they might be printed or not. What I have in mind is something like:
|
||||
|
||||
```javascript
|
||||
// function that randomly generates a long form sentence
|
||||
@@ -444,7 +444,7 @@ function maybe(array_to_choose_from) {
|
||||
}
|
||||
````
|
||||
|
||||
With this ```maybe``` function we now have a way to diversify the letter's sentences and thus create more variation on our generated long forms.
|
||||
With this ```maybe``` function we now have a way to diversify the letter's sentences and thus produce more variations of our generated long forms.
|
||||
|
||||
How about the short forms?
|
||||
|
||||
@@ -486,7 +486,11 @@ function closing() {
|
||||
|
||||
Great. Now we have most of the ingredients in place with the functions ```choice```, ```maybe```, ```long```, ```short```, ```opening```, ```closing``` right?
|
||||
|
||||
How about sequencing ```long``` and ```short``` forms? Remember what we observed above (i.e. a letter is 4 to 5 sentences long, short form MY + ```adjective``` + ```noun``` + . always follows the other short form, etc.)?
|
||||
How about sequencing ```long``` and ```short``` forms? Remember what we observed above (points 2, 3, 4):
|
||||
|
||||
2. the short form MY + ```adjective``` + ```noun``` + . always follows the other short form YOU ARE MY + ```adjective``` + ```noun``` + . This short form never follows the long form.
|
||||
3. short form YOU ARE MY + ```adjective``` + ```noun``` + . is never followed by the same short form YOU ARE MY + ```adjective``` + ```noun``` + .
|
||||
4. A letter comprises between 4 and 5 sentences (long or short form)
|
||||
|
||||
Following these observation here is a skeleton of an algorithm doing just that:
|
||||
|
||||
@@ -494,10 +498,10 @@ Following these observation here is a skeleton of an algorithm doing just that:
|
||||
// start with an empty text
|
||||
var text = "";
|
||||
|
||||
// did we just wrote the short form with "YOU ARE MY"
|
||||
let YOU_ARE = false;
|
||||
// did we just wrote the short form with "YOU ARE MY" (points #2 and #3)
|
||||
let YOU_ARE_MY = false;
|
||||
|
||||
// loop 5 times to generate 5 sentences
|
||||
// loop 5 times to generate 5 sentences (point #4)
|
||||
for(let i = 0; i < 5; i++) {
|
||||
|
||||
// choose if the next sentence is a short or long
|
||||
@@ -506,30 +510,30 @@ for(let i = 0; i < 5; i++) {
|
||||
if(sentence_form == 'short') {
|
||||
// there's two types of short to switch from
|
||||
|
||||
// the short form MY + ```adjective``` + ```noun``` + .
|
||||
// (#2) the short form MY + ```adjective``` + ```noun``` + .
|
||||
// always follows the YOU ARE MY + ```adjective``` + ```noun``` + . one
|
||||
// and
|
||||
// the short form YOU ARE MY + ```adjective``` + ```noun``` + . one
|
||||
// (#3) the short form YOU ARE MY + ```adjective``` + ```noun``` + . one
|
||||
// can never follow itself
|
||||
|
||||
// this means we need keep track of when "YOU ARE MY" is generated
|
||||
// and switch to the other form next time. This is what the variable
|
||||
// YOU_ARE is doing
|
||||
// YOU_ARE_MY is doing
|
||||
|
||||
if(YOU_ARE) {
|
||||
// the ": MY" can only follow a "YOU ARE MY"
|
||||
if(YOU_ARE_MY) {
|
||||
// the ": MY" can only follow a "YOU ARE MY" (point #2)
|
||||
text += ": MY " + short();
|
||||
YOU_ARE = false;
|
||||
YOU_ARE_MY = false;
|
||||
} else {
|
||||
text += "YOUR ARE MY " + short();
|
||||
// the ": MY" can only follow a "YOU ARE MY"
|
||||
YOU_ARE = true;
|
||||
// the "YOU ARE MY" cannot follow another "YOU ARE MY"(point #3)
|
||||
YOU_ARE_MY = true;
|
||||
}
|
||||
}
|
||||
else if(sentence_form == 'long') {
|
||||
text += long();
|
||||
// make sure the next sentence is not ": MY"
|
||||
YOU_ARE = false
|
||||
YOU_ARE_MY = false
|
||||
}
|
||||
}
|
||||
````
|
||||
@@ -538,7 +542,7 @@ for(let i = 0; i < 5; i++) {
|
||||
|
||||
### Putting it all together
|
||||
|
||||
Ok, let's formalise what we have sketched above and write a custom ```write_letter``` function that returns and full fleshed love letter.
|
||||
Ok, let's formalise what we have sketched above and write a custom ```write_letter``` function that returns and full love letter.
|
||||
|
||||
```javascript
|
||||
// function returning a love letter
|
||||
@@ -717,7 +721,7 @@ function keyTyped() {
|
||||
The output of our program looks like this:
|
||||
|
||||
<p align="center">
|
||||
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/letter-output.png"/>
|
||||
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/letter-output.png"/>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
+17
-15
@@ -2,7 +2,7 @@
|
||||
|
||||
## Sketch: 3.0 Drawing text
|
||||
|
||||
So far, we have mainly dealt with text printed on the console. Pretty 1980 is you ask me. It is an aesthetic (of course) though we can also display text on the preview canvas as well!
|
||||
So far, we have mainly dealt with text printed on the console. Pretty 1980 is you ask me. It is an aesthetic (of course) though we can also display text on the canvas as well!
|
||||
|
||||
Consider the following sketch using the ```text ``` function.
|
||||
|
||||
@@ -23,11 +23,11 @@ What do you observe when you run the sketch?
|
||||
|
||||
### 📚 Exercises
|
||||
|
||||
To complete the following exercices, have a loot at the section Typography in the [p5js reference](Reference: https://p5js.org/reference/).
|
||||
To complete the following exercices, have a loot at the section Typography in the [p5js reference](https://p5js.org/reference/).
|
||||
|
||||
1. Modify the sketch 3.0 and enlarge the text's font size.
|
||||
|
||||
2. Create a "text box" in which the text can be displayed in full, that is, wrapped in the box.
|
||||
2. Create a "text box" in which the text can be displayed in full (i.e. wrapped in the box).
|
||||
|
||||
3. Can you change the font of the text?
|
||||
|
||||
@@ -60,13 +60,15 @@ function draw() {
|
||||
}
|
||||
````
|
||||
|
||||
Remember sinusoidal waveforms in your Mathematics class in school? Well they are fabulous! Sinus and Cosinus are great trigonometric functions to play with to produce simple animations. Sinusoidals (sinus or cosinus) have interesting properties that can easily be parametrised.
|
||||
Remember sinusoidal waveforms in your Mathematics class in school? Well they are fabulous!
|
||||
|
||||
Sinus and Cosinus are great trigonometric functions to play with as they can help produce simple animations. Sinusoidals (sinus or cosinus) have interesting properties that can easily be parametrised.
|
||||
|
||||
<p align="center">
|
||||
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/sinusoidal.png"/>
|
||||
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/sinusoidal.png"/>
|
||||
</p>
|
||||
|
||||
In our p5js environment there is a ```sin``` function that can be used along a special ```frameCount``` counter that literally keeps track of the number of frames that have been drawn on the canvas. By inputting ```frameCount``` to the ```sin``` function it will return a real number between -1 and 1 (see figure above). In fact this real number will “oscillate” between -1 and 1, following the sinus waveform.
|
||||
In our p5js environment there is a ```sin``` function that can be used along a special ```frameCount``` counter that literally keeps track of the number of frames that have been drawn on the canvas. By inputting ```frameCount``` to the ```sin``` function it will return a real number between -1 and 1 (see figure above). In fact this real number will “oscillate” between -1 and 1, following the sinusoidal waveform.
|
||||
|
||||
A statement like to one below will roughly oscillate between 0 and 255 each time ```frameCount``` is incremented.
|
||||
|
||||
@@ -78,15 +80,15 @@ let osc = 128 + sin(frameCount) * 127;
|
||||
|
||||
1. Can you explain why there is a 128 and a 127 in the statement above?
|
||||
|
||||
2. Modify sketch 3.1 and change the colour of the text with the ```osc``` variable.
|
||||
2. Modify sketch 3.1 and change the colour of the text with the ```osc``` variable above.
|
||||
|
||||
3. What do you observe? How can the speed of colour change be slower? In other words, is there a way to slow down the ```frameCount``` inputted in the ```sin``` function?
|
||||
3. What do you observe? How can the speed of colour change be slower? In other words, is there a way to slow down the ```frameCount``` input of the ```sin``` function?
|
||||
|
||||
## Sketch: 3.2 Keeping track of clicks with arrays and animate shapes
|
||||
|
||||
In sketch 1.1 we drew circles on the canvas when we pressed the mouse. One problem we had then had to do with the background remember? The ```background``` function was erasing our circles.
|
||||
In sketch 1.1 we drew circles on the canvas when we pressed the mouse. One problem we had was with the background remember? The ```background``` function was erasing our circles.
|
||||
|
||||
Now that we understand arrays we can fix this problem by "recording" the location where the mouse was pressed. To do so well will produce a "record" of each mouse press and add it to an array. This "record" will be a [p5js vector](https://p5js.org/reference/#/p5/createVector) having a X and Y coordinate.
|
||||
Now that we understand arrays we can fix this problem by "recording" the location where the mouse was pressed. To do so we will produce a "record" of each mousse press y adding the location of the mousse when pressed to an array. This "record" will be a [p5js vector](https://p5js.org/reference/#/p5/createVector) having a X and Y coordinate.
|
||||
|
||||
```javascript
|
||||
// Capture mouse pressed and record locations!
|
||||
@@ -115,7 +117,7 @@ function draw() {
|
||||
|
||||
The drawing produced by the sketch looks very much like sketch 1.1 right?
|
||||
|
||||
True. But with this code we can draw more interesting things than we could in sketch 1.1. Since we have a global array (circles) we can access each circle and animate them in different ways, something that was practically impossible in sketch 1.1.
|
||||
True. But with this code we can draw more interesting things than we could in sketch 1.1. Since we have a global array (```circles```) we can access each circle and animate them in different ways, something that was practically impossible in sketch 1.1.
|
||||
|
||||
### 📚 Exercises
|
||||
|
||||
@@ -125,13 +127,13 @@ True. But with this code we can draw more interesting things than we could in sk
|
||||
|
||||
## Sketch: 3.3 Image
|
||||
|
||||
With p5js we can also work with images. The way we are going to work with images will be to upload them to our online environment. The way upload images is by opening the "Sketch files" and the left side of the page and select upload files.
|
||||
With p5js we can also work with images. The way this works is to upload them to our online environment by opening the "Sketch files" and the left side of the page and select upload files.
|
||||
|
||||
<p align="center">
|
||||
<img src="https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/upload.png"/>
|
||||
<img src="https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/img/upload.png"/>
|
||||
</p>
|
||||
|
||||
When the image is uploaded, the way we can display it on the canvas is as follow (for this sketch I am using [this image](https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/src/branch/main/img/alan-turing.png)):
|
||||
When the image is uploaded, we can display it on the canvas as follow (for this sketch I am using [this image](https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/src/branch/main/img/alan-turing.png)):
|
||||
|
||||
```javascript
|
||||
// Image!
|
||||
@@ -161,7 +163,7 @@ function draw() {
|
||||
}
|
||||
```
|
||||
|
||||
Now this is rather simple. You can of course play with the coordinates of the image as we did with our circles above but have a look the Image section in the [p5js reference](Reference: https://p5js.org/reference/) and consider the simple manipulations you can use on your image.
|
||||
Now this is rather simple. You can of course play with the coordinates of the image as we did with our circles above but have a look the Image section in the [p5js reference](https://p5js.org/reference/) and consider the simple manipulations you can use on your image.
|
||||
|
||||
### 📚 Exercises
|
||||
|
||||
|
||||
@@ -9,9 +9,9 @@ In this workshop we will address the underlying texts and infrastructural contex
|
||||
In preparation for the workshop we ask you to read the following texts and get acquainted with the programming environment we will be using during the session. The listed manual and tutorials are here for you to get a grasp of the programming environment and the practice of programming more generally. The manual by Winnie Soon and Geoff Cox has some interesting critical reflections at the beginning of each chapter that are worth reading in preperation for our session.
|
||||
|
||||
Texts:
|
||||
* Cramer, Florian. “Concepts, Notations, Software Art.” In *Signwave, Auto-Illustrator Users Guide*, 101–12. Liquid Press/Spacex, 2002. [Link](https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/texts/Cramer_2002_Concepts_Notations_Software_Art.pdf)
|
||||
* Cox, Geoff, Alex McLean, and Adrian Ward. “Coding Praxis: Reconsidering the Aesthetics of Code.” In *Read_me: Software Art & Cultures*, edited by Olga Goriunova and Alexei Shulgin, 161–74. Aarhus: Aarhus University Press, 2004. [Link](https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/texts/Cox-McLean-Ward_2004_Coding_Praxis.pdf)
|
||||
* Galloway, Alexander R. “Jodi’s Infrastructure.” *E-Flux*, no. 74 (June 2016). [Link](https://git.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/texts/Galloway_2016_Jodi_Infrastructure.pdf)
|
||||
* Cramer, Florian. “Concepts, Notations, Software Art.” In *Signwave, Auto-Illustrator Users Guide*, 101–12. Liquid Press/Spacex, 2002. [Link](https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/texts/Cramer_2002_Concepts_Notations_Software_Art.pdf)
|
||||
* Cox, Geoff, Alex McLean, and Adrian Ward. “Coding Praxis: Reconsidering the Aesthetics of Code.” In *Read_me: Software Art & Cultures*, edited by Olga Goriunova and Alexei Shulgin, 161–74. Aarhus: Aarhus University Press, 2004. [Link](https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/texts/Cox-McLean-Ward_2004_Coding_Praxis.pdf)
|
||||
* Galloway, Alexander R. “Jodi’s Infrastructure.” *E-Flux*, no. 74 (June 2016). [Link](https://grrrit.le-club-des-sans-sujets.org/gauthiier/Revisiting-Concepts-Notations-Software-Art/media/branch/main/texts/Galloway_2016_Jodi_Infrastructure.pdf)
|
||||
|
||||
Programming environment:
|
||||
* P5.js: https://p5js.org/
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
// Sketch 1.1: Mouse Events!
|
||||
|
||||
function setup() {
|
||||
createCanvas(800, 800);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
// background("yellow");
|
||||
if(mouseIsPressed) {
|
||||
print("Pressed: " + mouseX + " - " + mouseY) ; // see the console below ↓
|
||||
background("yellow"); // 2
|
||||
}
|
||||
}
|
||||
|
||||
function mouseMoved() {
|
||||
print("Moved: " + mouseX + " - " + mouseY) ; // see the console below ↓
|
||||
circle(mouseX, mouseY, 10);
|
||||
}
|
||||
|
||||
// Reference: https://p5js.org/reference/
|
||||
@@ -0,0 +1,28 @@
|
||||
// Sketch 1.2: Variables!
|
||||
|
||||
var previous_mouseX_pressed = 0; // global "var" variable
|
||||
var previous_mouseY_pressed = 0; // global "var" variable
|
||||
|
||||
function setup() {
|
||||
createCanvas(400, 400);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
// background(220);
|
||||
if(mouseIsPressed) {
|
||||
let current_mouseX_pressed = mouseX; // local "let" variable valid within "{" brackets "}"
|
||||
let current_mouseY_pressed = mouseY; // local "let" variable valid within "{" brackets "}"
|
||||
|
||||
print("Pressed: " + current_mouseX_pressed + " - " + current_mouseY_pressed) ;
|
||||
|
||||
previous_mouseX_pressed = current_mouseX_pressed;
|
||||
previous_mouseY_pressed = current_mouseY_pressed;
|
||||
}
|
||||
}
|
||||
|
||||
// this is a special p5 function
|
||||
function mouseMoved() {
|
||||
print("Moved: " + mouseX + " - " + mouseY) ; // see the console below ↓
|
||||
}
|
||||
|
||||
// Reference: https://p5js.org/reference/
|
||||
@@ -0,0 +1,47 @@
|
||||
// Sketch 1.3: Distance and Text!
|
||||
|
||||
var previous_mouseX_pressed = 0;
|
||||
var previous_mouseY_pressed = 0;
|
||||
var distance_previous_current = 0;
|
||||
|
||||
function setup() {
|
||||
createCanvas(800, 800);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background("yellow");
|
||||
|
||||
distance_previous_current = dist(previous_mouseX_pressed, previous_mouseY_pressed, mouseX, mouseY);
|
||||
|
||||
circle(previous_mouseX_pressed, previous_mouseY_pressed, 5);
|
||||
line(previous_mouseX_pressed, previous_mouseY_pressed, mouseX, mouseY);
|
||||
circle(mouseX, mouseY, 5);
|
||||
|
||||
// text(distance_previous_current, mouseX, mouseY);
|
||||
|
||||
if(distance_previous_current < 200) {
|
||||
text("🍕", mouseX, mouseY);
|
||||
text("PIZZA", previous_mouseX_pressed, previous_mouseY_pressed);
|
||||
} else if (distance_previous_current < 350) {
|
||||
text("🍍", mouseX, mouseY);
|
||||
text("ANANAS", previous_mouseX_pressed, previous_mouseY_pressed);
|
||||
} else {
|
||||
text("😵💫", mouseX, mouseY);
|
||||
text("WOOOOO", previous_mouseX_pressed, previous_mouseY_pressed);
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(mouseIsPressed) {
|
||||
let current_mouseX_pressed = mouseX;
|
||||
let current_mouseY_pressed = mouseY;
|
||||
|
||||
print("Pressed: " + current_mouseX_pressed + " - " + current_mouseY_pressed) ;
|
||||
|
||||
previous_mouseX_pressed = current_mouseX_pressed;
|
||||
previous_mouseY_pressed = current_mouseY_pressed;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Reference: https://p5js.org/reference/
|
||||
@@ -0,0 +1,21 @@
|
||||
// Sketch 2.0: Array + Index!
|
||||
|
||||
var NAMES = ["David", "Karin", "Sigrid", "Nanna", "Laura", "Maaike"];
|
||||
var INDEX = 0;
|
||||
|
||||
function setup() {
|
||||
createCanvas(400, 400);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background(220);
|
||||
}
|
||||
|
||||
function keyTyped() {
|
||||
if(key == 'x') {
|
||||
print("Hi " + NAMES[INDEX] + "!");
|
||||
INDEX++;
|
||||
}
|
||||
}
|
||||
|
||||
// Reference: https://p5js.org/reference/
|
||||
@@ -0,0 +1,25 @@
|
||||
// Sketch 2.1: Array + Index + Loop!
|
||||
|
||||
var NAMES = ["David", "Karin", "Sigrid", "Nanna", "Laura", "Maaike"];
|
||||
var ACTIVITIES = ["piano", "tennis", "chess", "records"];
|
||||
var INDEX = 0;
|
||||
|
||||
function setup() {
|
||||
createCanvas(400, 400);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background(220);
|
||||
}
|
||||
|
||||
function keyTyped() {
|
||||
if(key == 'x') {
|
||||
for(let j = 0; j < NAMES.length; j++) {
|
||||
for(let i = 0; i < ACTIVITIES.length; i++) {
|
||||
print(NAMES[j] + " likes to play " + ACTIVITIES[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reference: https://p5js.org/reference/
|
||||
@@ -0,0 +1,28 @@
|
||||
// Sketch 2.2: Array + Index + Randomness!
|
||||
|
||||
var NAMES = ["David", "Karin", "Sigrid", "Nanna", "Laura", "Maaike"];
|
||||
var ACTIVITIES = ["piano", "tennis", "chess", "records"];
|
||||
var ADJ = ["blue", "yellow", "black", "orange", "fabulous", "expensive", "ridiculous"];
|
||||
var CLOTHES = ["jacket", "sweater", "cap", "scarf"];
|
||||
|
||||
function setup() {
|
||||
createCanvas(400, 400);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background(220);
|
||||
}
|
||||
|
||||
// function selecting a random element from an array
|
||||
function choice(array_to_choose_from) {
|
||||
let random_index = floor(random(array_to_choose_from.length));
|
||||
return array_to_choose_from[random_index];
|
||||
}
|
||||
|
||||
function keyTyped() {
|
||||
if(key == 'x') {
|
||||
print(choice(NAMES) + " wears a " + choice(ADJ) + " " + choice(CLOTHES) + " when " + choice(NAMES) + " plays " + choice(ACTIVITIES));
|
||||
}
|
||||
}
|
||||
|
||||
// Reference: https://p5js.org/reference/
|
||||
@@ -0,0 +1,24 @@
|
||||
// Sketch 3.0: Drawing Text!
|
||||
|
||||
const sentence = "YOU ARE MY AMOROUS ENCHANTMENT.: MY KEEN EAGERNESS. YOU ARE MY DEVOTED ENCHANTMENT. MY YEARNING FERVENTLY LIKES YOUR AMOROUS PASSION. MY EAGERNESS TENDERLY YEARNS FOR YOUR PASSION."
|
||||
|
||||
function setup() {
|
||||
createCanvas(800, 800);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
// backgroud colour (click on swatch)
|
||||
background("rgb(101,240,101)");
|
||||
// font
|
||||
textFont('Courier');
|
||||
// font stroke colour
|
||||
stroke(0, 0, 255);
|
||||
// font fill colour
|
||||
fill(255, 140, 0);
|
||||
// text size
|
||||
textSize(30);
|
||||
// aligment
|
||||
textAlign(CENTER, TOP);
|
||||
// creates a 800 by 800 text box
|
||||
text(sentence, 0, 10 , 800, 800);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
// Sketch 3.1: Colour animation!
|
||||
|
||||
const sentence = "I DON'T LIKE PIZZA\n(I just don't)";
|
||||
|
||||
function setup() {
|
||||
createCanvas(800, 800);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
|
||||
background("yellow");
|
||||
textSize(45);
|
||||
textAlign(CENTER, TOP);
|
||||
noStroke();
|
||||
|
||||
let osc = 128 + sin(frameCount * 0.1) * 127;
|
||||
// print(variation);
|
||||
|
||||
let R = osc;
|
||||
let G = 255 - osc;
|
||||
let B = osc;
|
||||
|
||||
fill(R, G, B);
|
||||
text(sentence, 800/2, 800/2);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
// Sketch 3.2: Capture mouse pressed and record locations!
|
||||
|
||||
var circles = [];
|
||||
|
||||
function setup() {
|
||||
createCanvas(800, 800);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background("yellow");
|
||||
|
||||
if(mouseIsPressed) {
|
||||
let v = createVector(mouseX, mouseY);
|
||||
circles.push(v);
|
||||
}
|
||||
|
||||
for(let i = 0; i < circles.length; i++) {
|
||||
let c = circles[i];
|
||||
let x = c.x + cos(frameCount * 0.1) * random(3);
|
||||
let y = c.y + sin(frameCount * 0.1) * random(3);
|
||||
circle(x, y, 10);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
// Sketch 3.3: Image!
|
||||
|
||||
var alan_image;
|
||||
var img_x, img_y;
|
||||
|
||||
function preload() {
|
||||
alan_image = loadImage("alan-turing.png")
|
||||
}
|
||||
|
||||
function setup() {
|
||||
createCanvas(800, 800);
|
||||
img_x = 400 - alan_image.width/2;
|
||||
img_y = 400 - alan_image.height/2;
|
||||
colorMode(RGB, 255, 255, 255, 255);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background("yellow");
|
||||
image(alan_image, img_x, img_y);
|
||||
let R = 255;
|
||||
let G = 100;
|
||||
let B = mouseY / 800.0 * 255;
|
||||
let A = mouseX / 800.0 * 255;
|
||||
tint(R, G, B, A);
|
||||
}
|
||||
|
||||
function keyTyped() {
|
||||
if(key == 's') {
|
||||
saveCanvas("yeah", "png");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
// Strachey's Love Letter generator!
|
||||
|
||||
// vocabulary
|
||||
const first = ['DARLING', 'DEAR', 'HONEY', 'JEWEL'];
|
||||
const second = ['DUCK', 'LOVE', 'MOPPET', 'SWEETHEART'];
|
||||
const adjectives = ['ADORABLE', 'AFFECTIONATE', 'AMOROUS', 'ANXIOUS', 'ARDENT', 'AVID', 'BREATHLESS', 'BURNING', 'COVETOUS', 'CRAVING', 'CURIOUS', 'DARLING', 'DEAR', 'DEVOTED', 'EAGER', 'EROTIC', 'FERVENT', 'FOND', 'IMPATIENT', 'KEEN', 'LITTLE', 'LOVEABLE', 'LOVESICK', 'LOVING', 'PASSIONATE', 'PRECIOUS', 'SWEET', 'SYMPATHETIC', 'TENDER', 'UNSATISFIED', 'WISTFUL'];
|
||||
const nouns = ['ADORATION', 'AFFECTION', 'AMBITION', 'APPETITE', 'ARDOUR', 'CHARM', 'DESIRE', 'DEVOTION', 'EAGERNESS', 'ENCHANTMENT', 'ENTHUSIASM', 'FANCY', 'FELLOW FEELING', 'FERVOUR', 'FONDNESS', 'HEART', 'HUNGER', 'INFATUATION', 'LIKING', 'LONGING', 'LOVE', 'LUST', 'PASSION', 'RAPTURE', 'SYMPATHY', 'TENDERNESS', 'THIRST', 'WISH', 'YEARNING'];
|
||||
const adverbs = ['AFFECTIONATELY', 'ANXIOUSLY', 'ARDENTLY', 'AVIDLY', 'BEAUTIFULLY', 'BREATHLESSLY', 'BURNINGLY', 'COVETOUSLY', 'CURIOUSLY', 'DEVOTEDLY', 'EAGERLY', 'FERVENTLY', 'FONDLY', 'IMPATIENTLY', 'KEENLY', 'LOVINGLY', 'PASSIONATELY', 'SEDUCTIVELY', 'TENDERLY', 'WINNINGLY', 'WISTFULLY'];
|
||||
const verbs = ['KICKS', 'ADORES', 'ATTRACTS', 'CARES FOR', 'CHERISHES', 'CLINGS TO', 'DESIRES','HOLDS DEAR', 'HOPES FOR', 'HUNGERS FOR', 'IS WEDDED TO', 'LIKES', 'LONGS FOR', 'LOVES', 'LUSTS AFTER', 'PANTS FOR', 'PINES FOR', 'PRIZES', 'SIGHS FOR', 'TEMPTS', 'THIRSTS FOR', 'TREASURES', 'WANTS', 'WISHES', 'WOOS', 'YEARNS FOR'];
|
||||
|
||||
|
||||
function setup() {
|
||||
createCanvas(400, 400);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background(220);
|
||||
}
|
||||
|
||||
// function selecting a random element from an array
|
||||
function choice(array_to_choose_from) {
|
||||
let random_index = floor(random(array_to_choose_from.length));
|
||||
return array_to_choose_from[random_index];
|
||||
}
|
||||
|
||||
// function that randomly decides if an element from an array should be selected or not
|
||||
function maybe(array_to_choose_from) {
|
||||
// choose between true or false
|
||||
if(choice([true, false])) {
|
||||
// if true then return an element from the array
|
||||
return choice(array_to_choose_from);
|
||||
} else {
|
||||
// otherwise return and empty sentence (i.e. nothing)
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
// function that randomly generates a long form sentence
|
||||
function long() {
|
||||
return "MY " + maybe(adjectives) + " " + choice(nouns) + " " + maybe(adverbs) + " " + choice(verbs) + " YOUR " + maybe(adjectives) + " " + choice(nouns) + ".";
|
||||
}
|
||||
|
||||
// function that randomly generates a short form sentence
|
||||
function short() {
|
||||
return choice(adjectives) + ' ' + choice(nouns) + '. ';
|
||||
}
|
||||
|
||||
// function that randomly an opening
|
||||
function opening() {
|
||||
return choice(first) + ' ' + choice(second);
|
||||
}
|
||||
|
||||
// function that randomly a closing
|
||||
function closing() {
|
||||
return "YOURS " + choice(adverbs);
|
||||
}
|
||||
|
||||
function write_letter(){
|
||||
var text = "";
|
||||
|
||||
// write opening
|
||||
text += opening();
|
||||
text += "\n"; // this is a new line!
|
||||
|
||||
let YOU_ARE = false;
|
||||
// write 5 sentences
|
||||
for(let i = 0; i < 5; i++) {
|
||||
|
||||
// choose if the next sentence is a short or long
|
||||
let sentence_form = choice(['short', 'long']);
|
||||
|
||||
if(sentence_form == 'short') {
|
||||
// there's two types of short to switch from
|
||||
if(YOU_ARE) {
|
||||
// the ": MY" can only follow a "YOU ARE MY"
|
||||
text += ": MY " + short();
|
||||
YOU_ARE = false;
|
||||
} else {
|
||||
text += "YOUR ARE MY " + short();
|
||||
// the ": MY" can only follow a "YOU ARE MY"
|
||||
YOU_ARE = true;
|
||||
}
|
||||
} else if(sentence_form == 'long') {
|
||||
text += long();
|
||||
// make sure the next sentence is not ": MY"
|
||||
YOU_ARE = false;
|
||||
}
|
||||
}
|
||||
|
||||
text += "\n"; // this is a new line!
|
||||
|
||||
// write closing
|
||||
text += " " + closing();
|
||||
|
||||
text += "\n"; // this is a new line!
|
||||
|
||||
// sign
|
||||
text += "MUC";
|
||||
|
||||
// return the letter
|
||||
return text;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function keyTyped() {
|
||||
if(key == 'x') {
|
||||
let letter = write_letter();
|
||||
print(letter);
|
||||
}
|
||||
}
|
||||
|
||||
// Reference: https://p5js.org/reference/
|
||||
Reference in New Issue
Block a user