You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.7 KiB
HTML
114 lines
3.7 KiB
HTML
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<head>
|
||
|
2 years ago
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
|
||
|
|
<!--css-->
|
||
|
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||
|
|
|
||
|
|
<title>Wheel of Fortune</title>
|
||
|
|
|
||
|
|
<!--P5.MIN.JS-->
|
||
|
2 years ago
|
<script src="p5.min.js" ></script>
|
||
|
|
<script>
|
||
|
2 years ago
|
var allQuestions=[];
|
||
|
|
var questions = new XMLHttpRequest();
|
||
|
|
questions.open('GET', './list.txt');
|
||
|
|
questions.onreadystatechange = function() {
|
||
|
|
allQuestions=questions.responseText.split("\n");
|
||
|
|
}
|
||
|
|
questions.send();
|
||
|
|
|
||
|
2 years ago
|
function preload(){
|
||
|
2 years ago
|
img=loadImage('wheel.svg');
|
||
|
2 years ago
|
}
|
||
|
|
function setup() {
|
||
|
2 years ago
|
var canvas = createCanvas(windowWidth/2, windowHeight/2);
|
||
|
|
canvas.parent("wheel");
|
||
|
2 years ago
|
}
|
||
|
|
|
||
|
2 years ago
|
var spinning = 2000;
|
||
|
2 years ago
|
var currentSpinning = 0;
|
||
|
2 years ago
|
var spinonoff = false;
|
||
|
2 years ago
|
function spin(){
|
||
|
|
spinning = 1800 + random(0,500);
|
||
|
|
currentSpinning = 0;
|
||
|
2 years ago
|
spinonoff = true;
|
||
|
2 years ago
|
}
|
||
|
|
|
||
|
|
function card(){
|
||
|
2 years ago
|
// rect(0, 0, 55, 55);
|
||
|
|
var popup=document.getElementById("popup");
|
||
|
|
popup.style.display="block";
|
||
|
|
var popuptext=document.getElementById("popuptext");
|
||
|
|
popuptext.innerHTML=allQuestions[Math.floor(Math.random()*allQuestions.length)];
|
||
|
|
console.log(popup);
|
||
|
|
currentSpinning = 0;
|
||
|
|
spinonoff=false;
|
||
|
|
}
|
||
|
|
function closepopup(){
|
||
|
|
var popup=document.getElementById("popup");
|
||
|
|
popup.style.display="none";
|
||
|
|
console.log("closing");
|
||
|
2 years ago
|
}
|
||
|
|
function draw() {
|
||
|
2 years ago
|
clear();
|
||
|
2 years ago
|
// background(220);
|
||
|
2 years ago
|
imageMode(CENTER);
|
||
|
|
angleMode(DEGREES);
|
||
|
2 years ago
|
translate (windowWidth/4, windowHeight/4);
|
||
|
2 years ago
|
if (spinonoff==true){
|
||
|
|
rotate(currentSpinning);
|
||
|
|
|
||
|
|
currentSpinning = currentSpinning+10;
|
||
|
|
console.log(spinning,currentSpinning);
|
||
|
|
if (currentSpinning > spinning){
|
||
|
|
currentSpinning = spinning;
|
||
|
|
card();
|
||
|
|
}
|
||
|
2 years ago
|
}
|
||
|
2 years ago
|
image (img,0,0,250,250);
|
||
|
2 years ago
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
2 years ago
|
<div class="bg-image"></div>
|
||
|
2 years ago
|
<div class="bg-text-top">
|
||
|
|
<h1>Wheel of Fortune</h1>
|
||
|
|
<h2>Welcome, my dear!</h2>>
|
||
|
2 years ago
|
|
||
|
2 years ago
|
<p>This exercise you are about to start revolves around healing, in a sense of reconnecting to what is essential and authentic about yourself. As we understand the true nature of our suffering, we can evoke compassion for ourselves as we move through our uncomfortable feelings on the path to healing and peace.
|
||
|
2 years ago
|
|
||
|
|
<br>
|
||
|
2 years ago
|
|
||
|
2 years ago
|
<br>I will be guiding you through a series of carefully collected questions written by different authors, some well-known and others unknown. You begin the exercise by spinning the Wheel of Fortune. After a few seconds, a question appears on the screen. Then, you take a photo slide from the deck and try to think of an answer to that question by looking at it and the tiny film simultaneously.</p>
|
||
|
2 years ago
|
</div>
|
||
|
2 years ago
|
|
||
|
|
<button class="spin-wheel" onclick="spin()" > Spin</button>
|
||
|
|
|
||
|
|
<div id="wheel"></div>
|
||
|
2 years ago
|
<div id="popup">
|
||
|
2 years ago
|
<h3 id="popuptext"></h3>
|
||
|
|
<img src="photo-slide.jpg">
|
||
|
2 years ago
|
<button class="close" onclick="closepopup()" > Close</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
2 years ago
|
|
||
|
|
<div class="bg-text-bottom">
|
||
|
|
<h2>Here are a few things I prepared for you before you begin:</h2>
|
||
|
2 years ago
|
<p>1. Have a strong sense of intention to commit to this exercise for some time.
|
||
|
|
<br>2. Find a quiet room, free of distraction.
|
||
|
|
<br>3. Get a notebook and a pen. Handwriting will engage your mind more actively and profoundly, help you connect with yourself, and enable the tracing of your progress over time.</p>
|
||
|
2 years ago
|
|
||
|
2 years ago
|
</div>
|
||
|
2 years ago
|
|
||
|
2 years ago
|
|
||
|
|
<img class="top-left-corner" src="crystals.svg">
|
||
|
2 years ago
|
<img class="top-right-corner" src="crystals.svg">
|
||
|
|
<img class="bottom-left-corner" src="crystals.svg">
|
||
|
|
<img class="bottom-right-corner" src="crystals.svg">
|
||
|
|
|
||
|
2 years ago
|
|
||
|
|
|
||
|
2 years ago
|
</body>
|