From last week...
Not on a computer:Create a set of instructions that will produce a square:
1. Find a sinner, and crucify him.
2. Find a second sinner (or a heretic, or if else, just find a scapegoat).
3. Erect his crucifix at a 90º angle from the first sinner, at a distance equal to the height of the first sinner’s crucifix.
4. Crucify the second sinner.
5. Wait a week for the sinners to be dead.
6. Wait an extra weekend, fully guarded, just in case.
7. Dispose of the bodies
8. Cut half way through the base of both crosses at a height of 15cm from the ground.
9. Kick the base of the crosses, just above the cut.
10. Shout ‘timber’.
11. Kick the second crucifix over in the same way.
12. You now have a square, formed by the cross-bars on the crucifixes.
Using Processing:Use Processing to create a sketch that produces a square in the most inventive/complex way that you can. Your square should be centred in a square canvas.
I used a series of dots to make up a square, instead of simply using lines or the rect function. Originally I wanted to hand-type each individual line, setting it up with 'ellipse(x + 2 * dotSpacing, y, 3, 3);' repeated but adding one to the 'x+' number, and then the same for the y axis, but this would've taken approximately 47 years to complete, so I used loops instead. I suppose I also could've used bigger dots, or made a smaller square, but I think it would be then been less square-y.
Homage to the Square (again) --
Loops
(this is, in fact, not an overcomplicated square.)
NOTE TO SELF:
For (init; test; update) {
Statements
}
testing to see if the test is still true.
for (int i = 20; i < 400; i +=20)
means i starts at 20, stops when it reaches 400, and adds 20 every time.
this code (above) inst actually kinking the lines -- its two lines that are touching.
e.g.
\\\\\\\\\
/////////
NOT
>>>>>>>>>
Interactivity
Lev Manovich
“Psychological interaction”
Concepts:
Hypothesis formation
Recall
Identification
Chris Crawford
Crawford’s definition of interactivity:
“A cyclic process between two or more active agents in which each agent alternately listens, thinks, and speaks.”
“It’s an arithmetic quantity like weight (you can have more or less of it).”
Alan Peacock
Qualities (“Domains”) of ‘The Interactive’
Engagement — inadvertance/deliberate
Consistency — predictable/unpredictable
Cursality — complete/incomplete
[Peacock, A. (2001) ‘Towards an Aesthetic of the Interactive’, in Digital Creativity, 12:4, 237-246]
The Interface
“An interface is a shared boundary across which two or more components of a computer system exchange information.” — Wikipedia
Graphical User Interface
The screen interface is most commonly presented as a window.
The first window GUI was designed by Apple Computers in 1984.
The Jacquard Loom
Transparency, Skeuomorphism and Reflectivity.
There is a ‘transparency’ offered by the window metaphor.
Biggest example of skeumorphosis (done well) — 1980s - 2010 Apple software. (Still lingering with modern MacOS in particular, but far less than there used to be.)
‘Wooden Mirrow’, Daniel Rozin, 1999. https://www.smoothware.com/danny/
Rosa Menkman, Glitch. http://rosa-menkman.blogspot.com
Drawing
I tried many different methods for this, illustrated below. The best was with easing, which I show on the right here.
//DRAW!!
void setup() {
size(480, 120);
fill(0, 102);
noStroke();
}
void draw() {
ellipse(mouseX, mouseY, 9, 9);
}
//THIS ONE!:
void setup() {
size(480, 120);
strokeWeight(4);
stroke(0, 102);
}
void draw() {
line(pmouseX, pmouseY, mouseX, mouseY);
}
//with easing
float x;
float y;
float px;
float py;
float easing = 0.05;
void setup() {
size(480, 120);
stroke(0, 102);
}
void draw() {
float targetX = mouseX;
x += (targetX - x) * easing;
float targetY = mouseY;
y += (targetY - y) * easing;
float weight = dist(x, y, px, py);
strokeWeight(weight);
line(x, y, px, py);
py = y;
px = x;
}
// drawing with easing ON MOUSE CLICK
float x;
float y;
float px;
float py;
float easing = 0.05;
void setup() {
size(500, 500);
stroke(0, 102);
}
void draw() {
float targetX = mouseX;
x += (targetX - x) * easing;
float targetY = mouseY;
y += (targetY - y) * easing;
float weight = dist(x, y, px, py);
strokeWeight(weight);
if (mousePressed == true) {
line(x, y, px, py);
py = y;
px = x;
}
}
Mousefinder
The last piece o code we looked at today was the mouse finder: put your mouse inside the area, and the arrow will point to it. Annoyingly, the mouse doesn't show uo in screenshots. Can you guess where it was?
= is to assign value. == is to test a value.