Added examples

Author: pepc84

assets/examples_js/Topics/advanced_data/ArrayList_of_objects/ArrayList_of_objects.js

@@ -0,0 +1,51 @@
+class Ball {
+  constructor(tempX, tempY, tempW) {
+    this.x = tempX;
+    this.y = tempY;
+    this.w = tempW;
+    this.speed = 0;
+    this.gravity = 0.1;
+    this.life = 255;
+  }
+  move() {
+    this.speed += this.gravity;
+    this.y += this.speed;
+    if (this.y > height) {
+      this.speed *= -0.8;
+      this.y = height;
+    }
+  }
+  finished() {
+    this.life--;
+    return this.life < 0;
+  }
+  display() {
+    fill(0, this.life);
+    ellipse(this.x, this.y, this.w, this.w);
+  }
+}
+
+let balls = [];
+let ballWidth = 48;
+
+function setup() {
+  createCanvas(640, 360);
+  noStroke();
+  balls.push(new Ball(width / 2, 0, ballWidth));
+}
+
+function draw() {
+  background(255);
+  for (let i = balls.length - 1; i >= 0; i--) {
+    let b = balls[i];
+    b.move();
+    b.display();
+    if (b.finished()) {
+      balls.splice(i, 1);
+    }
+  }
+}
+
+function mousePressed() {
+  balls.push(new Ball(mouseX, mouseY, ballWidth));
+}

assets/examples_js/Topics/advanced_data/IntList_Lottery_example/IntList_Lottery_example.js

@@ -0,0 +1,58 @@
+let lottery;
+let results;
+let ticket;
+
+function showList(list, x, y) {
+  for (let i = 0; i < list.size(); i++) {
+    let val = list.get(i);
+    stroke(255);
+    noFill();
+    ellipse(x + i * 32, y, 24, 24);
+    textAlign(CENTER);
+    fill(255);
+    text(val, x + i * 32, y + 6);
+  }
+}
+
+function setup() {
+  createCanvas(640, 360);
+  frameRate(30);
+  lottery = new IntList();
+  results = new IntList();
+  ticket = new IntList();
+  for (let i = 0; i < 20; i++) {
+    lottery.append(i);
+  }
+  for (let i = 0; i < 5; i++) {
+    let index = int(random(lottery.size()));
+    ticket.append(lottery.get(index));
+  }
+}
+
+function draw() {
+  background(51);
+  lottery.shuffle();
+  showList(lottery, 16, 48);
+  showList(results, 16, 100);
+  showList(ticket, 16, 140);
+  for (let i = 0; i < results.size(); i++) {
+    if (results.get(i) === ticket.get(i)) {
+      fill(0, 255, 0, 100);
+    } else {
+      fill(255, 0, 0, 100);
+    }
+    ellipse(16 + i * 32, 140, 24, 24);
+  }
+  if (frameCount % 30 === 0) {
+    if (results.size() < 5) {
+      let val = lottery.get(0);
+      lottery.remove(0);
+      results.append(val);
+    } else {
+      for (let i = 0; i < results.size(); i++) {
+        lottery.append(results.get(i));
+      }
+      results.clear();
+    }
+  }
+}

assets/examples_js/Topics/advanced_data/Loading_JSON_Data/Loading_JSON_Data.js

@@ -0,0 +1,96 @@
+/**
+ * Loading JSON Data
+ * Translated to C++ Mode from Processing Java by Daniel Shiffman.
+ */
+
+class Bubble {
+  constructor(x, y, diameter, name) {
+    this.x = x;
+    this.y = y;
+    this.diameter = diameter;
+    this.name = name;
+    this.over = false;
+  }
+
+  rollover(px, py) {
+    this.over = dist(px, py, this.x, this.y) < this.diameter / 2;
+  }
+
+  display() {
+    stroke(0);
+    strokeWeight(2);
+    noFill();
+    ellipse(this.x, this.y, this.diameter, this.diameter);
+    if (this.over) {
+      fill(0);
+      textAlign(CENTER);
+      text(this.name, this.x, this.y + this.diameter / 2 + 20);
+    }
+  }
+}
+
+let bubbles = [];
+let json;
+
+function loadData() {
+  json = loadJSONObject("data/data.json");
+
+  if (json === null || !json.hasKey("bubbles")) {
+    println("Failed to load data.json");
+    return;
+  }
+
+  let bubbleData = json.getJSONArray("bubbles");
+  bubbles = [];
+
+  for (let i = 0; i < bubbleData.size(); i++) {
+    let b = bubbleData.getJSONObject(i);
+    if (!b.hasKey("position")) continue;
+    let pos = b.getJSONObject("position");
+    let x = pos.getFloat("x");
+    let y = pos.getFloat("y");
+    let diameter = b.getFloat("diameter");
+    let label = b.getString("label");
+    bubbles.push(new Bubble(x, y, diameter, label));
+  }
+
+  println("Loaded " + bubbles.length + " bubbles");
+}
+
+function setup() {
+  size(640, 360);
+  loadData();
+}
+
+function draw() {
+  background(255);
+  for (let i = 0; i < bubbles.length; i++) {
+    let b = bubbles[i];
+    b.display();
+    b.rollover(mouseX, mouseY);
+  }
+  textAlign(LEFT);
+  fill(0);
+  text("Click to add bubbles.", 10, height - 10);
+}
+
+function mousePressed() {
+  let pos = new JSONObject();
+  pos.setFloat("x", mouseX);
+  pos.setFloat("y", mouseY);
+
+  let newBubble = new JSONObject();
+  newBubble.setJSONObject("position", pos);
+  newBubble.setFloat("diameter", random(40, 80));
+  newBubble.setString("label", "New label");
+
+  let bubbleData = json.getJSONArray("bubbles");
+  bubbleData.append(newBubble);
+
+  if (bubbleData.size() > 10) {
+    bubbleData.remove(0);
+  }
+
+  saveJSONObject(json, "data/data.json");
+  loadData();
+}

assets/examples_js/Topics/advanced_data/Loading_Tabular_Data/Loading_Tabular_Data.js

@@ -0,0 +1,97 @@
+/**
+ * Loading Tabular Data
+ * Translated to C++ Mode from Processing Java by Daniel Shiffman.
+ *
+ * Loads bubble data from a CSV file and allows adding
+ * new bubbles by clicking.
+ *
+ * CSV format (data/data.csv):
+ *   x,y,diameter,name
+ *   160,103,43.19838,Happy
+ *   372,137,52.42526,Sad
+ *   273,235,61.14072,Joyous
+ *   121,179,44.758068,Melancholy
+ */
+
+class Bubble {
+  constructor(x, y, diameter, name) {
+    this.x = x;
+    this.y = y;
+    this.diameter = diameter;
+    this.name = name;
+    this.over = false;
+  }
+
+  rollover(px, py) {
+    this.over = dist(px, py, this.x, this.y) < this.diameter / 2;
+  }
+
+  display() {
+    stroke(0);
+    strokeWeight(2);
+    noFill();
+    ellipse(this.x, this.y, this.diameter, this.diameter);
+    if (this.over) {
+      fill(0);
+      textAlign(CENTER);
+      text(this.name, this.x, this.y + this.diameter / 2 + 20);
+    }
+  }
+}
+
+let bubbles = [];
+let table;
+
+function loadData() {
+  table = loadTable("data/data.csv", "header");
+
+  if (table === null) {
+    println("Failed to load data.csv");
+    return;
+  }
+
+  bubbles = [];
+  for (let i = 0; i < table.getRowCount(); i++) {
+    let x = table.getNum(i, "x");
+    let y = table.getNum(i, "y");
+    let diameter = table.getNum(i, "diameter");
+    let name = table.getString(i, "name");
+    bubbles.push(new Bubble(x, y, diameter, name));
+  }
+
+  println("Loaded " + bubbles.length + " bubbles");
+}
+
+function setup() {
+  size(640, 360);
+  loadData();
+}
+
+function draw() {
+  background(255);
+  for (let i = 0; i < bubbles.length; i++) {
+    let b = bubbles[i];
+    b.display();
+    b.rollover(mouseX, mouseY);
+  }
+  textAlign(LEFT);
+  fill(0);
+  text("Click to add bubbles.", 10, height - 10);
+}
+
+function mousePressed() {
+  if (table === null) return;
+
+  let row = table.addRow();
+  row.setNum("x", mouseX);
+  row.setNum("y", mouseY);
+  row.setNum("diameter", random(40, 80));
+  row.setString("name", "Blah");
+
+  if (table.getRowCount() > 10) {
+    table.removeRow(0);
+  }
+
+  saveTable(table, "data/data.csv");
+  loadData();
+}

assets/examples_js/Topics/animation/Animated_Sprite/Animated_Sprite.js

@@ -0,0 +1,57 @@
+/**
+ * Animated Sprite (Shifty + Teddy)
+ * by James Paterson.
+ * Translated to JavaScript Mode.
+ *
+ * Press the mouse button to change animations.
+ */
+let animation1 = null;
+let animation2 = null;
+let xpos;
+let ypos;
+let drag = 30.0;
+
+function setup() {
+    createCanvas(640, 360);
+    background(255, 204, 0);
+    frameRate(24);
+    animation1 = new Animation("PT_Shifty_", 38);
+    animation2 = new Animation("PT_Teddy_", 60);
+    ypos = height * 0.25;
+}
+
+function draw() {
+    let dx = mouseX - xpos;
+    xpos = xpos + dx / drag;
+    if (mouseIsPressed) {
+        background(153, 153, 0);
+        animation1.display(xpos - animation1.getWidth() / 2, ypos);
+    } else {
+        background(255, 204, 0);
+        animation2.display(xpos - animation2.getWidth() / 2, ypos);
+    }
+}
+
+class Animation {
+    constructor(prefix, count) {
+        this.imageCount = count;
+        this.images = [];
+        this.frame = 0;
+        for (let i = 0; i < count; i++) {
+            let filename = prefix + nf(i, 4) + ".gif";
+            this.images.push(loadImage(filename));
+        }
+    }
+
+    display(x, y) {
+        this.frame = (this.frame + 1) % this.imageCount;
+        let img = this.images[this.frame];
+        if (img) image(img, x, y);
+    }
+
+    getWidth() {
+        let img = this.images[0];
+        if (img) return img.width;
+        return 0;
+    }
+}

assets/examples_js/Topics/animation/Sequential/Sequential.js

@@ -0,0 +1,33 @@
+/**
+ * Sequential
+ * by James Paterson.
+ * Translated to JavaScript Mode.
+ *
+ * Displaying a sequence of images creates the illusion of motion.
+ * Twelve images are loaded and each is displayed individually in a loop.
+ */
+let numFrames = 12;
+let currentFrame = 0;
+let images = [];
+
+function setup() {
+    createCanvas(640, 360);
+    frameRate(24);
+    images = [];
+    for (let i = 0; i < numFrames; i++) {
+        let name = "PT_anim" + nf(i, 4) + ".gif";
+        images.push(loadImage(name));
+    }
+}
+
+function draw() {
+    background(0);
+    currentFrame = (currentFrame + 1) % numFrames;
+    let offset = 0;
+    for (let x = -100; x < width; x += images[0].width) {
+        image(images[(currentFrame + offset) % numFrames], x, -20);
+        offset += 2;
+        image(images[(currentFrame + offset) % numFrames], x, height / 2);
+        offset += 2;
+    }
+}