Add initial camera code
This commit is contained in:
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="p5.min.js"></script>
|
||||
<script src="sketch.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
3
CM2030 Graphics Programming/Topic 11/11.2.1 Camera/p5.min.js
vendored
Normal file
3
CM2030 Graphics Programming/Topic 11/11.2.1 Camera/p5.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
32
CM2030 Graphics Programming/Topic 11/11.2.1 Camera/sketch.js
Normal file
32
CM2030 Graphics Programming/Topic 11/11.2.1 Camera/sketch.js
Normal file
@ -0,0 +1,32 @@
|
||||
function setup() {
|
||||
createCanvas(900, 600, WEBGL);
|
||||
angleMode(DEGREES);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
background(125);
|
||||
|
||||
// camera
|
||||
let zLoc = ((sin(frameCount) + 1)/2 * height) + 200;
|
||||
// or
|
||||
zLoc = map(sin(frameCount), -1, 1, 200, 600);
|
||||
// using noise
|
||||
xLoc = map(noise(frameCount/200), 0, 1, -500, 500);
|
||||
yLoc = map(noise(frameCount/200 + 100), 0, 1, -500, 500);
|
||||
zLoc = map(noise(frameCount/200 + 150), 0, 1, 300, 800);
|
||||
// to rotate
|
||||
xLoc = cos(frameCount) * height;
|
||||
yLoc = sin(frameCount) * 300;
|
||||
zLoc = sin(frameCount) * height;
|
||||
// camera location x, y, z | Pointing to x, y, z | Orientation(tilt) x,y,z
|
||||
camera(xLoc, yLoc, zLoc, 0, 0, 0, 0, 1, 0);
|
||||
|
||||
// objects
|
||||
normalMaterial();
|
||||
torus(200, 50, 50, 50);
|
||||
|
||||
translate(0, 100, 0);
|
||||
rotateX(90);
|
||||
fill(200);
|
||||
plane(500, 500);
|
||||
}
|
||||
Reference in New Issue
Block a user