/*
// Template for KidzLabs/4M/Toysmith Animation Praxinoscope
// https://www.amazon.com/4M-3474-Animation-Praxinoscope/dp/B000P02HYC
// https://www.walmart.com/ip/Animation-Praxinoscope-Science-Kits-by-Toysmith-3474/45681503
// Developed for p5.js, September 2018 * Golan Levin
*/
var inch = 72.0;
var diamArtInner = inch * 1.50;
var diamArtOuter = inch * 4.80;
var diamCutInner = inch * 1.41;
var diamCutOuter = inch * 4.875;
var holeDy = inch * 0.23;
var holeDx = inch * 0.20;
var holeD = inch * 0.1;
var nFrames = 10;
var myFrameCount = 0;
var exportFrameCount = 0;
var bAnimate = true;
var bExportFrameImages = false;
var bRecordingSinglePNG = false;
//-------------------------------------------------------
function setup() {
createCanvas(792, 612); // 11x8.5" at 72DPI
frameRate(20);
smooth();
}
//-------------------------------------------------------
function draw() {
background(240);
// Do all the drawing.
push();
translate(width/2, height/2);
drawCutLines();
drawGuides();
drawAllFrames();
pop();
if (bExportFrameImages){
// Note that myFrameCount is incremented elsewhere.
var filename = "myZoetrope_" + nf(myFrameCount,2) + ".png";
saveCanvas(filename, 'png');
if (myFrameCount >= nFrames){
bExportFrameImages = false;
}
}
if (bRecordingSinglePNG) {
saveCanvas('myPraxinoscope.png', 'png');
bRecordingSinglePNG = false;
}
}
//-------------------------------------------------------
function mouseClicked() {
console.log(mouseX, mouseY);
}
function keyPressed() {
switch (key) {
case ' ':
// Press spacebar to pause/unpause the animation.
bAnimate = !bAnimate;
break;
case 'p':
case 'P':
// Press 'p' to export a single PNG for the Zoetrope.
// Note: This is for 17x11" paper!
// Be sure to print at 100%!
bRecordingSinglePNG = true;
break;
case 'f':
case 'F':
// Press 'f' to export multiple frames
// (in order to make an animated .GIF)
// such as with http://gifmaker.me/
myFrameCount = 0;
exportFrameCount = 0;
bExportFrameImages = true;
bAnimate = true;
break;
}
}
//-------------------------------------------------------
function drawCutLines() {
fill(0);
textAlign(CENTER, BOTTOM);
text("Praxinoscope Template", 0, 0-diamCutOuter/2-6);
stroke(250);
strokeWeight(1.0);
if (bRecordingSinglePNG) {
fill(0);
}
ellipse(0, 0, diamCutOuter, diamCutOuter);
if (bRecordingSinglePNG) {
fill(0);
}
ellipse(0, 0, diamCutInner, diamCutInner);
fill(255);
ellipse(diamCutOuter/2 - holeDx, 0-holeDy, holeD, holeD);
stroke(240)
line (diamCutInner/2, 0, diamCutOuter/2, 0);
}
//-------------------------------------------------------
function drawGuides() {
// This function draws the guidelines.
// Don't draw these when we're exporting the PNG.
if (!bRecordingSinglePNG) {
noFill();
stroke(128);
strokeWeight(0.2);
ellipse(0, 0, diamArtInner, diamArtInner);
ellipse(0, 0, diamArtOuter, diamArtOuter);
for (var i=0; i<nFrames; i++) {
var angle = map(i, 0, nFrames, 0, TWO_PI);
var pxi = diamArtInner/2 * cos(angle);
var pyi = diamArtInner/2 * sin(angle);
var pxo = diamArtOuter/2 * cos(angle);
var pyo = diamArtOuter/2 * sin(angle);
stroke(128);
strokeWeight(0.2);
line (pxi, pyi, pxo, pyo);
}
// Draw the red wedge outline, highlighting the main view.
// var redWedge = 7; // assuming nFrames = 10
// for (var i=redWedge; i<=(redWedge+1); i++) {
// var angle = map(i, 0, nFrames, 0, TWO_PI);
// var pxi = diamArtInner/2 * cos(angle);
// var pyi = diamArtInner/2 * sin(angle);
// var pxo = diamArtOuter/2 * cos(angle);
// var pyo = diamArtOuter/2 * sin(angle);
// stroke(255, 0, 0);
// strokeWeight(2.0);
// line (pxi, pyi, pxo, pyo);
// }
// noFill();
// stroke(255, 0, 0);
// strokeWeight(2.0);
// var startAngle = redWedge*TWO_PI/nFrames;
// var endAngle = (redWedge+1)*TWO_PI/nFrames;
// arc(0, 0, diamArtInner, diamArtInner, startAngle, endAngle);
// arc(0, 0, diamArtOuter, diamArtOuter, startAngle, endAngle);
for (var i=0; i<nFrames; i++) {
var angle = map(i, 0, nFrames, 0, TWO_PI);
push();
rotate(angle);
var originY = ((diamArtOuter + diamArtInner)/2)/2;
translate(0, 0-originY);
noFill();
stroke(128);
strokeWeight(0.2);
line (-inch/2, 0, inch/2, 0);
line (0, -inch/2, 0, inch/2);
pop();
}
}
}
//-------------------------------------------------------
function drawAllFrames() {
for (var i=0; i<nFrames; i++) {
var angle = map(i, 0, nFrames, 0, TWO_PI);
var originY = ((diamArtOuter + diamArtInner)/2)/2;
push();
rotate(angle);
translate(0, 0-originY);
scale(0.8, 0.8); // feel free to ditch this
var whichFrame = i;
if (bAnimate) {
whichFrame = (i+myFrameCount)%nFrames;
}
drawArtFrame (whichFrame);
// drawArtFrameAlternate (whichFrame);
pop();
}
myFrameCount++;
}
//-------------------------------------------------------
function drawArtFrame ( whichFrame ) {
// Draw the artwork for a generic frame of the Praxinoscope,
// given the framenumber (whichFrame) out of nFrames.
// NOTE #1: The "origin" for the frame is in the center of the wedge.
// NOTE #2: Remember that everything will appear upside-down!
// Draw the frame number
fill(0);
noStroke();
textAlign(CENTER, CENTER);
text (whichFrame, 0, -45);
// Draw eyes
fill(255);
stroke(255);
strokeWeight(1);
ellipse(-18, -48, 28,28);
ellipse(18, -48, 28,28);
ellipse(0,-33,15,10);
//draw eye balls
fill(0);
noStroke();
var xAxis = map(whichFrame, 0,nFrames, 0,PI)
arc(sin(xAxis)*16-18-14+6, -48, 12,12,PI/6,(11*PI)/6, PIE);
arc(sin(xAxis)*16-18-14+6+36 , -48, 12,12,PI/6,(11*PI)/6, PIE);
//clock
fill(255);
stroke(255);
rect(-25,-23, 50, 70, 10);
//clock tix
stroke(0);
strokeWeight(2 );
line (0, -13, 0, -18);
line (0, -13, 0, -18);
line (0, 35, 0, 40);
line (-18,12, -13,12);
line (18,12, 13,12);
//whiskers
stroke(255)
line (-20,-30, -45,-35);
line (-20,-25, -45,-20);
line (20,-30, 45,-35);
line (20,-25, 43,-20);
// Draw some rotating spokes
var cx = 0;
var cy = 12;
var u = 0 - map(whichFrame, 0, nFrames, 0, 1);
var sx = cx + 15 * cos(u * TWO_PI);
var sy = cy + 15 * sin(u* TWO_PI);
stroke(0);
line (cx, cy, sx, sy);
var dx = 0;
var dy = 12;
var u2 = 0 - map(whichFrame, 0, nFrames/2, 0, 1);
var vx = dx + 20 * cos(u2 * (TWO_PI+1.2));
var vy = dy + 20 * sin(u2* (TWO_PI+1.2));
stroke(0);
strokeWeight(1);
line (dx, dy, vx, vy);
} |
