Instructions for a UFO 3-D Codealong using the p5js editor

UFOCodeAlong.md

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()
}