exercises

collection/sketch-1.1.js

@@ -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/

collection/sketch-1.2.js

@@ -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/

collection/sketch-1.3.js

@@ -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/

collection/sketch-2.0.js

@@ -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/

collection/sketch-2.1.js

@@ -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/

collection/sketch-2.2.js

@@ -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/

collection/sketch-3.0.js

@@ -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);
+}

collection/sketch-3.1.js

@@ -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);
+}

collection/sketch-3.2.js

@@ -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);
+  }
+  
+}

collection/sketch-3.3.js

@@ -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");
+  }
+}

collection/sketch-LoveLetter.js

@@ -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/