Commit 78bfe03a authored by Evan Raskob's avatar Evan Raskob

initial examples with lighting and shape and projection mapping start

parent a994f28b
<!DOCTYPE html><html lang="en"><head>
<script src="p5.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<script src="sketch.js"></script>
</body></html>
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
/*
* @name Geometries
* @description There are six 3D primitives in p5 now.
*/
function setup() {
createCanvas(710, 400, WEBGL);
}
function draw() {
background(250);
translate(-240, -100, 0);
normalMaterial();
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
plane(70);
pop();
translate(240, 0, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(70, 70, 70);
pop();
translate(240, 0, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
cylinder(70, 70);
pop();
translate(-240 * 2, 200, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
cone(70, 70);
pop();
translate(240, 0, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
torus(70, 20);
pop();
translate(240, 0, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
sphere(70);
pop();
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html><html lang="en"><head>
<script src="p5.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<script src="sketch.js"></script>
</body></html>
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
/*
* @name 3d coords
* @frame 320,240
* @description Display a sphere at 0,0,0
*/
let zSlider;
function setup() {
createCanvas(320, 240, WEBGL);
noStroke();
let eyeDistance = (height/2) / tan(PI/6); // 120 degree angle FOV / 2
zSlider = createSlider(0, eyeDistance, 0);
zSlider.position(8, 248);
}
function draw() {
background(0);
noLights();
// to set the light position,
// think of the world's coordinate as:
// -width/2,-height/2 -------- width/2,-height/2
// | |
// | 0,0 |
// | |
// -width/2,height/2--------width/2,height/2
push();
translate(0,0,zSlider.value());
sphere(10);
pop();
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html><html lang="en"><head>
<script src="p5.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<script src="sketch.js"></script>
</body></html>
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
/*
* @name Textures
* @description Images and videos are supported for texture.
*/
// video source: https://vimeo.com/90312869
let img;
let vid;
let theta = 0;
function setup() {
createCanvas(710, 400, WEBGL);
img = loadImage('assets/cat.jpg');
vid = createVideo(['assets/360video_256crop_v2.mp4']);
vid.elt.muted = true;
vid.loop();
vid.hide();
}
function draw() {
background(250);
translate(-220, 0, 0);
push();
rotateZ(theta * mouseX * 0.001);
rotateX(theta * mouseX * 0.001);
rotateY(theta * mouseX * 0.001);
//pass image as texture
texture(vid);
sphere(150);
pop();
translate(440, 0, 0);
push();
rotateZ(theta * 0.1);
rotateX(theta * 0.1);
rotateY(theta * 0.1);
texture(img);
box(100, 100, 100);
pop();
theta += 0.05;
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html><html lang="en"><head>
<script src="p5.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<script src="sketch.js"></script>
</body></html>
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
/*
* @name Mixture
* @frame 710,400 (optional)
* @description Display a box with three different kinds of lights.
*/
function setup() {
createCanvas(320, 240, WEBGL);
noStroke();
}
function draw() {
background(0);
// ambient light
ambientLight(30,0,0);
// to set the light position,
// think of the world's coordinate as:
// -width/2,-height/2 -------- width/2,-height/2
// | |
// | 0,0 |
// | |
// -width/2,height/2--------width/2,height/2
// blue directional light from the top
//directionalLight(128, 0, 0, 0, 1, 0.125);
// to set the light position,
// think of the world's coordinate as:
// -width/2,-height/2 -------- width/2,-height/2
// | |
// | 0,0 |
// | |
// -width/2,height/2--------width/2,height/2
//shininess(120);
//specularMaterial(255);
// calculate distance from center to mouseX
let lightX = width/8*cos(frameCount/50);
let lightY = height/8*sin(frameCount/50);
// red spotlight
// axis located at lightX, lightY, 500
// axis direction of light: 0, 0, -1
spotLight(100, 100, 255,
lightX, lightY, width,
0, 0, -1,
PI/8, 50);
push();
translate(lightX, lightY, width/2);
sphere(5);
pop();
// rotate on X axis
rotateX(-PI/4);
// rotate on Y axis
rotateY(PI/4);
// place box on (0, 0, 0), size 100
box(100);
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html><html lang="en"><head>
<script src="p5.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<script src="sketch.js"></script>
</body></html>
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
/**
* Using vertex colours to create gradient fills for shapes.
* @author (adapted by) Evan Raskob 2021 <e.raskob@gold.ac.uk>
* @see webGL shape types in p5js: https://p5js.org/reference/#/p5/beginShape
*
*/
function setup() {
createCanvas(300, 600, WEBGL);
noLights();
}
function draw() {
background(220);
// ---------------
// top triangle
push();
translate(0,-height/4);
colorMode(RGB);
noStroke();
beginShape(TRIANGLES);
fill(255, 0, 0);
vertex(-width/4, -width/4, 0);
fill(0, 255, 0);
vertex( width/4, -width/4, 0);
fill(0, 0, 255);
vertex( 0, width/4, 0);
endShape(CLOSE);
pop();
// ---------------
// bottom square
push();
translate(0,height/4);
colorMode(HSB);
let baseHue = 0;
noStroke();
beginShape(); // let p5js's renderer sort it out
fill(baseHue, 255, 255);
vertex(-width/4, -width/4, 0); // top left
baseHue += 90;
fill(baseHue, 255, 255);
vertex( width/4, -width/4, 0); // top right
baseHue += 90;
fill(baseHue, 255, 255);
vertex( width/4, width/4, 0); // bottom right
baseHue += 90;
fill(baseHue, 255, 255);
vertex( -width/4, width/4, 0); // bottom left
endShape(CLOSE);
pop();
}
\ No newline at end of file
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html><html lang="en"><head>
<script src="p5.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<script src="sketch.js"></script>
</body></html>
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
/**
* Using vertex colours to create gradient fills for shapes.
* @author (adapted by) Evan Raskob 2021 <e.raskob@gold.ac.uk>
*
*/
function setup() {
createCanvas(300, 600, WEBGL);
noLights();
}
function draw() {
background(220);
noStroke();
beginShape(TRIANGLES);
fill(255, 0, 0);
vertex(-width/4, -width/4, 0);
fill(0, 255, 0);
vertex( width/4, -width/4, 0);
fill(0, 0, 255);
vertex( 0, width/4, 0);
endShape(CLOSE);
}
\ No newline at end of file
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html><html lang="en"><head>
<script src="p5.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<script src="sketch.js"></script>
</body></html>
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
/*
* @name Textures
* @description Images and videos are supported for texture.
*/
// video source: https://vimeo.com/90312869
let img;
let theta = 0;
function setup() {
createCanvas(320, 240, WEBGL);
img = loadImage('assets/wave.jpg');
}
function draw() {
background(255);
push();
rotateZ(theta);
rotateX(theta);
rotateY(theta);
//pass image as texture
texture(img);
box(width/4);
pop();
theta += 0.005 + (width/2 - mouseX) * 0.0001;
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html><html lang="en"><head>
<script src="p5.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<script src="sketch.js"></script>
</body></html>
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
/*
* @name Quad texture
* @description Using a quad for texture. Images and videos are supported for texture too.
*/
let img;
let theta = 0;
function setup() {
createCanvas(320, 240, WEBGL);
img = loadImage('assets/wave.jpg');
}
function draw() {
background(255);
push();
rotateZ(theta);
rotateX(theta);
rotateY(theta);
// top left
push();
noStroke();
translate(-width/4,-width/4);
fill(0,255,0);
sphere(5);
pop();
// bottom right
push();
noStroke();
translate(width/4,width/4);
fill(0,0,255);
sphere(5);
pop();
//pass image as texture
texture(img);
quad(-width/4,-width/4, // top left
width/4,-width/4, // top right
width/4,width/4, // bottom right
-width/4,width/4); // bottom left
pop();
// centre
fill(255,0,0);
sphere(5);
theta += 0.005 + (width/2 - mouseX) * 0.0001;
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html><html lang="en"><head>
<script src="p5.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<script src="sketch.js"></script>
</body></html>
\ No newline at end of file
This diff is collapsed.