3e:null 3f:["$","title",null,{"children":"Julio Le Parc 1 | Claudio Esperança | Observable"}] 45:T4ab,md`# Julio Le Parc 1

Photo of a painting by [Julio Le Parc](https://www.julioleparc.org) on display at [Carpintaria](https://www.facebook.com/pg/carpintaria.rj)

So, I went to this exhibition featuring [Os Gemeos](http://www.osgemeos.com.br/) and [Julio Le Parc](https://www.julioleparc.org) at the [Carpintaria](https://www.facebook.com/pg/carpintaria.rj) in Rio de Janeiro and was enthralled by this painting. Julio is one of the pioneers of op art and kinetic art, which is something many of us with less artistic talent try to imitate. As Oscar Wilde puts it, “Imitation is the sincerest form of flattery that mediocrity can pay to greatness.” Following suit, I got home and wrote this sketch, trying to transpose the painting's dynamic nature to the computer screen, with no success. So I cheated and made it an animation by making the rectangles' dimensions change according to a scalar field defined by moving 4 particles, two with negative charge and two with positive charge. Animations showing the particles and the scalar field are shown below. `46:[{"id":"83ea8b52899da9cf6328a412dbc3bb9f6caeec7a022b1788f778f02965623fa939ecbb94dba40cb3d06e0baaba7318d9205dff59afd9960746b128e0e8e26e81","href":"https://static.observableusercontent.com/files/83ea8b52899da9cf6328a412dbc3bb9f6caeec7a022b1788f778f02965623fa939ecbb94dba40cb3d06e0baaba7318d9205dff59afd9960746b128e0e8e26e81","name":"julio1cropped.jpg","type":"image/jpeg","lastModified":1573916978642.088,"size":92668}] 43:{"id":"1dabc3a2725639ce","slug":"julio-le-parc-1","title":"Julio Le Parc 1","thumbnail":"39dbbbce3c0fa378f4d3e61f6c5059761a424f5bfecd7c6bc70ec7ad7bdf2fde","access_level":"public","create_time":"$D2019-11-10T14:52:21.025Z","update_time":"$D2019-11-20T00:12:51.457Z","view_time":null,"first_public_time":"$D2019-11-16T15:42:19.236Z","has_unpublished_edits":null,"fork":false,"stars":19,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024","bio":"Computer Graphics & Visualization @ufrj.br "},"version":159,"publish_version":159,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"bio":"Computer Graphics & Visualization @ufrj.br "}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Julio Le Parc 1","cells":[{"id":0,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"{\n let w = size;\n let radius = w/3;\n let ctx = DOM.context2d(w,w);\n let n = 14;\n let smax = w / (n+2);\n let smin = smax * 0.65;\n let bg = '#888';\n let black = '#000';\n let white = '#fff';\n while (true) {\n ctx.fillStyle = bg;\n ctx.fillRect(0,0,w,w);\n let f = potentialField(particles,radius);\n for (let i = 0; i < n; i++) {\n let x = (i+1.5)*smax;\n for (let j = 0; j < n; j++) {\n let y = (j+1.5)*smax;\n let v = f(Vec(x,y));\n let a = smin + (v<0 ? 0 : (smax-smin)*2*Math.min(v,1))\n let b = smin + (v>0 ? 0 : (smax-smin)*2*Math.min(-v,1));\n if ((i+j)%2==0) {\n ctx.fillStyle = black;\n ctx.fillRect (x-a/2,y-b/2,a,b);\n }\n else {\n ctx.fillStyle = white;\n ctx.fillRect (x-b/2,y-a/2,b,a);\n }\n }\n }\n yield ctx.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"{\n let ctx = DOM.context2d(size,size);\n while (true) {\n ctx.clearRect(0,0,size,size);\n for (let q of particles) {\n ctx.fillStyle = q.weight > 0 ? '#000' : '#F00';\n ctx.beginPath();\n ctx.arc (q.pos.x,q.pos.y,size/50,0,Math.PI*2,0);\n ctx.fill();\n q.move()\n }\n yield ctx.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"{\n let w = size*1.5;\n let ctx = DOM.context2d(w,size);\n let nrows = 50;\n let margin = size/16;\n let npoints = 100;\n let dy = (size-margin*6)/(nrows-1);\n let h = dy*6;\n let dx = (size-margin*2)/(npoints-1);\n while (true) {\n ctx.fillStyle='#aaa';\n ctx.fillRect(0,0,w,size);\n let f = potentialField(particles,size/3);\n for (let i = 0; i < nrows; i++) {\n let y = dy*i+margin*3;\n let delta = (nrows-1-i)*((w-size)/(nrows-1))\n ctx.fillStyle = '#fff';\n ctx.strokeStyle = '#000';\n ctx.beginPath();\n ctx.moveTo (margin+delta,y+h*2);\n for (let j = 0; j < npoints; j++) {\n let x = margin + j*dx;\n ctx.lineTo(x+delta,y-f(Vec(x,y))*h);\n }\n ctx.lineTo(size-margin+delta,y+h*2);\n ctx.fill();\n ctx.stroke();\n }\n yield ctx.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"size = width*0.6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"world = ({min:Vec(25,25), max:Vec(size-25,size-25)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"class Particle {\n constructor (pos = Vec(0,0),vel = Vec(1,0),weight = 1) {\n [this.pos,this.vel,this.weight] = [pos,vel,weight];\n }\n // Move and bounce off walls\n move () {\n let [pos,vel] = [this.pos.add(this.vel),this.vel];\n if (pos.x > world.max.x) {\n pos.x = 2 * world.max.x - pos.x;\n vel = Vec(-vel.x, vel.y)\n } else if (pos.x < world.min.x) {\n pos.x = 2 * world.min.x - pos.x\n vel = Vec(-vel.x, vel.y)\n }\n if (pos.y > world.max.y) {\n pos.y = 2 * world.max.y - pos.y;\n vel = Vec(vel.x, -vel.y)\n } else if (pos.y < world.min.y) {\n pos.y = 2 * world.min.y - pos.y\n vel = Vec(vel.x, -vel.y)\n }\n [this.pos,this.vel] = [pos,vel]\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"particles = [[0,0,1],[size,0,-1],[0,size,-1],[size,size,1]].map(([x,y,w])=>new Particle(Vec(x,y),Vec(Math.random()*5,Math.random()*5),w))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"function potentialField(particles,radius) {\n let poles = [];\n for (let p of particles) {\n poles.push(smoothStep(p.pos.x,p.pos.y,radius,p.weight,0));\n }\n return (point) => poles.map(f => f(point.x,point.y)).reduce((a,b) => a+b);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"smoothStep = function(x0,y0,radius,min,max) {\n return function (x,y) {\n let d = Math.sqrt(Math.pow(x-x0,2)+Math.pow(y-y0,2))/radius;\n if (d <= 0) return min;\n if (d >= 1) return max;\n return min + (max-min)*(3*d*d-2*d*d*d);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"import { Vector, Vec } from \"@esperanc/2d-geometry-utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"