├── .gitignore
├── icons
├── favicon.ico
├── icon-192x192.png
└── icon-512x512.png
├── screenshots
├── screencast.gif
├── screenshot-01b.png
├── screenshot-02.png
└── screenshot-03.png
├── manifest.json
├── index.html
├── style
└── style.css
├── script
├── interwovenOversemantization.js
└── main.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
--------------------------------------------------------------------------------
/icons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelkolesidis/interwoven-oversemantization/HEAD/icons/favicon.ico
--------------------------------------------------------------------------------
/icons/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelkolesidis/interwoven-oversemantization/HEAD/icons/icon-192x192.png
--------------------------------------------------------------------------------
/icons/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelkolesidis/interwoven-oversemantization/HEAD/icons/icon-512x512.png
--------------------------------------------------------------------------------
/screenshots/screencast.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelkolesidis/interwoven-oversemantization/HEAD/screenshots/screencast.gif
--------------------------------------------------------------------------------
/screenshots/screenshot-01b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelkolesidis/interwoven-oversemantization/HEAD/screenshots/screenshot-01b.png
--------------------------------------------------------------------------------
/screenshots/screenshot-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelkolesidis/interwoven-oversemantization/HEAD/screenshots/screenshot-02.png
--------------------------------------------------------------------------------
/screenshots/screenshot-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelkolesidis/interwoven-oversemantization/HEAD/screenshots/screenshot-03.png
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "interwoven oversemantization",
3 | "short_name": "interwoven oversemantization",
4 | "icons": [
5 | {
6 | "src": "./icons/icon-192x192.png",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | },
10 | {
11 | "src": "/icons/icon-512x512.png",
12 | "sizes": "512x512",
13 | "type": "image/png"
14 | }
15 | ],
16 | "theme_color": "#000",
17 | "background_color": "#000",
18 | "display": "standalone"
19 | }
20 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
8 | interwoven oversemantization | michael kolesidis
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/style/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | color: rgb(235, 235, 235);
5 | font-weight: 600;
6 | font-size: 1.1rem;
7 | user-select: none;
8 | font-family: sans-serif;
9 | box-sizing: border-box;
10 | }
11 |
12 | html,
13 | body {
14 | background-color: rgb(10, 10, 10);
15 | cursor: none;
16 | }
17 |
18 | h1 {
19 | font-size: 1.3rem;
20 | }
21 |
22 | h1,
23 | p {
24 | margin: 1rem;
25 | }
26 |
27 | h1,
28 | footer {
29 | transition: opacity 8s ease-in-out;
30 | }
31 |
32 | canvas {
33 | position: fixed;
34 | top: 0;
35 | left: 0;
36 | bottom: 0;
37 | right: 0;
38 | z-index: -1;
39 | }
40 |
41 | #top-right {
42 | position: absolute;
43 | top: 0;
44 | right: 0;
45 | letter-spacing: 0.1em;
46 | }
47 |
48 | #bottom-left {
49 | position: absolute;
50 | bottom: 0;
51 | left: 0;
52 | }
53 |
54 | #bottom-right {
55 | position: absolute;
56 | bottom: 0;
57 | right: 0;
58 | }
59 |
--------------------------------------------------------------------------------
/script/interwovenOversemantization.js:
--------------------------------------------------------------------------------
1 | // Author: Michael Kolesidis
2 | // Title: interwoven oversemantization
3 |
4 | // Copyright (c) 2023 Michael Kolesidis - https://michaelkolesidis.com/
5 | // I am the sole copyright owner of this Work.
6 | //
7 | // Reproduction of any of the artwork on this website
8 | // for commercial use is not permitted without first
9 | // receiving written permission from the artist. You
10 | // cannot host, display, distribute or share this Work
11 | // in any form, including physical and digital. You
12 | // cannot use this Work in any commercial or non-commercial
13 | // product, website or project. You cannot sell this Work and
14 | // you cannot mint an NFTs of it.
15 |
16 | // Under the Copyright Law, it is fair use to reproduce a single
17 | // copy for personal or educational purposes, provided that no
18 | // changes are made to the content and provided that a copyright
19 | // notice attesting to the content is attached to the reproduction.
20 | // Beyond that, no further copies of works of art may be made or
21 | // distributed on this website without written permission.
22 |
23 | // Old (initial) point
24 | let x, y;
25 |
26 | // New point
27 | let newX, newY;
28 |
29 | // Colors
30 | let black = 10;
31 | let white = 255;
32 |
33 | // Setup
34 | function setup() {
35 | createCanvas(windowWidth, windowHeight);
36 | background(black);
37 | x = width / 2;
38 | y = height / 2;
39 | noCursor();
40 | }
41 |
42 | // Draw
43 | function draw() {
44 | strokeWeight(0.12);
45 | stroke(white);
46 |
47 | let radius = random(
48 | windowHeight > windowWidth ? windowWidth / 2.5 : windowHeight / 2.5
49 | );
50 | let a = random(TWO_PI);
51 |
52 | newX = width / 2 + cos(a) * radius; // will be within circle radius
53 | newY = height / 2 + sin(a) * radius; // will be within circle radius
54 | line(x, y, newX, newY);
55 | x = newX;
56 | y = newY;
57 | }
58 |
59 | // Reset
60 | function mouseClicked() {
61 | background(black);
62 | }
63 |
64 | // Resize
65 | function windowResized() {
66 | resizeCanvas(window.innerWidth, window.innerHeight);
67 | background(black);
68 | }
69 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # interwoven oversemantization
2 |
3 | 
4 |
5 | A circle created dynamically by random lines.
6 |
7 | ## Info
8 |
9 | - Resets every 10 minutes
10 | - Resets on click
11 | - Title and artist's name disappear after 14 seconds
12 |
13 | ## Technologies Used
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | ## Description
25 |
26 | A line is drawn from a point in the center of the canvas to a random point located inside an imaginary circle. Then a new line is drawn from the previous random point to a new random point, still located inside an imaginary circle.
27 |
28 | The process is repeaded indefinitely and, using trigonometry and magic, a circle starts to form.
29 |
30 | It is housed in a simple HTML page, with some essential CSS.
31 |
32 | ## Screenshots
33 |
34 | 
35 |
36 | 
37 |
38 | 
39 |
40 | ## Disclaimer
41 |
42 | Copyright (c) 2023 Michael Kolesidis - https://michaelkolesidis.com/
43 |
44 | I am the sole copyright owner of this Work.
45 |
46 | Reproduction of any of the artwork on this website for commercial use
47 | is not permitted without first receiving written permission from the artist.
48 | You cannot host, display, distribute or share this Work in any form,
49 | including physical and digital. You cannot use this Work in any
50 | commercial or non-commercial product, website or project. You cannot
51 | sell this Work and you cannot mint an NFTs of it.
52 |
53 | Under the Copyright Law, it is fair use to reproduce a single copy for personal
54 | or educational purposes, provided that no changes are made to the content and
55 | provided that a copyright notice attesting to the content is attached to the
56 | reproduction. Beyond that, no further copies of works of art may be made or
57 | distributed on this website without written permission.
58 |
--------------------------------------------------------------------------------
/script/main.js:
--------------------------------------------------------------------------------
1 | // Author: Michael Kolesidis
2 | // Title: interwoven oversemantization
3 |
4 | // Copyright (c) 2023 Michael Kolesidis - https://michaelkolesidis.com/
5 | // I am the sole copyright owner of this Work.
6 |
7 | // Reproduction of any of the artwork on this website
8 | // for commercial use is not permitted without first
9 | // receiving written permission from the artist. You
10 | // cannot host, display, distribute or share this Work
11 | // in any form, including physical and digital. You
12 | // cannot use this Work in any commercial or non-commercial
13 | // product, website or project. You cannot sell this Work and
14 | // you cannot mint an NFTs of it.
15 |
16 | // Under the Copyright Law, it is fair use to reproduce a single
17 | // copy for personal or educational purposes, provided that no
18 | // changes are made to the content and provided that a copyright
19 | // notice attesting to the content is attached to the reproduction.
20 | // Beyond that, no further copies of works of art may be made or
21 | // distributed on this website without written permission.
22 |
23 | // Title
24 | const title = document.createElement("h1");
25 | title.innerHTML = `interwoven oversemantization`;
26 | document.body.appendChild(title);
27 |
28 | // Fast timer
29 | const time = document.createElement("p");
30 | time.setAttribute("id", "top-right");
31 | time.innerHTML = `00:00:00`;
32 | document.body.appendChild(time);
33 |
34 | function formatTime(time) {
35 | let formattedTime, hours, minutes, seconds;
36 | hours = Math.floor(time / 3600);
37 | minutes = Math.floor((time - hours * 3600) / 60);
38 | seconds = Math.floor(time - hours * 3600 - minutes * 60);
39 | seconds = time - hours * 3600 - minutes * 60;
40 | if (hours < 10) {
41 | hours = "0" + hours;
42 | }
43 | if (minutes < 10) {
44 | minutes = "0" + minutes;
45 | }
46 | if (seconds < 10) {
47 | seconds = "0" + seconds;
48 | }
49 | formattedTime = `${hours}:${minutes}:${seconds}`;
50 | return formattedTime;
51 | }
52 |
53 | let startTime = new Date();
54 | const render = () => {
55 | let currentTime = new Date();
56 | // let timePassed = (currentTime - startTime) / 1000;
57 | let timePassed = currentTime - startTime;
58 | console.log(timePassed);
59 | if (timePassed > 420000) {
60 | // 6 minutes (6 * 60 * 1000)
61 | window.location.reload();
62 | }
63 |
64 | let formattedTime = formatTime(timePassed);
65 | time.innerHTML = `${formattedTime}`;
66 | window.requestAnimationFrame(render);
67 | };
68 | render();
69 |
70 | // Footer
71 | const footer = document.createElement("footer");
72 | footer.innerHTML = `
18 |
19 | 
20 |
21 | 
22 |
23 |
24 | ## Description
25 |
26 | A line is drawn from a point in the center of the canvas to a random point located inside an imaginary circle. Then a new line is drawn from the previous random point to a new random point, still located inside an imaginary circle.
27 |
28 | The process is repeaded indefinitely and, using trigonometry and magic, a circle starts to form.
29 |
30 | It is housed in a simple HTML page, with some essential CSS.
31 |
32 | ## Screenshots
33 |
34 | 
35 |
36 | 
37 |
38 | 
39 |
40 | ## Disclaimer
41 |
42 | Copyright (c) 2023 Michael Kolesidis - https://michaelkolesidis.com/
43 |
44 | I am the sole copyright owner of this Work.
45 |
46 | Reproduction of any of the artwork on this website for commercial use
47 | is not permitted without first receiving written permission from the artist.
48 | You cannot host, display, distribute or share this Work in any form,
49 | including physical and digital. You cannot use this Work in any
50 | commercial or non-commercial product, website or project. You cannot
51 | sell this Work and you cannot mint an NFTs of it.
52 |
53 | Under the Copyright Law, it is fair use to reproduce a single copy for personal
54 | or educational purposes, provided that no changes are made to the content and
55 | provided that a copyright notice attesting to the content is attached to the
56 | reproduction. Beyond that, no further copies of works of art may be made or
57 | distributed on this website without written permission.
58 |
--------------------------------------------------------------------------------
/script/main.js:
--------------------------------------------------------------------------------
1 | // Author: Michael Kolesidis
2 | // Title: interwoven oversemantization
3 |
4 | // Copyright (c) 2023 Michael Kolesidis - https://michaelkolesidis.com/
5 | // I am the sole copyright owner of this Work.
6 |
7 | // Reproduction of any of the artwork on this website
8 | // for commercial use is not permitted without first
9 | // receiving written permission from the artist. You
10 | // cannot host, display, distribute or share this Work
11 | // in any form, including physical and digital. You
12 | // cannot use this Work in any commercial or non-commercial
13 | // product, website or project. You cannot sell this Work and
14 | // you cannot mint an NFTs of it.
15 |
16 | // Under the Copyright Law, it is fair use to reproduce a single
17 | // copy for personal or educational purposes, provided that no
18 | // changes are made to the content and provided that a copyright
19 | // notice attesting to the content is attached to the reproduction.
20 | // Beyond that, no further copies of works of art may be made or
21 | // distributed on this website without written permission.
22 |
23 | // Title
24 | const title = document.createElement("h1");
25 | title.innerHTML = `interwoven oversemantization`;
26 | document.body.appendChild(title);
27 |
28 | // Fast timer
29 | const time = document.createElement("p");
30 | time.setAttribute("id", "top-right");
31 | time.innerHTML = `00:00:00`;
32 | document.body.appendChild(time);
33 |
34 | function formatTime(time) {
35 | let formattedTime, hours, minutes, seconds;
36 | hours = Math.floor(time / 3600);
37 | minutes = Math.floor((time - hours * 3600) / 60);
38 | seconds = Math.floor(time - hours * 3600 - minutes * 60);
39 | seconds = time - hours * 3600 - minutes * 60;
40 | if (hours < 10) {
41 | hours = "0" + hours;
42 | }
43 | if (minutes < 10) {
44 | minutes = "0" + minutes;
45 | }
46 | if (seconds < 10) {
47 | seconds = "0" + seconds;
48 | }
49 | formattedTime = `${hours}:${minutes}:${seconds}`;
50 | return formattedTime;
51 | }
52 |
53 | let startTime = new Date();
54 | const render = () => {
55 | let currentTime = new Date();
56 | // let timePassed = (currentTime - startTime) / 1000;
57 | let timePassed = currentTime - startTime;
58 | console.log(timePassed);
59 | if (timePassed > 420000) {
60 | // 6 minutes (6 * 60 * 1000)
61 | window.location.reload();
62 | }
63 |
64 | let formattedTime = formatTime(timePassed);
65 | time.innerHTML = `${formattedTime}`;
66 | window.requestAnimationFrame(render);
67 | };
68 | render();
69 |
70 | // Footer
71 | const footer = document.createElement("footer");
72 | footer.innerHTML = `