Skip to content

Commit

Permalink
Rand
Browse files Browse the repository at this point in the history
  • Loading branch information
b2renger committed Sep 30, 2024
1 parent 08001f7 commit 83b8768
Show file tree
Hide file tree
Showing 34 changed files with 333 additions and 0 deletions.
41 changes: 41 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,47 @@ https://ateliernum.github.io/AR_24_projects/Durer/index.html
<img src="qrs/Durer.png" width="50%" height="auto"/>
</div>

# Paul Rand
by Léonie morin and Lena Van Maris



https://ateliernum.github.io/AR_24_projects/Rand/AIGA/index.html

https://ateliernum.github.io/AR_24_projects/Rand/LOGOS/index.html

https://ateliernum.github.io/AR_24_projects/Rand/NEXT/index.html


<div align="center">
<img src="assets/Rand.jpg" width="100%" height="auto"/>
</div>
<div align="center">
<img src="qrs/RandIBM.png" width="33%" height="auto"/>
</br>
<a href="https://ateliernum.github.io/AR_24_projects/Rand/IBM/index.html">https://ateliernum.github.io/AR_24_projects/Rand/IBM/index.html</a>
</div>

<div align="center">
<img src="qrs/RandAIGA.png" width="33%" height="auto"/>
</br>
<a href="https://ateliernum.github.io/AR_24_projects/Rand/AIGA/index.html">https://ateliernum.github.io/AR_24_projects/Rand/AIGA/index.html</a>
</div>

<div align="center">
<img src="qrs/RandLOGOS.png" width="33%" height="auto"/>
</br>
<a href="https://ateliernum.github.io/AR_24_projects/Rand/LOGOS/index.html">https://ateliernum.github.io/AR_24_projects/Rand/LOGOS/index.html</a>
</div>

<div align="center">
<img src="qrs/RandNEXT.png" width="33%" height="auto"/>
</br>
<a href="https://ateliernum.github.io/AR_24_projects/Rand/NEXT/index.html">https://ateliernum.github.io/AR_24_projects/Rand/NEXT/index.html</a>
</div>






Expand Down
Binary file added Rand/AIGA/assets/animation_realite_augmentee.mp4
Binary file not shown.
Binary file added Rand/AIGA/assets/satanim3.glb
Binary file not shown.
46 changes: 46 additions & 0 deletions Rand/AIGA/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!doctype html>
<html>

<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/3.4.5/aframe/build/aframe-ar.js"></script>
</head>

<body style="margin: 0px; overflow: hidden;">

<a-scene embedded
arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; trackingMethod: best; changeMatrixMode: modelViewMatrix;"
vr-mode-ui="enabled: false"
renderer="sortObjects: true; antialias: true; colorManagement: true; physicallyCorrectLights; logarithmicDepthBuffer: true;"
smooth="true" smoothCount="5" smoothTolerance=".05" smoothThreshold="5" sourceWidth="800" sourceHeight="600"
displayWidth="1280" displayHeight="720">

<a-assets>
<video id="video1" src="./assets/animation_realite_augmentee.mp4" autoplay loop muted playsinline
crossorigin="anonymous"></video>
</a-assets>

<a-marker type="barcode" value="10">
<a-video src="#video1" position="0 1 0" rotation="270 0 0" width="1.3" height="1.3"></a-video>
</a-marker>



<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

</a-scene>

<script>
document.addEventListener('DOMContentLoaded', (event) => {
const video = document.getElementById('video1');
if (video) {
video.play().catch(error => {
console.error('Error attempting to play', error);
});
}
});
</script>

</body>

</html>
Empty file added Rand/AIGA/script.js
Empty file.
Empty file added Rand/AIGA/style.css
Empty file.
Binary file added Rand/IBM/assets/ailedroite.mp4
Binary file not shown.
Binary file added Rand/IBM/assets/ailegauche.mp4
Binary file not shown.
Binary file added Rand/IBM/assets/corpsbas.mp4
Binary file not shown.
Binary file added Rand/IBM/assets/corpshaut.mp4
Binary file not shown.
Binary file added Rand/IBM/assets/satanim3.glb
Binary file not shown.
Binary file added Rand/IBM/assets/yeux.mp4
Binary file not shown.
62 changes: 62 additions & 0 deletions Rand/IBM/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!doctype html>
<html>

<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/3.4.5/aframe/build/aframe-ar.js"></script>
</head>

<body style="margin: 0px; overflow: hidden;">

<a-scene embedded arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; trackingMethod: best; changeMatrixMode: modelViewMatrix;"
vr-mode-ui="enabled: false"
renderer="sortObjects: true; antialias: true; colorManagement: true; physicallyCorrectLights; logarithmicDepthBuffer: true;"
smooth="true" smoothCount="5" smoothTolerance=".05" smoothThreshold="5" sourceWidth="800" sourceHeight="600"
displayWidth="1280" displayHeight="720">

<a-assets>
<video id="ailedroite" src="./assets/ailedroite.mp4" autoplay loop muted playsinline crossorigin="anonymous"></video>
<video id="ailegauche" src="./assets/ailegauche.mp4" autoplay loop muted playsinline crossorigin="anonymous"></video>
<video id="yeux" src="./assets/yeux.mp4" autoplay loop muted playsinline crossorigin="anonymous"></video>
<video id="corpsbas" src="./assets/corpsbas.mp4" autoplay loop muted playsinline crossorigin="anonymous"></video>
<video id="corpshaut" src="./assets/corpshaut.mp4" autoplay loop muted playsinline crossorigin="anonymous"></video>
</a-assets>

<a-marker type="barcode" value="10">
<a-video src="#ailedroite" position="0 1 0" rotation="270 0 0" width="4" height="4"></a-video>
</a-marker>

<a-marker type="barcode" value="10">
<a-video src="#ailegauche" position="0 1 0" rotation="270 0 0" width="4" height="4"></a-video>
</a-marker>

<a-marker type="barcode" value="10">
<a-video src="#yeux" position="0 1 0" rotation="270 0 0" width="4" height="4"></a-video>
</a-marker>

<a-marker type="barcode" value="10">
<a-video src="#corpsbas" position="0 1 0" rotation="270 0 0" width="4" height="4"></a-video>
</a-marker>

<a-marker type="barcode" value="10">
<a-video src="#corpsgauche" position="0 1 0" rotation="270 0 0" width="4" height="4"></a-video>
</a-marker>

<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

</a-scene>

<script>
document.addEventListener('DOMContentLoaded', (event) => {
const video = document.getElementById('video1');
if (video) {
video.play().catch(error => {
console.error('Error attempting to play', error);
});
}
});
</script>

</body>

</html>
Empty file added Rand/IBM/script.js
Empty file.
Empty file added Rand/IBM/style.css
Empty file.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Rand/LOGOS/assets/logo.mp4
Binary file not shown.
Binary file added Rand/LOGOS/assets/satanim3.glb
Binary file not shown.
43 changes: 43 additions & 0 deletions Rand/LOGOS/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!doctype html>
<html>

<head>
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/3.4.5/aframe/build/aframe-ar.js"></script>
</head>

<body style="margin: 0px; overflow: hidden;">

  <a-scene embedded arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; trackingMethod: best; changeMatrixMode: modelViewMatrix;"
    vr-mode-ui="enabled: false"
    renderer="sortObjects: true; antialias: true; colorManagement: true; physicallyCorrectLights; logarithmicDepthBuffer: true;"
    smooth="true" smoothCount="5" smoothTolerance=".05" smoothThreshold="5" sourceWidth="800" sourceHeight="600"
    displayWidth="1280" displayHeight="720">

    <a-assets>
      <video id="video1" src="./assets/logo.mp4" autoplay loop muted playsinline crossorigin="anonymous"></video>
    </a-assets>

    <a-marker type="barcode" value="10">
      <a-video src="#video1" position="0 1 0" rotation="270 0 0" width="1" height="1"></a-video>
    </a-marker>


    <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

  </a-scene>

  <script>
    document.addEventListener('DOMContentLoaded', (event) => {
      const video = document.getElementById('video1');
      if (video) {
        video.play().catch(error => {
          console.error('Error attempting to play', error);
        });
      }
    });
  </script>

</body>

</html>
Empty file added Rand/LOGOS/script.js
Empty file.
Empty file added Rand/LOGOS/style.css
Empty file.
Binary file added Rand/NEXT/assets/DB.mp4
Binary file not shown.
Binary file added Rand/NEXT/assets/DH.mp4
Binary file not shown.
Binary file added Rand/NEXT/assets/GB.mp4
Binary file not shown.
Binary file added Rand/NEXT/assets/GH.mp4
Binary file not shown.
141 changes: 141 additions & 0 deletions Rand/NEXT/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<!doctype html>
<html>

<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/3.4.5/aframe/build/aframe-ar.js"></script>

<script defer>
// https://github.com/nikolaiwarner/aframe-chromakey-material
AFRAME.registerShader('chromakey', {
schema: {
src: {type: 'map'},
color: {default: {x: 0.0, y: 1.0, z: 0.0}, type: 'vec3', is: 'uniform'},
chroma: {type: 'bool', is: 'uniform'},
transparent: {default: true, is: 'uniform'}
},

init: function (data) {
const videoEl = data.src;
document.addEventListener('click', () => {
videoEl.play();
});

var videoTexture = new THREE.VideoTexture(data.src)
videoTexture.minFilter = THREE.LinearFilter
this.material = new THREE.ShaderMaterial({
uniforms: {
chroma: {
type: 'b',
value: data.chroma
},
color: {
type: 'c',
value: data.color
},
myTexture: {
type: 't',
value: videoTexture
}
},
vertexShader:
`
varying vec2 vUv;
void main(void)
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
`
,
fragmentShader:
`
uniform sampler2D myTexture;
uniform vec3 color;
uniform bool chroma;
varying vec2 vUv;
void main(void)
{
vec3 tColor = texture2D( myTexture, vUv ).rgb;
float a;
if(chroma == true){
a = (length(tColor - color) - 0.5) * 7.0;
}
else {
a = 1.0;
}
gl_FragColor = vec4(tColor, a);
}
`
})
},

update: function (data) {
this.material.color = data.color
this.material.src = data.src
this.material.transparent = data.transparent
},

})

</script>
</head>

<body style="margin: 0px; overflow: hidden;">

<a-scene embedded
arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; trackingMethod: best; changeMatrixMode: modelViewMatrix;"
vr-mode-ui="enabled: false"
renderer="sortObjects: true; antialias: true; colorManagement: true; physicallyCorrectLights; logarithmicDepthBuffer: true;"
smooth="true" smoothCount="5" smoothTolerance=".05" smoothThreshold="5" sourceWidth="800" sourceHeight="600"
displayWidth="1280" displayHeight="720">

<a-assets>
<video id="gh" src="./assets/GH.mp4" autoplay loop muted playsinline
crossorigin="anonymous"></video>
<video id="dh" src="./assets/DH.mp4" autoplay loop muted playsinline
crossorigin="anonymous"></video>
<video id="gb" src="./assets/GB.mp4" autoplay loop muted playsinline
crossorigin="anonymous"></video>
<video id="db" src="./assets/DB.mp4" autoplay loop muted playsinline
crossorigin="anonymous"></video>
</a-assets>

<a-marker type="barcode" value="10">
<a-entity material="shader: chromakey; src: #db; chroma: false; color: 0. 0. 1."
geometry="primitive: plane; width: 1.3; height: 1.3" position="0 0 0" rotation="270 0 0" side="double">
</a-entity>
</a-marker>

<a-marker type="barcode" value="13">
<a-entity material="shader: chromakey; src: #gh; chroma: false; color: 0. 0. 1."
geometry="primitive: plane; width: 1.3; height: 1.3" position="0 0 0" rotation="270 0 0" side="double">
</a-entity>
</a-marker>

<a-marker type="barcode" value="56">
<a-entity material="shader: chromakey; src: #dh; chroma: false; color: 0. 0. 1."
geometry="primitive: plane; width: 1.3; height: 1.3" position="0 0 0" rotation="270 0 0" side="double">
</a-entity>
</a-marker>

<a-marker type="barcode" value="32">
<a-entity material="shader: chromakey; src: #gb; chroma: false; color: 0. 0. 1."
geometry="primitive: plane; width: 1.3; height: 1.3" position="0 0 0" rotation="270 0 0" side="double">
</a-entity>
</a-marker>



<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

</a-scene>


</body>

</html>
Empty file added Rand/NEXT/script.js
Empty file.
Empty file added Rand/NEXT/style.css
Empty file.
Binary file added assets/Rand.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added qrs/RandAIGA.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added qrs/RandIBM.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added qrs/RandLOGOS.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added qrs/RandNEXT.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 83b8768

Please sign in to comment.