Skip to content

Latest commit

 

History

History
271 lines (204 loc) · 3.76 KB

w02.md

File metadata and controls

271 lines (204 loc) · 3.76 KB

Texture

  • index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.js"></script>
  <script src="sketch.js"></script>
  <title>WEBGL 연습</title>
</head>
<body>
  <h1>Texture</h1>
</body>
</html>
  • sketch.js (0)
let angle = 0;
let kitten;

function preload() {
    kitten = loadImage('kitten0.jpg');
}

function setup() {
    createCanvas(400, 300, WEBGL); 
}
  
function draw(){
    background(175);

    rotateX(angle);
    rotateY(angle * 0.3);
    rotateZ(angle * 1.2);

    texture(kitten);
    noStroke();
    plane(200, 200);
    // box(100);
    // sphere(100);
    // torus(100, 25);

    angle += 0.03;
}
  • sketch.js (1)
let angle = 0;
let kitten;
let cam;

function preload() {
    kitten = loadImage('kitten0.jpg');
}

function setup() {
    createCanvas(400, 300, WEBGL); 
    cam = createCapture(VIDEO);
    cam.size(320, 240);
}
  
function draw(){
    background(175);

    rotateX(angle);
    rotateY(angle * 0.3);
    rotateZ(angle * 1.2);

    texture(kitten);
    noStroke();
    plane(200, 200);
    // box(100);
    // sphere(100);
    // torus(100, 25);

    angle += 0.03;
}
  • sketch.js (2)
let angle = 0;
let kitten;
let cam;

function preload() {
    kitten = loadImage('kitten0.jpg');
}

function setup() {
    createCanvas(400, 300, WEBGL); 
    cam = createCapture(VIDEO);
    cam.size(320, 240);
    cam.hide();
}
  
function draw(){
    background(175);

    rotateX(angle);
    rotateY(angle * 0.3);
    rotateZ(angle * 1.2);

    texture(cam);
    noStroke();
    plane(320, 240);
    // box(100);
    // sphere(100);
    // torus(100, 25);

    angle += 0.03;
}
  • sketch.js (3)
let angle = 0;
let kitten;
let cam;

function preload() {
    kitten = loadImage('kitten0.jpg');
}

function setup() {
    createCanvas(400, 300, WEBGL); 
    cam = createCapture(VIDEO);
    cam.size(320, 240);
    cam.hide();
}
  
function draw(){
    background(175);

    push();
    rotateX(angle);
    rotateY(angle * 0.3);
    rotateZ(angle * 1.2);

    texture(cam);
    noStroke();
    box(100);
    pop();
    
    texture(cam);
    noStroke();
    plane(320, 240);
    
    angle += 0.03;
}
  • sketch.js (4)
let angle = 0;
let kitten;
let cam;

function preload() {
    kitten = loadImage('kitten0.jpg');
}

function setup() {
    createCanvas(400, 300, WEBGL); 
    cam = createCapture(VIDEO);
    cam.size(320, 240);
    cam.hide();
}
  
function draw(){
    background(175);

    push();
    rotateX(angle);
    rotateY(angle * 0.3);
    rotateZ(angle * 1.2);

    texture(cam);
    noStroke();
    box(100);
    pop();
    
    texture(cam);
    noStroke();
    translate(0, 100);
    rotateX(HALF_PI);
    // ambientLight(255);
    ambientMaterial(255);
    plane(500, 500);
    
    angle += 0.03;
}
  • sketch.js (5)
let angle = 0;
let kitten;
let cam;

function preload() {
    kitten = loadImage('kitten0.jpg');
}

function setup() {
    createCanvas(400, 300, WEBGL); 
    cam = createCapture(VIDEO);
    cam.size(320, 240);
    cam.hide();
}
  
function draw(){
    background(175);
    directionalLight(255, 255, 255, -mouseX + width/2, -mouseY + height/2, 0);
    push();
    rotateX(angle);
    rotateY(angle * 0.3);
    rotateZ(angle * 1.2);

    texture(cam);
    noStroke();
    box(100);
    pop();
    
    texture(cam);
    noStroke();
    translate(0, 100);
    rotateX(HALF_PI);
    // ambientLight(255);
    
    ambientMaterial(255);
    plane(500, 500);
    
    angle += 0.03;
}