Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Bookshelf (Animated)
ID	5357181346529280
Created	5 years ago, 1580820835593
Updated	5 years ago, 1599002298487
Code	/ View my other projects here / //https://www.khanacademy.org/profile/grantjenkins/projects / Subscribe to me here / //https://www.khanacademy.org/cs/gray-wolf/4876588413698048 /* Project Bookshelf Gray Wolf, February 2020 - working clock - steaming coffee - screensaver (move the mouse over the screen) - mouse :) -------------------------------------------------- If you take a spin off, go into settings and change the height to 600, save, then refresh your page -------------------------------------------------- / var colorDark = color(100); var colorWhite = color(236, 237, 242); var drawColors = [color(14, 140, 152), color(31, 163, 176), color(143, 188, 194)]; var colorBackground = color(129, 202, 208); var getRandomColor = function() { return color(random(50, 200), random(0, 150), random(0, 150)); }; var bookShelfX = 70; var bookShelfY = 120; var bookShelfHeight = 120; var booksOnDeskX = 140; //book object arrays var booksOnShelf = [ { title: "Les Miserables", author: "Victor Hugo", color: getRandomColor(), h: 92, w: 20 }, { title: "Hard Times", author: "Charles Dickens", color: getRandomColor(), h:80, w: 22 }, { title: "Paradise Lost", author: "John Milton", color: getRandomColor(), h:88, w: 22 }, { title: "Miracles", author: "C.S.\nLewis", color: getRandomColor(), h:70, w: 20 }, { title: "Oliver Twist", author: "Charles Dickens", color: getRandomColor(), h:80, w: 22 }, { title: "Frankenstein", author: "Mary Shelly", color: getRandomColor(), h:85, w: 18 }, { title: "Dracula", author: "Bram Stoker", color: getRandomColor(), h:75, w: 18 }, { title: "The Hobbit", author: "J.R.R. Tolkien", color: getRandomColor(), h:80, w: 20 }, { title: "The BFG", author: "Roald Dahl", color: getRandomColor(), h:75, w: 17 }, { title: "Esio Trot", author: "Roald Dahl", color: getRandomColor(), h:75, w: 20 }, { title: "The Witches", author: "Roald Dahl", color: getRandomColor(), h:85, w: 20 } ]; var booksOnShelf2 = [ { title: "Little Women", author: "Louisa May", color: getRandomColor(), h: 90, w: 20 }, { title: "Moby Dick", author: "Herman Melville", color: getRandomColor(), h:80, w: 22 }, { title: "Fahrenheit 451", author: "Ray Bradbury", color: getRandomColor(), h:92, w: 22 }, { title: "Catch 22", author: "Joseph Heller", color: getRandomColor(), h:70, w: 20 }, { title: "War and Peace", author: "Leo Tolstoy", color: getRandomColor(), h:95, w: 22 }, { title: "Emma", author: "Jane Austen", color: getRandomColor(), h:70, w: 18 }, { title: "Animal Farm", author: "George Orwell", color: getRandomColor(), h:85, w: 18 }, { title: "Beloved", author: "Toni Morrison", color: getRandomColor(), h:80, w: 20 }, { title: "Middlemarch", author: "George Eliot", color: getRandomColor(), h:85, w: 17 }, { title: "The Iliad", author: "Homer", color: getRandomColor(), h:75, w: 17 }, { title: "Ulysses", author: "James Joyce", color: getRandomColor(), h:85, w: 20 } ]; var booksOnDesk = [color(63, 114, 153), color(43, 158, 70), color(138, 38, 103)]; var screensaverTimer = 0; var Ball = function() { this.x = random(250, 350); this.y = random(300, 340); this.xDir = random() > 0.5 ? 1 : -1; this.yDir = random() < 0.5 ? 1 : -1; this.xSpeed = random(0.5, 0.65); this.ySpeed = random(0.73, 0.83); this.color = color(random(255), random(255), random(255), random(150, 200)); this.diameter = 12; this.draw = function() { noStroke(); fill(this.color); //display the ball ellipse(this.x, this.y, this.diameter, this.diameter); //add the speed in the current direction this.x+= this.xDir this.xSpeed; this.y+= this.yDir * this.ySpeed; //if the ball hits the edge of the screen change the direction if(this.x - this.diameter / 2 < 230 \|\| this.x + this.diameter / 2 > 370) { this.xDir= -1; } //if the ball hits the edge of the screen change the direction if(this.y - this.diameter / 2 < 275 \|\| this.y + this.diameter / 2 > 365) { this.yDir= -1; } }; }; var Mouse = function() { this.speed = 0; this.width = 115; this.xPos = width + this.width; this.display = function() { pushMatrix(); translate(0, 320); noStroke(); fill(171, 162, 162); ellipse(155, 321, 20, 20); //back ear fill(196, 188, 188); ellipse(162, 320, 20, 20); //front ear //body beginShape(); vertex(225, 350); vertex(150, 350); bezierVertex(145, 350, 140, 350, 130, 340); bezierVertex(140, 335, 140, 335, 145, 330); bezierVertex(150, 325, 150, 325, 155, 325); bezierVertex(195, 320, 235, 310, 225, 350); endShape(); //eye fill(0); ellipse(150, 335, 5, 5); //nose fill(97, 93, 93); ellipse(133, 340, 4, 4); //whiskers noFill(); stroke(107, 103, 107); line(140, 340, 145, 344); line(138, 340, 140, 345); //tail strokeWeight(2); strokeCap(ROUND); stroke(196, 188, 188); line(220, 349, 245, 349); popMatrix(); }; this.move = function() { this.xPos-= 2; translate(this.xPos, 165); if(this.xPos < -this.width2) { this.xPos = width + this.width 10; } }; this.run = function() { pushMatrix(); scale(0.7); this.move(); this.display(); popMatrix(); }; }; var Clock = function(config) { this.x = config.x; this.y = config.y; this.radius = config.radius; this.draw = function() { pushMatrix(); translate(this.x, this.y); //Clock Border noFill(); //strokeWeight(this.radius/45); fill(colorDark); ellipse(0, 0, this.radius * 1.05, this.radius * 1.05); fill(colorWhite); ellipse(0, 0, this.radius, this.radius); //Clock Face stroke(0); fill(0); strokeWeight(this.radius/150); textAlign(CENTER, CENTER); textSize(this.radius/12); for (var i = 0; i < 12; i++){ line(sin(i30)this.radius/2.15, cos(i30)this.radius/2.15, sin(i30)this.radius/2, cos(i30)this.radius/2); text(i+1, -sin(210+i30)this.radius/2.5, cos(210+i30)this.radius/2.5); } //Hour Hand strokeWeight(this.radius/30); line(0, 0, sin(hour()30)this.radius/3.75, -cos(hour()30)this.radius/3.75); //Minute Hand strokeWeight(this.radius/60); line(0, 0, sin(minute()6)this.radius/3, -cos(minute()6)this.radius/3); //Second Hand stroke(255, 0, 0); strokeWeight(this.radius/150); line(0, 0, sin(second()6)this.radius/2.3, -cos(second()6)this.radius/2.3); popMatrix(); }; }; var balls = []; var steam = []; var clock = new Clock({ x: 500, y: 110, radius: 90 }); var book; var mouse = new Mouse(); for(var i = 0; i < 3; i++) { balls.push(new Ball()); } mouseMoved = function() { //if mouse moves over the computer screen stop the screensaver if(mouseX > 230 && mouseX < 370 && mouseY > 275 && mouseY < 365) { screensaverTimer = 200; } }; var scene = function() { background(colorBackground); noStroke(); //wall half fill(189, 219, 219); rect(0, 350, width, 300); fill(170, 207, 207); rect(0, 353, width, 5); //ground fill(221, 188, 171); rect(0, 500, width, 100); fill(191, 159, 117); rect(0, 490, width, 10); //floor boards /* / strokeWeight(2); stroke(191, 159, 117); for(var i = 0; i < 6; i++) { line(300 + i 50, 501, 300 + i * 65, 600); line(300 - i * 50, 501, 300 - i * 65, 600); } //desk noStroke(); fill(colorWhite); //top rect(50, 400, 500, 15); //draws for(var i = 0; i < 2; i++) { noStroke(); fill(colorWhite); rect(60 + i * 350, 415, 130, 150); fill(20, 20, 20, 10); rect(60 + i * 350, 415, 130, 5); //colored draws/handles for(var j = 0; j < 3; j++) { noStroke(); fill(drawColors[j]); rect(65 + i * 350, 420 + j * 45, 120, 40); noStroke(); fill(colorWhite); ellipse(125 + i * 350, 440 + j * 45, 10, 10); } } //computer //screen noStroke(); fill(40); rect(width / 2 - 75, 270, 150, 100, 5, 5, 0, 0); fill(220, 89, 37); rect(width / 2 - 70, 275, 140, 90, 3); //bottom of screen fill(colorWhite); rect(width / 2 - 75, 370, 150, 10, 0, 0, 5, 5); //base fill(40); rect(width / 2 - 15, 380, 30, 20); rect(width / 2 - 20, 395, 40, 5); //pencils strokeWeight(3); stroke(240, 62, 53); line(505, 380, 500, 350); stroke(210, 219, 40); line(510, 380, 509, 353); stroke(20, 195, 204); line(516, 380, 518, 349); stroke(212, 160, 30); line(519, 380, 522, 352); stroke(94, 90, 94); line(500, 350, 500, 350); line(509, 353, 509, 353); line(518, 349, 518, 349); line(522, 352, 522, 352); noStroke(); fill(20, 112, 185); beginShape(); vertex(500, 400); vertex(520, 400); vertex(524, 365); vertex(496, 365); endShape(CLOSE); //lamp stroke(255); strokeWeight(4); line(95, 395, 75, 350); line(75, 350, 95, 300); noStroke(); fill(191, 53, 38); rect(75, 390, 35, 10); ellipse(75, 350, 15, 15); pushMatrix(); translate(113, 315); rotate(-50); arc(0, 0, 40, 40, 181, 360); rect(-7, -27, 10, 10); popMatrix(); //picture //frame shadow fill(20, 20, 20, 10); rect(442, 205, 120, 100); //frame fill(255); rect(440, 200, 120, 100); fill(211, 239, 251); rect(450, 210, 100, 80); //hills fill(107, 193, 130); beginShape(); vertex(450, 290); vertex(450, 280); bezierVertex(460, 270, 480, 270, 490, 270);//first hill bezierVertex(520, 250, 530, 250, 550, 250); vertex(550, 290); vertex(450, 290); endShape(CLOSE); //sun fill(255, 207, 125); ellipse(480, 235, 25, 25); stroke(255, 207, 125); strokeWeight(1); for(var i = 0; i < 360; i+=30) { pushMatrix(); translate(480, 235); rotate(i); line(0, -17, 0, 17); popMatrix(); } //bookshelves //bookshelf top 1 noStroke(); fill(colorWhite); rect(bookShelfX, bookShelfY, 300, 10); fill(20, 20, 20, 10); rect(bookShelfX, bookShelfY + 10, 300, 4); //bookshelf top 2 fill(colorWhite); rect(bookShelfX - 40, bookShelfY + bookShelfHeight, 340, 10); fill(20, 20, 20, 10); rect(bookShelfX - 40, bookShelfY + bookShelfHeight + 10, 340, 4); //pot plant noStroke(); //stem fill(34, 159, 33); rect(323, bookShelfY + bookShelfHeight - 70, 4, 40); //leaves fill(64, 184, 53); pushMatrix(); translate(325, bookShelfY + bookShelfHeight - 50); rotate(-60); ellipse(-13, -4, 10, 20); rotate(110); ellipse(12, -2, 10, 20); popMatrix(); //pot noStroke(); fill(138, 94, 59); beginShape(); vertex(310, bookShelfY + bookShelfHeight); vertex(340, bookShelfY + bookShelfHeight); vertex(345, bookShelfY + bookShelfHeight - 30); vertex(348, bookShelfY + bookShelfHeight - 30); vertex(348, bookShelfY + bookShelfHeight - 35); vertex(302, bookShelfY + bookShelfHeight - 35); vertex(302, bookShelfY + bookShelfHeight - 30); vertex(305, bookShelfY + bookShelfHeight - 30); endShape(CLOSE); stroke(117, 76, 49); line(345, bookShelfY + bookShelfHeight - 30, 305, bookShelfY + bookShelfHeight - 30); //plant noStroke(); pushMatrix(); translate(325, bookShelfY + bookShelfHeight - 70); fill(250, 250, 250); rotate(12); for(var i = 0; i < 6; i++) { rotate(30); ellipse(0, 0, 8, 40); } fill(245, 187, 43); ellipse(0, 0, 15, 15); popMatrix(); //books //books on shelf 1 noStroke(); var n = 0; for(var i = 0; i < booksOnShelf.length; i++) { book = booksOnShelf[i]; pushMatrix(); translate(bookShelfX + 10 + n, bookShelfY); if(i === booksOnShelf.length - 1) { rotate(-20); translate(25, 9); } fill(book.color); rect(0, -book.h, book.w, book.h); fill(20, 20, 20, 30); rect(0, -25, book.w, 25); fill(20, 20, 20, 10); rect(book.w, -book.h * 0.95, book.w * 0.2, book.h * 0.95); pushMatrix(); translate(book.w / 2, -book.h + 5); rotate(90); fill(0); pushStyle(); fill(255); textSize(9); textAlign(LEFT, CENTER); text(book.title, 0, 0); popStyle(); popMatrix(); pushStyle(); fill(255); textAlign(CENTER, TOP); textSize(5); text(book.author, 0, -20, book.w, 100); popStyle(); popMatrix(); n+= book.w + 1; } //books on shelf 2 var n = 0; for(var i = 0; i < booksOnShelf2.length; i++) { book = booksOnShelf2[i]; pushMatrix(); translate(bookShelfX + 10 + n - 40, bookShelfY + bookShelfHeight); fill(book.color); rect(0, -book.h, book.w, book.h); fill(20, 20, 20, 30); rect(0, -25, book.w, 25); fill(20, 20, 20, 10); rect(book.w, -book.h * 0.95, book.w * 0.2, book.h * 0.95); pushMatrix(); translate(book.w / 2, -book.h + 5); rotate(90); fill(0); pushStyle(); fill(255); textSize(9); textAlign(LEFT, CENTER); text(book.title, 0, 0); popStyle(); popMatrix(); pushStyle(); fill(255); textAlign(CENTER, TOP); textSize(5); text(book.author, 0, -20, book.w, 100); popStyle(); popMatrix(); n+= book.w + 1; } //books on desk for(var i = 0; i < booksOnDesk.length; i++) { noStroke(); fill(booksOnDesk[i]); rect(booksOnDeskX - (i % 2 * 2), 400-((i+1)15), 60, 15, 8, 0, 0, 8); fill(colorWhite); rect(booksOnDeskX - (i % 2 2) + 2, 400-((i+1)15) + 2, 58, 11, 8, 0, 0, 8); noFill(); strokeWeight(1); stroke(217, 214, 217); line(booksOnDeskX - (i % 2 2) + 7, 400-((i+1)15) + 4, booksOnDeskX + 52 - (i % 2 2) + 7, 400-((i+1)15) + 4); line(booksOnDeskX - (i % 2 2) + 7, 400-((i+1)15) + 6.5, booksOnDeskX + 52 - (i % 2 2) + 7, 400-((i+1)15) + 6.5); line(booksOnDeskX - (i % 2 2) + 7, 400-((i+1)15) + 10, booksOnDeskX + 52 - (i % 2 2) + 7, 400-((i+1)15) + 10); } }; scene(); var sceneImage = get(0, 0, width, height); draw = function() { background(colorBackground); noStroke(); image(sceneImage, 0, 0); //screensaver if(screensaverTimer-- <= 0) { fill(220, 89, 37); rect(width / 2 - 70, 275, 140, 90, 3); for(var i = 0; i < balls.length; i++) { balls[i].draw(); } } else { fill(181, 212, 232); rect(width / 2 - 70, 275, 140, 90, 3); fill(94, 92, 94); rect(width / 2 - 70, 355, 140, 10); } //clock clock.draw(); //cup steam if(random() < 0.02) { steam.push({ x: random(435, 450), y: 390, timeToLive: 240, amplitude: random(0.1, 0.2), speed: random(0.1, 0.3), radius: random(4, 10) }); } noStroke(); for(var i = steam.length - 1; i >= 0; i--) { fill(150, 150, 150, steam[i].timeToLive--); ellipse(steam[i].x, steam[i].y, steam[i].radius 0.7, steam[i].radius); steam[i].y-= steam[i].speed; steam[i].x += sin(steam[i].y) * steam[i].amplitude; if(steam[i].timeToLive < 0) { steam.splice(i, 1); } } //cup noStroke(); fill(colorWhite); rect(435, 370, 25, 30); fill(77, 50, 33); rect(435, 380, 25, 10); fill(223, 214, 205); rect(435, 370, 25, 10); fill(77, 50, 33); rect(435, 370, 25, 3); fill(189, 219, 219); triangle(435, 370, 437, 400, 435, 400); triangle(460, 370, 458, 400, 460, 400); fill(20, 20, 20, 10); rect(435, 399, 25, 1); //mouse running across the screen mouse.run(); };
Folds	37,115,116,194,199,228,229,293,294,337
Fork	true
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKHZv4rCCQw
Votes	414
Spin-Offs	24
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6657335518822400","title":"Project: Bookshelf","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Gray Wolf 🐺
Author Name	grantjenkins
Author ID	kaid_639291037700385781852565
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739380928314
Updated	8 months ago, 1744828369573
Source Deleted	unknown