loading reading lists ...
');
function adjustReadingListIcon(isInReadingList){
$readingListToggle.toggleClass("fa-plus", !isInReadingList);
$readingListToggle.toggleClass("fa-check", isInReadingList);
var tooltipMessage = isInReadingList ? "edit in reading lists" : "add to reading list";
$readingListToggle.attr("title", tooltipMessage);
$readingListToggle.attr("data-original-title", tooltipMessage);
}
$.ajax({
url: "/readingList/isInReadingList",
data: {
productId: 1950
}
}).done(function (data) {
adjustReadingListIcon(data && data.hasProductInReadingList);
}).catch(function(e){
console.log(e);
adjustReadingListIcon(false);
});
$readingListToggle.on("click", function(){
if(codePromise == null){ showToast() }
loadCode().then(function(store){
store.requestReadingListSpecificationForProduct({
id: window.readingListsServerVars.externalId,
manningId: window.readingListsServerVars.productId,
title: window.readingListsServerVars.title
});
ReadingLists.ReactDOM.render(
ReadingLists.React.createElement(ReadingLists.ManningOnlineReadingListModal, {
store: store,
}),
document.getElementById("reading-lists-modal")
);
}).catch(function(e){
console.log("Error loading code reading list code");
});
});
var codePromise
var readingListStore
function loadCode(){
if(codePromise) { return codePromise }
return codePromise = new Promise(function (resolve, reject){
$.getScript(window.readingListsServerVars.libraryLocation).done(function(){
hideToast()
readingListStore = new ReadingLists.ReadingListStore(
new ReadingLists.ReadingListProvider(
new ReadingLists.ReadingListWebProvider(
ReadingLists.SourceApp.marketplace,
getDeploymentType()
)
)
);
readingListStore.onReadingListChange(handleChange);
readingListStore.onReadingListModalChange(handleChange);
resolve(readingListStore);
}).catch(function(){
hideToast();
console.log("Error downloading reading lists source");
$readingListToggle.css("display", "none");
reject();
});
});
}
function handleChange(){
if(readingListStore != null) {
adjustReadingListIcon(readingListStore.isInAtLeastOneReadingList({
id: window.readingListsServerVars.externalId,
manningId: window.readingListsServerVars.productId
}));
}
}
var $readingListToast = $("#reading-list-toast");
function showToast(){
$readingListToast.css("display", "flex");
setTimeout(function(){
$readingListToast.addClass("shown");
}, 16);
}
function hideToast(){
$readingListToast.removeClass("shown");
setTimeout(function(){
$readingListToast.css("display", "none");
}, 150);
}
function getDeploymentType(){
switch(window.readingListsServerVars.deploymentType){
case "development":
case "test":
return ReadingLists.DeploymentType.dev;
case "qa":
return ReadingLists.DeploymentType.qa;
case "production":
return ReadingLists.DeploymentType.prod;
case "docker":
return ReadingLists.DeploymentType.docker;
default:
console.error("Unknown deployment environment, defaulting to production");
return ReadingLists.DeploymentType.prod;
}
}
});
}
});
- prerequisites
- basic JavaScript • basics of p5.js • basic debugging
- skills learned
- drawing with 3D primitives and transformations • working with the p5.js 3D camera • p5.js audio playback and movie rendering
pro $24.99 per month
- access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
- choose one free eBook per month to keep
- exclusive 50% discount on all purchases
lite $19.99 per month
- access to all Manning books, including MEAPs!
team
5, 10 or 20 seats+ for your team - learn more
Look inside
In this liveProject, you’ll use p5.js to link and synchronize visual assets with audio material. You’ll start by simulating a 3D landscape, then animate a camera flight through the landscape, before cohesively setting your movie to music to create a music video.
This project is designed for learning purposes and is not a complete, production-ready application or solution.
features
Sync to Music project for free
