const segment_size = 50; const angle = 2.5; const phase_step = 0.3; const wobble_amount = 0.8; const speed = 4.0; const width = 600; const height = 600; let seconds = 0; let tail_pieces = []; function setup() { createCanvas(width, height); tail_pieces = Array.from({ length: 10 }, (_, i) => ({ img: loadImage('images/tail_piece.png'), x: null, y: null })); tail_pieces.push({ img: loadImage('images/tail_hook.png'), x: null, y: null }); } function draw() { clear(); seconds += 0.01; let x = width - (segment_size * 2); let y = height - (segment_size * 2); tail_pieces.forEach(function(p, index, arr) { p.x = x; p.y = y; const temp_angle = angle + wobble_amount * Math.sin(index * phase_step + seconds * speed); x += segment_size * Math.cos(temp_angle) y -= segment_size * Math.sin(temp_angle) }); tail_pieces.filter((p,index) => index % 2 === 0 && image(p.img, p.x, p.y)); tail_pieces.filter((p,index) => index % 2 === 1 && image(p.img, p.x, p.y)); }
Dominic Myers writes about all sorts of stuff to do with HTML, CSS, JavaScript and a fair chunk of self-indulgent stuff. Thoughts and opinions are all his own, and nothing to do with any employer.
Saturday, 23 March 2019
p5 TAIL
After my last post, I got to work on another Wireframe conversion from Python to JS using p5, this one is from issue 6:
This is the code, simple eh? I did need a wee bit of help from Paweł Dawczak as I'm not totally au fait with the vagaries of Python.
Labels:
JavaScript
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment