Skip to content

Instantly share code, notes, and snippets.

@syntagmatic syntagmatic/animation.html
Last active Jan 16, 2019

Embed
What would you like to do?
Intro to HTML5 Canvas, Øredev 2018
<style>
body {
width: 1000px;
margin: 0 auto;
padding: 0;
}
</style>
<canvas id='painting' width=740 height=740></canvas>
<script src="d3.v4.js"></script>
<script>
var canvas = document.getElementById('painting')
var context = canvas.getContext('2d')
// center the animation
context.translate(canvas.width/2, canvas.height/2)
d3.timer(function(t) {
context.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height)
var x = Math.cos(t / 2000 * Math.PI) * 120
var y = Math.sin(t / 2000 * Math.PI) * 120
var color = "hsl(" + (Math.floor(t/30) % 360) + ",80%,60%)"
circle(x,y,40,color)
})
function circle(x,y,radius,color) {
context.fillStyle = color
context.beginPath()
context.arc(x,y,radius,0,2*Math.PI)
context.fill()
}
</script>
<canvas id='painting' width=120 height=500></canvas>
<script>
var canvas = document.getElementById('painting')
var context = canvas.getContext('2d')
var data = [1, 1, 2, 3, 5, 8, 13, 21, 34]
context.fillStyle = "#f5b"
data.forEach(drawBar)
function drawBar(d,i) {
var x = 12*i;
var y = 200;
var width = 10;
var height = -5*d;
context.fillRect(x,y,width,height);
}
</script>
View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.