iLab Workshop

Posted on by mrgrapht

Intro:

  • Trial workshop, kickstarts in Feb
  • P5 is short hand form for processing
  • Javascript frameworks
  • Vector Maths, Autonomous Agents, Craig Reynolds’ Boids, Steering Behaviours, Flocking

HTML

  • Explanation of how HTML works and its basic setup
  • HyperTextMarkupLanguage
  • Head, Body, Paragraph, Headings, Titles
  • Displays/Organises (through Tags) Text

CSS

  • Cascading Style Sheets
  • Styles the HTML document
  • Colours, Spacing, Font Sizing, etc.
  • More control over how it looks

JAVASCRIPT

  • <p id=”demo”></p>
  • document.getElementById(“demo”).innerHTML = Date();

 

 

P5

  • CTRL + / = Commenting in SublimetText
  • (125,125,50, 100, 100) = (location on ‘x’ L->R, location on ‘y’ Top->Down, size in pixels, Height)
  • ‘Fill’ applies to anything you create after
  • Things occur chronologically
  • ‘++’ means add 1
  • ‘+=’ means add the 1st and 2nd variable and make it equal to the 2nd variable
  • ‘[]’ means empty array/list
  • ‘.push’ means add to array (top of)
  • ‘.splice’ means remove from array (from the end)
  • CTRL+D – select values of the same type within code for editing (have to press it for each one)

capture

 

 

After break…

 

VECTORS:

  • Speed – Scalar Quantity
  • Velocity (has a direction) – Vector Quantity
  • Position,  x and y, can be represented as a vector
  • Velocity Vector = Final Position – Start Position
  • Start Position + Velocity Vector = Final Position
  • ‘.add’ is vector addition
  • F=ma – Force = Mass x Acceleration

 

Screenshot of one of my results:

result

 

Bibliography:

http://hello.p5js.org/

http://p5js.org/reference/

https://github.com/andylaps/flocking

 

 

NOTES:

  • Interesting how you can change the colours randomly (FOLDER: Day 1, Test 2, Workshop 1 and 1.1) – could be a cool effect to see on an object in AR
  • Final flocking example (Workshop 2) could be really interesting see in VR or AR… Is there a way to apply this (easily) to objects in Unity? Could be worth finding out…

Leave a comment