Skip to content

Instantly share code, notes, and snippets.

@rtoal
Last active September 27, 2023 00:48
Show Gist options
  • Save rtoal/963af5b5fb01b4749ef62f64b2007942 to your computer and use it in GitHub Desktop.
Save rtoal/963af5b5fb01b4749ef62f64b2007942 to your computer and use it in GitHub Desktop.
Instructions for a UFO 3-D Codealong using the p5js editor

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()
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment