Building an Image Generator for the Number 1 Track on Spotify 🌋

Taki Taki Rumba! DJ Snake featuring Selena Gomez, Cardi B, and Ozuna

Image for post
Image for post

Concept

Image for post
Image for post
Figma wireframes used in proposal

Design

Image for post
Image for post
Expanding the square art to various dimensions
#background{
animation: glow 5s ease infinite;
background-image: linear-gradient(to top, #FF5A00, #012061);
background-size: 100% 200%;
}
@keyframes glow{
0%{
background-position: 0% 50%;
}
50%{
background-position: 0% 75%;
}
100%{
background-position: 0% 50%;
}
}
#texture{
background-image: url(texture.jpg);
background-size: cover;
mix-blend-mode: soft-light;
}
video{
mix-blend-mode: lighten;
}
@supports not (mix-blend-mode: multiply){
#texture, video{
display: none;
}
}

Generator

Image for post
Image for post
Taki Taki Layers
[
{
original: "Ozuna",
name: "",
rotation: -90,
top: -300,
left: 0,
align: "left",
width: 550,
height: 145
}
]
let tapeCanvas = document.createElement('canvas')tapeCanvas.height = 1080
tapeCanvas.width = 1080
let tapeContext = tapeCanvas.getContext('2d')
this.friends.forEach((friend, index) => {
let canvas = document.createElement('canvas')
canvas.height = friend.height
canvas.width = friend.width
let context = canvas.getContext('2d') context.drawImage(tapeImage, 0, 0, canvas.width, canvas.height) context.fillStyle = '#003A94'
context.font = "130px 'Brush'"
context.textAlign = friend.align
context.textBaseline = 'middle'
context.fillText(
friend.name.toUpperCase(),
canvas.width * friend.start,
canvas.height / 2
)
tapeContext.drawImage(
canvas,
(tapeCanvas.width / 2) - (canvas.width / 2),
(tapeCanvas.height / 2) - (canvas.height / 2)
)
tapeContext.setTransform(1, 0, 0, 1, 0, 0)
})
context.drawImage(backgroundImage, 0, 0, 720, 1280)
context.drawImage(tapeCanvas, 0, 280, 720, 720)

Video Creator

Video created using Mock

Thanks

Image for post
Image for post
Ozuna, Selena Gomez, DJ Snake, Cardi B

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store