Skip to content

Commit f6d8d93

Browse files
CallumGillyCallumGilly
committed
P5 Template + Circle Detection started
1 parent fa0ef07 commit f6d8d93

File tree

10 files changed

+117
-2
lines changed

10 files changed

+117
-2
lines changed

‎CircleDetection/frame.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js" integrity="sha512-WJXVjqeINVpi5XXJ2jn0BSCfp0y80IKrYh731gLRnkAS9TKc5KNt/OfLtu+fCueqdWniouJ1ubM+VI/hbo7POQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4+
<script src="./p5Scripts.js"></script>
5+
<style>
6+
body {padding: 0; margin: 0;}
7+
</style>
8+
</head>
9+
10+
<body>
11+
12+
</body>
13+
</html>

‎CircleDetection/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
8+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
9+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
10+
<link rel="manifest" href="/site.webmanifest">
11+
<title>Callum Gilchrist</title>
12+
13+
<link rel="stylesheet" href="/main.css">
14+
</head>
15+
<body>
16+
<div id="nav-placeholder">
17+
18+
</div>
19+
<div id="main" class="consoleStyle">
20+
<h1>Circle Detector</h1>
21+
<p>Uses input from an image or your camera and detects an circles</p>
22+
<p>This is still a work in progress and is thus working, yet!</p>
23+
<div id="p5">
24+
<iframe class="p5Frame" id="p5Frame" src="./frame.html" width="80%" height="80%" frameborder="0" scrolling="no" seamless="seamless"></iframe>
25+
</div>
26+
</div>
27+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
28+
<script src="indexScripts.js"></script>
29+
</body>
30+
</html>

‎CircleDetection/indexScripts.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
$("#nav-placeholder").load("/navbar.html");

‎CircleDetection/p5Scripts.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
//Runs once at the start and sets environment variable
2+
let capture;
3+
4+
function setup() {
5+
createCanvas(windowWidth,windowHeight);
6+
background(0)
7+
capture = createCapture(VIDEO);
8+
capture.size(250, 250);
9+
//capture.hide();
10+
}
11+
12+
//Runs ever frame
13+
function draw() {
14+
background(0);
15+
image(capture, 0, 0, 250, 250);
16+
filter(GRAY)
17+
}

‎P5ProjectTemplate/frame.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js" integrity="sha512-WJXVjqeINVpi5XXJ2jn0BSCfp0y80IKrYh731gLRnkAS9TKc5KNt/OfLtu+fCueqdWniouJ1ubM+VI/hbo7POQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4+
<script src="./p5Scripts.js"></script>
5+
<style>
6+
body {padding: 0; margin: 0;}
7+
</style>
8+
</head>
9+
10+
<body>
11+
12+
</body>
13+
</html>

‎P5ProjectTemplate/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
8+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
9+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
10+
<link rel="manifest" href="/site.webmanifest">
11+
<title>Callum Gilchrist</title>
12+
13+
<link rel="stylesheet" href="/main.css">
14+
</head>
15+
<body>
16+
<div id="nav-placeholder">
17+
18+
</div>
19+
<div id="main" class="consoleStyle">
20+
<h1>Title</h1>
21+
<p>Description</p>
22+
<div id="p5">
23+
<iframe class="p5Frame" id="p5Frame" src="./frame.html" width="80%" height="80%" frameborder="0" scrolling="no" seamless="seamless"></iframe>
24+
</div>
25+
</div>
26+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
27+
<script src="indexScripts.js"></script>
28+
</body>
29+
</html>

‎P5ProjectTemplate/indexScripts.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
$("#nav-placeholder").load("/navbar.html");

‎P5ProjectTemplate/p5Scripts.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
//Runs once at the start and sets environment variable
2+
function setup() {
3+
createCanvas(windowWidth,windowHeight);
4+
background(0)
5+
}
6+
7+
//Runs ever frame
8+
function draw() {
9+
fill(255,0,0);
10+
rect(0, 0, 100, 100);
11+
}

‎main.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ body {
2222
padding: 10px;
2323
}
2424

25-
iframe {
25+
.spiroFrame {
2626
position: absolute;
2727
z-index: -1;
2828
top: 0;

‎navbar.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<a href="#" onclick="showProjects()">Projects</a>
1919
<ul class="subList" id="projectList">
2020
<li><a href="/glidingProjects/V1/index.html">Gliding Utility</a></li>
21-
<li><a href="#">Circle Detection</a></li>
21+
<!-- <li><a href="/CircleDetection/index.html">Circle Detection</a></li> -->
2222
</ul>
2323
<a href="#">Contact</a>
2424
</div>

0 commit comments

Comments
 (0)