Code Along

Brief notes on a 45 minute code-along I like to do to introduce P5.js, 3-D graphics, variables, objects, conditionals, and animation.

(Optional) make an account for the p5js editor
Go to https://editor.p5js.org/
File -> New if not already at a new file
Name it if you like
In function setup, replace line with createCanvas(500, 500, WEBGL);
Run (hit the "Play" button)
In run, add ellipsoid(100, 20, 100)
Set to Auto-refresh
Experiment with different sizes
Add the rest of the UFO

  translate(0, -15, 0);
  sphere(30)
  translate(0, 35, 0)
  sphere(10)

Put translate(0, 0, -450) before the drawing - experiment with diff values
At the top const ufo = {x: 0, y: -100, z: -300}
Then change translate to translate(ufo.x, ufo.y, ufo.z)
Now at end of draw, ufo.z += 1
Refactor to:

const ufo = {x: 0, y: -100, z: -300, spin: 0}

function setup() {
  createCanvas(500, 500, WEBGL);
}

function draw() {
  background('darkpurple');
  drawUfo()
  moveUfo()
}

function drawUfo() {
  translate(ufo.x, ufo.y, ufo.z)
  rotateY(ufo.spin)
  ellipsoid(100, 20, 100);
  translate(0, -15, 0);
  sphere(30)
  translate(0, 35, 0)
  sphere(10)
}

function moveUfo() {
  ufo.z += 1
}

Add spin:0 to ufo def
Add ufo.spin += 0.01 to move
Add rotateY(ufo.spin) just before the first ellipsoid call in draw
Now if it gets too close make it drop down - do these one at a time:

  ufo.spin += 0.01
  if (ufo.z < 0) {
    ufo.z += 1
  } else if (ufo.y < 100) {
    ufo.y += 1
  } else {
    noLoop()
  }

Define a groud:

function drawGround() {
  plane(900, 550)
}

Call it from draw
Better rotate and drop into position
rotateX(radians(90)) -- woops that rotates the ufo also
Add a push and pop
Add translate 0, 100, 0 before the rotate
Better use a variable groundElevantion, define it
Change to else if (ufo.y < groundElevation - 20) {
In drawGround, fill('lightgreen')
Maybe now background('midnightblue') bc UFOs always land at night
Before background, do directionalLight(255, 255, 255, -1, 1, -1) and describe the arguments
Add this right before the bottommost sphere on the ufo: emissiveMaterial('white')
whoops that lit up the plane so push/pop in drawUfo
Too many stroke lines - noStroke() in setUp() fixes it
To make it pretty we need to add texttures next. This may require you to have a log in on the p5 editor so you can stop coding along here.
Upload a file as grass.png
let grassImage at top
Preload function:

function preload() {
  grassTexture = loadImage('grass.png')
}

In drawGround, after the push, texture(grassTexture) and remove the fill call
Upload an LMU logo for the UFO texture
Same thing as above
Get a star texture for the background
Remove background call in draw, replace with new call to drawBackground
Use this:

function drawBackground() {
  push()
  translate(0, 0, -800)
  texture(starTexture)
  plane(2000, 2000)
  pop()
}

rtoal/UFOCodeAlong.md

Code Along