Skip to content

Commit

Permalink
modified: index.html
Browse files Browse the repository at this point in the history 
	modified:   script.js
	modified:   styles.css
  • Loading branch information
@Demothedread
Demothedread committed May 3, 2024
1 parent 6d8ae8c commit c1371ac
Show file tree
Hide file tree
Showing 7 changed files with 236 additions and 269 deletions.
Binary file added .DS_Store
View file
Binary file not shown.
14 changes: 14 additions & 0 deletions .vscode/launch.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Open index.html",
"file": "/Users/jreback/circes/index.html"
}
]
}
8 changes: 0 additions & 8 deletions circes.code-workspace
View file

This file was deleted.

34 changes: 34 additions & 0 deletions filephotoorganize.py
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import os
import subprocess
from datetime import datetime

def organize_and_rename_files(folder_path):
for file in os.listdir(folder_path):
file_path = os.path.join(folder_path, file)

# Check if the file is a regular file
if os.path.isfile(file_path):
# Determine the file type (Raw or JPEG)
file_extension = os.path.splitext(file)[-1].lower()
file_type = "Raw" if file_extension == ".raw" else "JPEG" if file_extension in [".jpg", ".jpeg"] else "Other"

# Get creation time of the file using ExifTool
creation_date_output = subprocess.run(["exiftool", "-s", "-s", "-s", "-CreateDate", file_path], capture_output=True, text=True)
creation_date = creation_date_output.stdout.strip()

if creation_date:
# Parse creation date
creation_date_obj = datetime.strptime(creation_date, "%Y:%m:%d %H:%M:%S")

# Rename the file with specific format
new_name = f"Matisen_LosAngeles_SMPier_[{creation_date_obj.strftime('%m%Y_%H%M%S')}]"
new_file_path = os.path.join(folder_path, f"{new_name}{file_extension}")
os.rename(file_path, new_file_path)

print(f"File {file} renamed to {new_name}{file_extension} and organized as {file_type}")
else:
print(f"Error: Unable to extract creation date for file {file}")

# Example usage:
folder_path = "/path/to/folder"
organize_and_rename_files(folder_path)
13 changes: 7 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>hoc omnia nihil est Canvas</title>
</head>
<body>
<div class="container">
<h1 class="large-title">"HOC OMNIA || NIHIL EST"</h1>
<h1>HOC OMNIA || NIHIL EST</h1>
</div>

<!-- Canvas for drawing the Mondrian-inspired artwork -->
<canvas id="mondrianCanvas"></canvas>

<!-- Container for interactive buttons -->
<div id="buttonContainer">
<button id="galleryButton">Gallery</button>
<button id="resumeButton">Resume</button>
<button id="publicationsButton">Publications</button>
<button id="aboutButton">About</button>
</div>
<button class="animate__animated">Gallery</button>
<button class="animate__animated">Resume</button>
<button class="animate__animated">Publications</button>
<button class="animate__animated">About</button>
</div>

<!-- Script for managing the canvas and interactions -->
<script src="script.js"></script>
Expand Down
209 changes: 87 additions & 122 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,46 @@ document.addEventListener('DOMContentLoaded', () => {
let lines = [];
let shapes = [];

// Adjusts the canvas size and re-initializes the drawing
function adjustCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight - 50; // Account for banner
canvas.height = window.innerHeight - 100; // Account for banner
init();
}

// Initializes the Mondrian drawing
function init() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
lines = drawRandomLines();
shapes = generateShapes(canvas.width, canvas.height, 5, 10, lines); // Ensuring at least 6 shapes
assignColorsToShapes(shapes);
drawShapes(shapes, ctx);
shapes = generateShapes(canvas.width, canvas.height, 5, 10, lines);
assignColorsToShapes(shapes);
drawShapes(shapes, ctx);
placebuttons(shapes);

setupGalleryModal(shapes); // Adjusted to call a setup function
}

function drawRandomLines() {
let lines = [];
const numLines = Math.floor(Math.random() * 10) + 5; // Random number of lines between 5 and 15
for (let i = 0; i < numLines; i++) {
let lineOrientation = Math.random() < 0.5 ? 'vertical' : 'horizontal';
let lineThickness = Math.floor(Math.random() * (8 - 1) + 1) * 2; // 2-16 at intervals of 2
let position = Math.random() * (lineOrientation === 'vertical' ? canvas.width : canvas.height);

ctx.strokeStyle = 'black';
ctx.lineWidth = lineThickness;
ctx.beginPath();
if (lineOrientation === 'vertical') {
ctx.moveTo(position, 0);
ctx.lineTo(position, canvas.height);
} else {
ctx.moveTo(0, position);
ctx.lineTo(canvas.width, position);
let lines = [];
const numLines = Math.floor(Math.random() * 10) + 5;
for (let i = 0; i < numLines; i++) {
let lineOrientation = Math.random() < 0.5 ? 'vertical' : 'horizontal';
let lineThickness = Math.floor(Math.random() * 7 + 1) * 2;
let position = Math.random() * (lineOrientation === 'vertical' ? canvas.width : canvas.height);

ctx.strokeStyle = 'black';
ctx.lineWidth = lineThickness;
ctx.beginPath();
if (lineOrientation === 'vertical') {
ctx.moveTo(position, 0);
ctx.lineTo(position, canvas.height);
} else {
ctx.moveTo(0, position);
ctx.lineTo(canvas.width, position);
}
ctx.stroke();

lines.push({orientation: lineOrientation, position, thickness: lineThickness});
}
ctx.stroke();

lines.push({ orientation: lineOrientation, position, thickness: lineThickness });
return lines;
}
return lines;
}

function generateShapes(maxWidth, maxHeight, minShapes, maxShapes, lines) {
const shapes = [];
const maxAttempts = 1000;
Expand All @@ -56,17 +53,16 @@ document.addEventListener('DOMContentLoaded', () => {
while (shapes.length < targetShapeCount && attempts < maxAttempts) {
attempts++;
let newShape = generateRandomSizeShape(maxWidth, maxHeight);

if (isValidShape(newShape, lines)) {
newShape.id = `shape-${shapes.length}`; // Assign an id to the shape
newShape.id = `shape-${shapes.length}`; // Assign an ID to the shape for easy access
shapes.push(newShape);
}
}
return shapes;
}

function isValidShape(shape, lines) {
// Check for non-overlapping with lines
let overlaps = lines.some(line => {
if (line.orientation === 'vertical') {
return (shape.x < line.position + line.thickness && shape.x + shape.width > line.position);
Expand All @@ -79,7 +75,6 @@ document.addEventListener('DOMContentLoaded', () => {
return false; // If any overlap exists, the shape is invalid
}

// Check for touch on at least two sides (one vertical and one horizontal line)
const touchesVerticalLine = lines.some(line => line.orientation === 'vertical' &&
(shape.x === line.position || shape.x + shape.width === line.position + line.thickness));
const touchesHorizontalLine = lines.some(line => line.orientation === 'horizontal' &&
Expand All @@ -89,7 +84,7 @@ document.addEventListener('DOMContentLoaded', () => {
}

function generateRandomSizeShape(maxWidth, maxHeight) {
const minSize = 50; // Fixed minimum size to avoid very small shapes
const minSize = 10; // Set a minimum size to avoid very small shapes
let width = Math.random() * (maxWidth / 4 - minSize) + minSize;
let height = Math.random() * (maxHeight / 4 - minSize) + minSize;
let x = Math.random() * (maxWidth - width);
Expand All @@ -98,103 +93,73 @@ document.addEventListener('DOMContentLoaded', () => {
return { x, y, width, height };
}


// Use this function in your shape creation loop to ensure all shapes meet these position criteria.

function assignColorsToShapes(shapes) {
const colors = [
{color: '#FF4136', probability: 0.3}, // Firehouse Red
{color: '#FFD700', probability: 0.3}, // Pure Yellow
{color: '#0074D9', probability: 0.3}, // Blue
{color: '#2ECC40', probability: 0.1} // Green
];

// Calculate cumulative probabilities for random picking
let cumulativeProbability = 0;
let cumulativeProbArray = colors.map(color => {
cumulativeProbability += color.probability;
return cumulativeProbability;
});

// Assigning colors to shapes based on calculated probabilities
shapes.forEach(shape => {
let randomProb = Math.random();
let chosenColor = colors[cumulativeProbArray.findIndex(prob => randomProb <= prob)].color;
shape.color = chosenColor; // Assign the color directly to the shape object
});

// Optionally, you might want to draw or fill these shapes here or in another function.
function assignColorsToShapes(shapes) {
const colors = [
{color: '#FF4136', probability: 0.3}, // Firehouse Red
{color: '#FFD700', probability: 0.3}, // Pure Yellow
{color: '#0074D9', probability: 0.3}, // Blue
{color: '#2ECC40', probability: 0.1} // Green
];

let cumulativeProbability = 0;
let cumulativeProbArray = colors.map(color => {
cumulativeProbability += color.probability;
return cumulativeProbability;
});

shapes.forEach(shape => {
let randomProb = Math.random();
let chosenColor = colors[cumulativeProbArray.findIndex(prob => randomProb <= prob)].color;
shape.color = chosenColor; // Assign the color directly to the shape object
});
}

function drawShapes(shapes, ctx) {
shapes.forEach(shape => {
ctx.fillStyle = shape.color; // Use the color assigned in the assignColorsToShapes function
ctx.fillStyle = shape.color; // Use the assigned color
ctx.fillRect(shape.x, shape.y, shape.width, shape.height); // Draw the rectangle
});
}

}

function placebuttons(shapes) {
// Select five random shapes to place the buttons on
const selectedShapes = [];
for (let i = 0; i < 5; i++) {
const randomIndex = Math.floor(Math.random() * shapes.length);
selectedShapes.push(shapes[randomIndex]);
}
function setupGalleryModal() {
const galleryModal = document.createElement('div');
galleryModal.className = 'gallery-modal';
const galleryContent = document.createElement('div');
galleryContent.className = 'gallery-content';
const span = document.createElement('span');
span.className = 'close-button';
span.innerHTML = '&times;';
span.onclick = function() { galleryModal.style.display = "none"; };
galleryModal.appendChild(galleryContent);
galleryContent.appendChild(span);

// Create a button for each selected shape
selectedShapes.forEach((shape) => {
const button = document.createElement('button');
button.className = 'shape-button';
button.style.position = 'absolute';
button.style.left = `${shape.x + shape.width / 2}px`;
button.style.top = `${shape.y + shape.height / 2}px`;
document.body.appendChild(galleryModal);

// Add the button to the DOM
document.body.appendChild(button);
// Listen for clicks on the canvas, and open the gallery if a shape is clicked
canvas.addEventListener('click', function(event) {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;

shapes.forEach(shape => {
if (x > shape.x && x < shape.x + shape.width && y > shape.y && y < shape.y + shape.height) {
const img = document.createElement('img');
img.className = 'fade-in';
img.style.width = '100%';
img.src = 'images/Firefly_promo.jpg'; // Adjusted path
galleryContent.appendChild(img);
galleryModal.style.display = "block";
galleryContent.replaceChild(img, galleryContent.firstChild.nextSibling); // Replace the existing image if one exists
}
});
});
}



window.addEventListener('resize', adjustCanvas);
adjustCanvas(); // Initial setup
});

// Remove one of the DOMContentLoaded event listeners
document.addEventListener('DOMContentLoaded', () => {
const galleryModal = document.createElement('div');
galleryModal.className = 'gallery-modal';
const galleryContent = document.createElement('div');
galleryContent.className = 'gallery-content';
const span = document.createElement('span');
span.className = 'close-button';
span.innerHTML = '&times;';
span.onclick = function() {
galleryModal.style.display = "none";
};
adjustCanvas();

galleryModal.appendChild(galleryContent);
galleryContent.appendChild(span);

const img = document.createElement('img');
img.className = 'fade-in'; // Apply fade-in effect
img.style.width = '100%';
// Example image, replace src
img.src = '/Users/jreback/circes/images/HocOmnia_Logo.png';
galleryContent.appendChild(img);

document.body.appendChild(galleryModal);

// Allow multiple images by linking additional next/back navigation, and handling how to update the img's src attribute.

// Example usage from common shape color fill handler onClick.
shapes.forEach(shape => {
// Detect click on shape
document.getElementById(shape.id).addEventListener('click', () => {
// Show image, update with actual URL or local data
img.src = '/Users/jreback/circes/images/Firefly promo stills for a futuristic joyful flying cruise-ship Zeppelin, with multiple pools, minig.jpg'; // Adjust SRC on Click or by shape
galleryModal.style.display = "block";
});
});
window.addEventListener('load', () => {
const canvas = document.getElementById('mondrianCanvas');
canvas.classList.add('animate__animated', 'animate__fadeIn'); // Fades in the canvas on load
});
});

init(); // Call the init function directly
Loading

0 comments on commit c1371ac

Please sign in to comment.