Commit 9c5d21f9 authored by gijs's avatar gijs
Browse files

Set up of pelican

parent ac792834
Title: 0. *Aesthetic Programming: A Handbook of Software Studies*
page_order: 0
*Aesthetic Programming: A Handbook of Software Studies*
**Preface**
......
Title: 1. Getting Started
page_order: 1
## 1. Getting Started
## 1.1 Begin()
......@@ -13,7 +16,8 @@ In 2016, Nick Montfort, who is a poet and professor of digital media at MIT, pub
As the first chapter of this book, we think that it is important to reflecting on why do we need to learn programming, which is also a way to set the scene and sustain our motivation to learn persistently. Knowing the fact that not all new learners would like to be a creative coder or professional programmer, we would then also address on code as means to work computationally, to think conceptually on wider cultural issues as well as to raise questions critically. As such, engaging with programming provides a way to creating changes in techno-cultural systems (which we have also discussed in the Preface). By understanding from many others especially our students who begin with our course without any programming experience, learning to code is a deep learning process with enjoyment and achivement but also comes with frustration in most of the times, specially there are new perspectives, syntaxes and structure to explore and experiment at the first place. It may not come naturally but takes time to familiar with computational thinking through structured logics and precise procedures.
### 1.1.1 Start()
<img src="ch1_1.png" width="450">
<!-- <img src="ch1_1.png" width="450"> -->
![]({attach}ch1_1.png)
*Figure 1.1: p5.js web interface*
......@@ -47,7 +51,8 @@ Additionally Gitlab will be the main platform for code and text respository, at
ATOM will be used as a key code editor in this book. Apart from its free and open source nature, ATOM supports cross-platform editing which can be run on Mac OS, Windows and Linux.
1. Download the software ATOM from the homepage: https://atom.io/
2. Drag the 'p5' folder that you have just unzipped onto ATOM. You should able to see the left-hand pane with your project. Then you try to navigate to the 'index.html' file under the 'empty-example' folder, double click that file and the source code should display on the right-hand pane. See below:
<br><img src="ch1_4.png" width="450"><br>
<br><!-- <img src="ch1_4.png" width="450"> -->
![]({attach}ch1_4.png)<br>
*Figure 1.4: The file structure of ATOM*
The 'index.html' is the default page, among other pages and files, that a web browser will first pick up and display. You can customize a page title and other styling, but the focus for this chapter will be navigating the libaries and run our first program. Since p5.js is a library, here on line 8-11 which indicates how to incorporate javascript files and libraries by using the tags `<script>` and `</script>. `
......@@ -56,7 +61,8 @@ Right now the script is using relative paths, which is a useful concept when we
Next you will need to install a package called 'atom-live-server'<sup>[19](#myfootnote19)</sup>, and this is useful for setting up a web server and you can update your code and see the result immediately on a browser without the need to refresh it. You can first check under 'Packages' on your menu bar and see if the package is there. If not, then go to Edit > Preferences > +Install, then type 'atom-live-server'. Hit the blue install button and you should able to find it again under the Packages menu.
<img src="ch1_5.png" width="500"> <br>
<!-- <img src="ch1_5.png" width="500"> -->
![]({attach}ch1_5.png) <br>
*Figure 1.5: Installing atom-live-server*
If you want to customize the theme like the background color of the panes, simply go to Preferences > Themes.
......@@ -82,7 +88,8 @@ function draw() {
```
* To run the code, you just need to go to Packages > atom-live-server (or you can use the shortcut Crtl + Alt + L). Then there will be a popup window, click on the 'empty-example' folder and it should display something like below:
<br><img src="ch1_6.png" width="500"> <br>
<br><!-- <img src="ch1_6.png" width="500"> -->
![]({attach}ch1_6.png) <br>
*Figure 1.6: My first program*
## 1.2.3.1 Exercise in class
......@@ -94,7 +101,8 @@ function draw() {
6. Change the title in the HTML file (line 6)
7. Can you run the program so that you can see almost the same screen as Figure 6 on a web browser?
<br><img src="ch1_7.png" width="500"> <br>
<br><!-- <img src="ch1_7.png" width="500"> -->
![]({attach}ch1_7.png) <br>
*Figure 1.7: My first program 1.1*
This exerise is to get you to familar with the path and local directory so as to know that running a sketch on a web browser requires to loading the right path of the JavaScript libraries. As the book progress, you are also free to create your own folder name and rename the file like sketch.js as you wish.
......@@ -106,12 +114,14 @@ As you might aware, this book is not following the convention of most programmin
In the sample code above, line 4 with the print() function that writes the text 'hello world'. To see the text, you need to open the web console area which is differently located according to browsers and you can try to search through navigating the menu bar. In Firefox browser, it is located under Tools > Web Developer > Web Console (Ctrl+Shift+K).
<br><img src="ch1_8.png" width="400"> <br>
<br><!-- <img src="ch1_8.png" width="400"> -->
![]({attach}ch1_8.png) <br>
*Figure 1.8: The console area*
At the bottom of the Figure 8, the web console area shows the text 'hello world'. What you know from this is that the sketch is running properly and it is able to read the print's function line. When you progress with this book, you will find that the web console area is very important, because you can also see error messages when, for example, the syntax is wrong and the browser will give you some good hints to bug fix your own code. Figure 1.9 shows that the web console area is able to specify which file (sketch.js) and which line of code (line 8) with problems (the syntax background was spelled wrong intentionally - see Figure 2.9).
<br><img src="ch1_9.png" width="500"> <br>
<br><!-- <img src="ch1_9.png" width="500"> -->
![]({attach}ch1_9.png) <br>
*Figure 1.9: Example of syntax error*
Indeed, Hello World program has a long history in computing, especially introducing to novice programmers with a programming language and making sure things are running. Wendy Hui Kyong Chun and Andrew Lison argue the first Hello World program we learn is enjoyable and seductive <sup>[21](#myfootnote21)</sup>. On the one hand we rougly understand the line `print("hello world")` literally as it is considered as human language: to 'print' the text 'hello world', which is understandable and straight forward; On the other hand, the computer is executing what exactly you want it to perform as printing a text through an 'instruction', giving you the immediate result which is rewarding. Such feedback "produce a feeling of power" that you start mastering technologies, transitioning from "immature students into programmers".
......@@ -127,7 +137,8 @@ There are some kinds of structure here which is hard to remember as a new langua
For p5.js, functions are documented in the page called [References](https://p5js.org/reference/)<sup>[24](#myfootnote24)</sup> and they are structured in a similar fashion. Once you get used to their presentation, it will be easier and quicker to learn and write that syntax.
<img src="ch1_10.png" height="500"> <br>
<!-- <img src="ch1_10.png" height="500"> -->
![]({attach}ch1_10.png) <br>
*Figure 1.10: The reference guide example - ellipse()*
Let's read together for the reference in Figure 2.9 - [`ellipse()`](https://p5js.org/reference/#/p5/ellipse)<sup>[25](#myfootnote25)</sup>. It usually starts with an example and an illustration, and you can click the 'edit' button to modify the code, especially changing the parameters on the fly and display the result immediately on a screen.
......@@ -136,7 +147,8 @@ The description part of the reference page explains how the function syntax work
The syntax area demonstrates how it should be written precisely and the parameters' section explain further. For example: `ellipse(x, y, w, [h])`, it explains the first parameter x and the second parameter y are used to set the location of the ellipse in terms of x and y coordinates. The canvas is set in terms of pixel unit, and the [0,0] coordinate starts on the top left corner. The parameter w and h refers to the width and height of the ellipse and you can also think of it as the diameter, or setting the size, of the ellipse. The square bracket `[h]` is an optional parameter if the width and height of the ellipse is the same.
<img src="ch1_11.png" width="500"> <br>
<!-- <img src="ch1_11.png" width="500"> -->
![]({attach}ch1_11.png) <br>
*Figure 1.11: Visualizing the ellipse*
What we want to demonstrate here is that the references are important to start with, and explore it to discover other syntaxes and features, for example other shapes like rectangles and polygons.
......@@ -236,4 +248,4 @@ There are still other syntaxes in the sample code with which we haven't explaine
<a name="myfootnote24">24</a>: See https://p5js.org/reference/
<a name="myfootnote25">25</a>: See https://p5js.org/reference/#/p5/ellipse
\ No newline at end of file
<a name="myfootnote25">25</a>: See https://p5js.org/reference/#/p5/ellipse
Title: 10. Machine Learning
page_order: 10
stuff here
\ No newline at end of file
Title: 2. Variable Geometry
page_order: 2
## 2. Variable Geometry
## 2.1 function setup()
......@@ -18,7 +21,8 @@ The independent desigher David Reinfurt created the work *[Multi](http://www.o-r
Instead of using preset typographic characters, this section will explore what constitute those punctunation glyphs like a comma. How can you draw a comma with the foundational elements of geometry?
## 2.1.2 Source Code
<img src="ch2_2.png" width="250"><br>
<!-- <img src="ch2_2.png" width="250"> -->
![](ch2_2.png)<br>
*Figure 2.2: The screenshot of the remix of Multi*
[the image and source code will change a bit to match exactly the spatial composition of Multi - will get back in *future* /w]
......@@ -91,7 +95,8 @@ function draw() {
background(random(130,140));
}
```
<img src="ch2_3.png" width="400"><br>
<!-- <img src="ch2_3.png" width="400"> -->
![](ch2_3.png)<br>
*Figure 2.3: Simple exercise*
Remember the structure of a web page includes both the html, working javascript file (for example sketch.js) and p5.js associated libraries.
......@@ -145,7 +150,8 @@ For this example, two variables: 'moving_size' is more stable than 'static_size'
There are two more variables in the example: `mouseX` and `mouseY`. These are changing variables and are subjected to the mouse movement to trace the coresponding x and y coordinates. If you want to know the mouseX and mouseY exact coordinate position, you may also use `print()` or `console.log` to display the two values onto the console area.
<br><img src="https://media.istockphoto.com/vectors/school-or-changing-room-lockers-vector-id640307424" width="300"> <br>
<br><!-- <img src="https://media.istockphoto.com/vectors/school-or-changing-room-lockers-vector-id640307424" width="300"> -->
![](https://media.istockphoto.com/vectors/school-or-changing-room-lockers-vector-id640307424) <br>
*Figure 2.4: Illustration of variables*
[need lockers illustration or sth like this: https://www.mathwarehouse.com/programming/images/pbv-vs-pbr/picture-pass-by-value-vs-reference-how-memory-works-with-locations.png /w] <br>
......
Title: 3. Infinite Loops
page_order: 3
## 3. Infinite Loops
### 3.1 function setup()
......@@ -13,7 +16,8 @@ For this rather long chapter, we are using the cultural icon - Throbber as a way
### 3.2 Decode
We are moving from static objects (like shapes) to a mix of static and moving objects here.
<br><img src="ch3_2.png" width="380"><br>
<br><!-- <img src="ch3_2.png" width="380"> -->
![](ch3_2.png)<br>
*Figure 3.2: The runme of sample code - sketch 3_1* [need to change the path /w]
By examining the RUNME (ref) of a simple throbber, can you describe the different elements of the work and imagine how they operate computationally in human language.
......@@ -390,7 +394,8 @@ See below example taken from the source code of Asterisk Painting (line 37-42):
```
See the structure of a for-loop:<br>
<img src="ch3_4.png" width="400"> <br>
<!-- <img src="ch3_4.png" width="400"> -->
![](ch3_4.png) <br>
*Figure 3.4 A for-loop*
From the Figure 3.4, you can see a for-loop contains:
......@@ -401,7 +406,8 @@ From the Figure 3.4, you can see a for-loop contains:
For this specific case, this block of code from the above describes the position of each asterisk in terms of its' x and y coordinates (the center point [x,y] of each asterisk). Since there are 5 columns (xPos) and 4 rows (yPos) which have been defined in the global variables, the program needs to know the coordinates precisely. The overall formular to locate the position, for example xPos, is to get the width of the canvas divides by the number of asterisks horizontally and add 1. As such, the code should be understood as: For each count with the starting point as 0, calculate the `xPos[i]`. Additionally, each iteration will increase the count by one until it reaches the maximum number of asterisks in a row (`i<xPos.length`).
<img src="ch3_5.png" width="750"> <br>
<!-- <img src="ch3_5.png" width="750"> -->
![](ch3_5.png) <br>
*Figure 3.5 The xPos of each* </br>
#### 3.11.1 While Loop
......
Title: 4. Data Capture
page_order: 4
stuff here
\ No newline at end of file
Title: 5. Object Orientation
page_order: 5
stuff here
some ref: https://www.hastac.org/blogs/ari-schlesinger/2013/11/26/feminism-and-programming-languages
......
Title: Automatisms
page_order: 6
stuff here
\ No newline at end of file
Title: 7. Vocable Code
page_order: 7
## 7. Vocable Code
## 7.1 Begin()
......@@ -83,7 +86,8 @@ this.shows = function() {
"Gilbert_TypeWithPride.otf" is a free font, is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, and can be downloaded from the Internet (www.typewithpride.com) <sup>[6](#myfootnote6)</sup>. It is designed to honor the memory of Gilbert Baker who died in 2017, the creator of the iconic Rainbow Flag.
<img src="https://static1.squarespace.com/static/58ed2d6244024330c0a58707/58ed2dbbf7e0abfc5d7ebb1c/58f77ed329687f53ff3123c7/1493282053409/TypeWithPride-07.jpg?format=2500w" width="450">
<!-- <img src="https://static1.squarespace.com/static/58ed2d6244024330c0a58707/58ed2dbbf7e0abfc5d7ebb1c/58f77ed329687f53ff3123c7/1493282053409/TypeWithPride-07.jpg?format=2500w" width="450"> -->
![](https://static1.squarespace.com/static/58ed2d6244024330c0a58707/58ed2dbbf7e0abfc5d7ebb1c/58f77ed329687f53ff3123c7/1493282053409/TypeWithPride-07.jpg?format=2500w)
<br>*Figure 2: The font type with pride, designed by Gilbert Baker*
`textFont()` means to get ready to print out or write the text with the chosen font, and in this case with the `withPride` that is previously defined.
......@@ -222,7 +226,8 @@ function makeVisible() {
```
*Figure 5: Snippets of Vocable Code on Reading JSON I*
<img src="ch7_4.png" width="450">
<!-- <img src="ch7_4.png" width="450"> -->
![](ch7_4.png)
*Figure 6: Snippets of Vocable Code on Reading JSON II* [need to redraw in a better form]
......
Title: 8. Que(e)ries
page_order: 8
- politics of API
- appropriation and copyright
- queer queries (the code and image keyword could be 'queer')
......
Title: 9. Procedural Logics
page_order: 9
## Other projects
- The Project Formerly Known as Kindle Forkbomb Printing Press: http://www.arnolfini.org.uk:7081/project.arnolfini/the-project-formerly-known-as-kindle-forkbomb
......
Title: Introduction
page_order: -1
## About the book project
### Aesthetic Programming: A Handbook of Software Studies
......
Title: TOC
page_order: -2
**Title:** Aesthetic Programming: A Handbook of Software Studies, or Software Studies for Dummies
**By**: Winnie Soon and Geoff Cox
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment