Learn to code #83D shapes

Contents

Sketch A8-1 rotate on the x axisSketch A8-2 rotate on the y axisSketch A8-3 rotate on the z axisSketch A8-4 rotating in all DirectionsSketch A8-5 cuboidSketch A8-6 planeSketch A8-7 sphereSketch A8-8 cylinderSketch A8-9 coneSketch A8-10 ellipsoidSketch A8-11 torus

3D shapes 2 Learn to code #8

Sketch 8-1 (rotate on the x axis)

var i = 0;

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

function draw() { background(200); rotateX(radians(i)); box(100); i++;}

3D shapes 3 Learn to code #8

Notes:Drawing a box requires one argument, the length of the sides, being a cube all the sides are the same length, hence one argument. Here you will rotate it about the x axis.

Mini challenges:1. Change the size of the box2. Can you change the speed of rotation

Keywords: rotateX() this rotates an object about the x axisbox() draws a three dimensional cuboidWEBGL is a JavaScript API for 2D and 3D graphics

3D shapes 4 Learn to code #8

Sketch A8-2 (rotate on the y axis)

var i = 0;

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

function draw() { background(200); rotateY(radians(i)); box(100); i++;}

3D shapes 5 Learn to code #8

Notes:This time rotating around the y axis.

Keywords: rotateY() this rotates an object about the y axis

3D shapes 6 Learn to code #8

Sketch A8-3 (rotate on the z axis)

var i = 0;

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

function draw() { background(200); rotateZ(radians(i)); box(100); i++;}

3D shapes 7 Learn to code #8

Notes:Now rotating about the z axis which is perpendicular to the canvas

Keywords: rotateZ() this rotates an object about the z axis

3D shapes 8 Learn to code #8

Sketch A8-4 (rotating in all directions)

var i = 0;

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

function draw() { background(200); rotateX(radians(i)); rotateY(radians(i)); rotateZ(radians(i)); box(100); i++;}

3D shapes 9 Learn to code #8

Notes:This now does all three at the same time

Mini challenge:1. Make them rotate different amounts to each other

3D shapes 10 Learn to code #8

Sketch A8-5 (cuboid)

var i = 0;

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

function draw() { background(200); rotateX(radians(i)); rotateY(radians(i)); rotateZ(radians(i)); i++; box(100, 200, 300);}

3D shapes 11 Learn to code #8

Notes:Draws a cuboid that has different dimension to its width, length and height.

Mini challenges:1. Give the box different dimensions

3D shapes 12 Learn to code #8

Sketch A8-6 (plane)

var i = 0;

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

function draw() { background(200); rotateX(radians(i)); rotateY(radians(i)); rotateZ(radians(i)); i++; plane(300, 200);}

3D shapes 13 Learn to code #8

Notes:Draws a flat plane with a width and height. The same effect can be had by drawing a box where the third dimension is 0 or 1 e.g. box(300, 200, 0);

Mini challenge:1. Change the size of the plane

Keywords: plane() draws a plane with two dimensions

3D shapes 14 Learn to code #8

Sketch A8-7 (sphere)

var i = 0;

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

function draw() { background(200); rotateX(radians(i)); rotateY(radians(i)); rotateZ(radians(i)); i++; sphere(100);}

3D shapes 15 Learn to code #8

Notes:This creates a sphere with a diameter of 100.

Mini challenges:1. Change its diameter

Keywords: sphere() draws a sphere in the centre of the 3d space

3D shapes 16 Learn to code #8

Sketch A8-8 (cylinder)

var i = 0;

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

function draw() { background(200); rotateX(radians(i)); rotateY(radians(i)); rotateZ(radians(i)); i++; cylinder(100, 300);}

3D shapes 17 Learn to code #8

Notes:The first dimension is its diameter and the second is the length of the cylinder.

Mini challenges:1. Change the diameter2. Change the length3. What happens if the length is 0

Keywords: cylinder() draws a cylinder of diameter and length

3D shapes 18 Learn to code #8

Sketch A8-9 (cone)

var i = 0;

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

function draw() { background(200); rotateX(radians(i)); rotateY(radians(i)); rotateZ(radians(i)); i++; cone(100, 200);}

3D shapes 19 Learn to code #8

Notes:Draws a cone of a specific height and diameter of base.

Mini challenges:1. Change base diameter2. Change height

Keywords: cone(100) draws a cone with a base diameter and height

3D shapes 20 Learn to code #8

Sketch A8-10 (ellipsoid)

var i = 0;

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

function draw() { background(200); rotateX(radians(i)); rotateY(radians(i)); rotateZ(radians(i)); i++; ellipsoid(100, 150, 200);}

3D shapes 21 Learn to code #8

Notes:draws an ellipsoid with three dimensions, width, height and length

Mini challenge:1. Change the dimensions 2. Can you tell which one does what?3. What if one of them is 0?

Keywords: ellipsoid() draws an ellipsoid with three dimensions

3D shapes 22 Learn to code #8

Sketch A8-11 (torus)

var i = 0;

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

function draw() { background(200); rotateX(radians(i)); rotateY(radians(i)); rotateZ(radians(i)); i++; torus(100, 25);}

3D shapes 23 Learn to code #8

Notes:Draws a torus, a doughnut shape. With an overall diameter and the thickness of the doughnut ring

Mini challenges:1. Change the thickness2. Change the diameter

Keywords: torus() draws a torus of thickness and diameter

3D shapes 24 Learn to code #8