Upload
others
View
4
Download
1
Embed Size (px)
Citation preview
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