tom/personal_site
1
0
Fork 0
mirror of https://github.com/TomHodson/tomhodson.github.com.git synced 2025-06-26 10:01:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Tom Hodson 2020-11-16 12:07:28 +01:00
parent a52b102a84
commit 8009590c18
5 changed files with 53 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
HappyBirthdaySophie/birthday.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

7
HappyBirthdaySophie/index.html
View File

@ -1,14 +1,15 @@
<!DOCTYPE html><html lang="en"><head> <!DOCTYPE html><html lang="en"><head>
<script src="p5.js"></script> <script src="p5.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<script src="sketch.js"></script>
</head> </head>
<body> <body>
<script src="sketch.js"></script> <div id="sketch-holder">
<!-- Our sketch will go here! -->
</div>
</body></html> </body></html>

3
HappyBirthdaySophie/p5.sound.min.js vendored
View File

File diff suppressed because one or more lines are too long

83
HappyBirthdaySophie/sketch.js
View File

@ -1,19 +1,28 @@
let w = 200; let w = 200;
let stepsize = 10; let stepsize = 1;
let Nwalkers = 1; let Nwalkers = 100;
let fr = 1; let fr = 100;
let cw = 400; let cw = 500;
let canvas, src, pg; let canvas, src, pg;
function proposal(pos) { let walkerpos = []
let transparent;
function proposal(pos) {}
let img;
function preload() {
img = loadImage('birthday.png');
} }
/*
class Walker { class Walker {
constructor() { constructor() {
this.pos = createVector(w/2, w/2); this.pos = createVector(width, height);
} }
//draw the walker //draw the walker
draw(ctx) { draw(ctx) {
@ -27,11 +36,11 @@ class Walker {
if (mouseIsPressed) { if (mouseIsPressed) {
let tomouse = createVector(this.pos.x - mouseX, this.pos.y - mouseY); let tomouse = createVector(this.pos.x - mouseX, this.pos.y - mouseY);
let mouse = p5.Vector.dot(tomouse, prop) / prop.mag() / tomouse.mag() let mouse = p5.Vector.dot(tomouse, prop) / prop.mag() / tomouse.mag()
console.log('l, mouse:', l, mouse); //console.log('l, mouse:', l, mouse);
return l + mouse; return l + mouse;
} }
console.log('l:', l); //console.log('l:', l);
return l; return l;
} }
@ -60,50 +69,40 @@ class Walker {
} }
} }
*/
function setup() { function setup() {
console.log('canvas has size: ', cw, cw);
canvas = createCanvas(cw, cw); canvas = createCanvas(cw, cw);
pixelDensity(1); canvas.parent('sketch-holder');
let d = pixelDensity(); //pixelDensity(1);
//let d = pixelDensity();
frameRate(fr); frameRate(fr);
src = createGraphics(w, w); overlay = createGraphics(windowWidth, windowHeight);
src.pixelDensity(1); overlay.pixelDensity(1);
src.textAlign(CENTER, CENTER); overlay.background(255);
src.background(255);
src.textSize(6.5 * w/50);
src.text("Happy Birthday\n Sophie!", w/2, w/2);
src.loadPixels();
dest = createGraphics(w, w);
dest.pixelDensity(1);
dest.background(255);
pg = createGraphics(w, w);
pg.pixelDensity(1);
pg.background(255);
colorMode(HSL); colorMode(HSL);
transparent = color(1,1,1,0);
image(pg, 0, 0, cw, cw);
walkers = []; walkers = [];
for(let i = 0; i < Nwalkers; i += 1) { for(let i = 0; i < Nwalkers; i += 1) {
append(walkers, new Walker()); append(walkerpos, createVector(random(width), random(height)));
} }
} }
function draw() { function draw() {
pg.reset(); background(255);
pg.background(255); image(img, 0, 0);
image(overlay, 0, 0)
walkers.forEach(function(w) {
w.step(src);
w.leaveFootstep(dest); for(let i = 0; i < Nwalkers; i += 1) {
w.draw(pg); walkerpos[i].add(p5.Vector.random2D().mult(stepsize));
}); circle(walkerpos[i].x, walkerpos[i].y, 5);
overlay.set(walkerpos[i].x, walkerpos[i].y, transparent);
image(src, 0, 0, cw, cw) }
image(dest, 0, 0, cw, cw); overlay.updatePixels();
image(pg, 0, 0, cw, cw);
} }

10
HappyBirthdaySophie/style.css
View File

@ -2,6 +2,12 @@ html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
canvas {
display: block; #sketch-holder {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 500px;
} }